/* Keep the original RyanCV profile card (V-cut photo) on every page.
   Only stop titles/quote/socials from overlapping. Do not flatten the photo. */

.subtitle-typed .typing-title {
    display: none !important;
}

.card-started .profile .slide {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 52% !important;
    overflow: hidden !important;
    z-index: 1;
    background-size: cover;
    background-position: center 18%;
}

.card-started .profile .slide:before,
.card-started .profile .slide:after {
    content: "";
    position: absolute;
    z-index: 2;
    left: -25%;
    bottom: -63%;
    width: 100%;
    height: 70%;
    background: #ffffff;
    transform: rotate(12deg);
}

.card-started .profile .slide:after {
    left: auto;
    right: -25%;
    transform: rotate(-8deg);
}

.card-started .profile {
    justify-content: center !important;
    container-type: inline-size;
}

.card-started .profile.no-photo {
    padding-top: 50px !important;
}

.card-started .profile .profile-body {
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: center;
}

.card-started .profile.no-photo .title,
.card-started .profile .title {
    position: relative !important;
    z-index: 5 !important;
    width: 100%;
    margin-top: 200px !important;
    margin-bottom: 0;
    padding: 0 8px;
    font-size: 26px !important;
    font-size: clamp(20px, 7.1cqi, 32px) !important;
    line-height: 1.15 !important;
    color: #323232;
    text-align: center;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip;
    word-break: normal;
    letter-spacing: -0.03em;
}

.card-started .profile .subtitle {
    display: inline-block !important;
    height: 20px !important;
    overflow: hidden;
    margin: 8px 0 14px !important;
    color: #78cc6d !important;
    font-size: 16px !important;
    line-height: 20px !important;
    position: relative;
    z-index: 5;
}

.card-started .profile .typed-cursor,
.typed-cursor {
    display: none !important;
}

.card-started .profile .profile-quote {
    display: block;
    position: relative;
    z-index: 5;
    width: calc(100% - 40px);
    max-width: 320px;
    margin: 0 auto 8px;
    padding: 8px 12px;
    background: #78cc6d;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 4px;
    text-align: center;
}

.card-started .profile .social {
    position: relative;
    z-index: 5;
    margin: 16px 0 0;
    max-width: 100%;
    line-height: 1.9;
}

.card-started .profile .social a {
    margin: 0 6px 8px !important;
    display: inline-block;
    vertical-align: middle;
}

.card-started .lnks {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
}

@media (max-width: 1023px) {
    .header .profile .title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.25 !important;
        font-size: 13px !important;
    }
    .card-started .profile .slide {
        height: 260px !important;
        background-position: center 16%;
    }
    .card-started .profile.no-photo .title,
    .card-started .profile .title {
        margin-top: 272px !important;
        font-size: 24px !important;
        font-size: clamp(20px, 7.1cqi, 28px) !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 680px) {
    .header {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff;
        overflow: visible !important;
        z-index: 100;
    }
    .header .profile {
        display: block !important;
        padding: 8px 54px 8px 14px !important;
        height: 64px !important;
        text-align: left !important;
    }
    .header .menu-btn {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 62px !important;
        height: 62px !important;
        display: block !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .header .top-menu {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    }
    .header .top-menu ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow-x: auto !important;
        background: #fff;
    }
    .header .top-menu ul li {
        display: block !important;
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .header .top-menu ul li a {
        display: block !important;
        height: auto !important;
        min-height: 62px;
        padding: 8px 2px 6px !important;
        text-align: center !important;
        overflow: hidden;
    }
    .header .top-menu ul li a .icon {
        position: relative !important;
        margin: 0 auto 2px !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 18px !important;
        line-height: 22px !important;
    }
    .header .top-menu ul li a .link {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
        width: 100% !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
    }
    .container,
    .container.opened {
        padding-top: 140px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .card-started .profile .slide {
        height: 200px !important;
    }
    .card-started .profile.no-photo .title,
    .card-started .profile .title {
        margin-top: 170px !important;
        font-size: 20px !important;
        font-size: clamp(18px, 7cqi, 22px) !important;
        white-space: nowrap !important;
    }
    .card-started .profile .subtitle {
        font-size: 14px !important;
    }
    .card-started .profile .typed-cursor,
    .typed-cursor {
        display: none !important;
    }
}