/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@media(max-width: 990px) {
    .stack-container {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width: 816px) {
    .stack-container {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 627px) {
    .stack-container {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 500px) {
    .title {
        font-size: 2.4rem;
    }
    .subtitle {
        font-size: 1.3rem;
    }
    .stack-container {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 0px;
    }
    .project-wrapper {
        margin-left: 8px;
        margin-right: 8px;
    }
    .project .paragraph-title {
        font-size: 24px;
    }
    .project .paragraph-body {
        font-size: 15px;
    }
}

@media(max-width: 400px) {
    .project-wrapper {
        margin-left: 4px;
        margin-right: 4px;
    }
    .project .paragraph-title {
        font-size: 20px;
    }
    .project .paragraph-body {
        font-size: 14px;
    }
    .project .overlay {
        padding: 14px;
        height: calc(100% - 28px);
        width: calc(100% - 28px);
    }
    .action-button {
        width: 70%;
    }
}

@media(min-width: 500px) and (max-width: 600px) {
    .title {
        font-size: 2.8rem;
    }
    .subtitle {
        font-size: 1.5rem;
    }
}

@media(min-width: 600px) and (max-width: 700px) {
    .title {
        font-size: 3.2rem;
    }
    .subtitle {
        font-size: 1.8rem;
    }
}

@media(max-width: 700px) {
    .link.button {
        width: 57px;
        height: 57px;
        font-size: 2.1rem;
    }
    .link.button.curriculum {
        min-width: 220px;
        font-size: 1.7rem;
        margin-top: 8px;
    }
    .links-bar {
        width: 70%;
        padding: 8px;
        max-width: 682px;
    }
}

@media(min-width: 700px) and (max-width: 870px) {
    .title {
        font-size: 4rem;
    }
    .subtitle {
        font-size: 2rem;
    }
}

@media(min-width: 1024px) {
    .title,
    .subtitle {
        margin: 0.06em 0;
    }
}

@media (max-width: 660px) {
    .referral {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 48px;
    }
    .carousel-prev,
    .carousel-next {
        font-size: 16px;
    }
    .footer {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
        row-gap: 6px;
    }
}

@media (max-width: 615px) {
    .referral {
        min-height: 350px;
    }
}

@media (max-width: 600px) {
    .referral {
        min-height: 380px;
    }
    .referral.spanish {
        min-height: 420px;
    }
}

@media (max-width: 592px) {
    .referral {
        min-height: 400px;
    }
}

@media (max-width: 510px) {
    .referral {
        min-height: 420px;
    }
}

@media (max-width: 475px) {
    .referral.spanish {
        min-height: 460px;
    }
}

@media (max-width: 450px) {
    .referral {
        min-height: 440px;
    }
}

@media (max-width: 440px) {
    .referral {
        min-height: 460px;
    }
    .referral.spanish {
        min-height: 500px;
    }
}

@media (max-width: 410px) {
    .referral {
        min-height: 480px;
    }
    .links-bar {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        row-gap: 8px;
    }
}

@media (max-width: 390px) {
    .referral {
        min-height: 500px;
    }
}

@media (max-width: 385px) {
    .referral {
        min-height: 520px;
    }
    .referral.spanish {
        min-height: 600px;
    }
}

@media (max-width: 370px) {
    .referral {
        min-height: 540px;
    }
}

@media (max-width: 360px) {
    .referral {
        min-height: 578px;
    }
    .referral.spanish {
        min-height: 620px;
    }
}

@media (max-width: 500px) {
    .link.button.curriculum {
        padding: 6px 10px;
        font-size: 1.6rem;
    }
    .link.button {
        width: 52px;
        height: 52px;
        font-size: 1.9rem;
    }
    .progress-bar-background {
        background-color: #e9e5e5;
        width: 70%;
        border-radius: 6px;
    }
    .cornerstone-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}


/*
**  NAVIGATION BAR RESPONSIVE
*/

@media (max-width: 960px) {
    .main-buttons {
        width: 100%;
    }
    .navigation-bar {
        padding: 0px;
        width: 100%;
    }
    .navigation-bar a:not(.icon):not(.brand),
    .dropdown {
        display: none;
    }
    .navigation-content a:hover,
    .dropdown:hover {
        background-color: #222 !important;
    }
    .navigation-bar a.icon {
        display: block;
        margin-right: 8px;
        padding: 8px;
    }
    .navigation-content.animation-finished a:hover,
    .navigation-content.animation-finished .dropdown:hover {
        background-color: #22A39F !important;
    }
    .navigation-bar.responsive a.icon {
        background-color: #e4e4e4;
        border-radius: 4px;
    }
    .navigation-bar.responsive .navigation-link,
    .navigation-bar.responsive .dropdown {
        padding-left: 16px;
        padding-right: 16px;
    }
    .navigation-bar.responsive .dropdown a {
        padding-left: 32px;
        padding-right: 32px;
    }
    .navigation-bar.responsive .navigation-content,
    .navigation-bar.responsive .navigation-buttons,
    .navigation-bar.responsive .dropdown,
    .navigation-bar.responsive a:not(.icon):not(.brand) {
        display: block !important;
        text-align: left;
        width: 100%;
        max-width: unset;
        background-color: #222;
    }
    .navigation-bar.responsive .horizontal-bar {
        background-color: #222;
    }
    .navigation-bar.responsive .dropdown-content {
        width: 100%;
        left: 0;
    }
    .navigation-bar.responsive .content-wrapper {
        display: block;
    }
}


/*
**  EXPERIENCE RESPONSIVE
*/

@media(min-width: 1263px) and (max-width: 1300px) {
    .experience .fa-briefcase {
        left: 26%;
    }
    .timeline::after {
        left: 36%;
        margin-left: -10px;
    }
}

@media(min-width: 1222px) and (max-width: 1262px) {
    .experience .fa-briefcase {
        left: 27%;
    }
    .timeline::after {
        left: 37%;
        margin-left: -13px;
    }
}

@media(min-width: 1181px) and (max-width: 1221px) {
    .experience .fa-briefcase {
        left: 28%;
    }
    .timeline::after {
        left: 38%;
        margin-left: -18px;
    }
}

@media(min-width: 1141px) and (max-width: 1180px) {
    .experience .fa-briefcase {
        left: 29%;
    }
    .timeline::after {
        left: 39%;
        margin-left: -19px;
    }
}

@media(min-width: 1101px) and (max-width: 1140px) {
    .experience .fa-briefcase {
        left: 30%;
    }
    .timeline::after {
        left: 40%;
        margin-left: -18px;
    }
}

@media(max-width: 1100px) {
    .experience {
        width: 80%;
    }
}

@media(min-width: 1081px) and (max-width: 1100px) {
    .experience .fa-briefcase {
        left: 27%;
    }
    .timeline::after {
        left: 35%;
        margin-left: -12px;
    }
}

@media(min-width: 1031px) and (max-width: 1080px) {
    .experience .fa-briefcase {
        left: 28%;
    }
    .timeline::after {
        left: 36%;
        margin-left: -13px;
    }
}

@media(min-width: 983px) and (max-width: 1030px) {
    .experience .fa-briefcase {
        left: 29%;
    }
    .timeline::after {
        left: 37%;
        margin-left: -12px;
    }
}

@media(min-width: 961px) and (max-width: 982px) {
    .experience .fa-briefcase {
        left: 30%;
    }
    .timeline::after {
        left: 38%;
        margin-left: -12px;
    }
}

@media(min-width: 939px) and (max-width: 960px) {
    .experience .fa-briefcase {
        left: 31%;
    }
    .timeline::after {
        left: 39%;
        margin-left: -13px !important;
    }
}

@media(min-width: 917px) and (max-width: 938px) {
    .experience .fa-briefcase {
        left: 32%;
    }
    .timeline::after {
        left: 40%;
        margin-left: -14px !important;
    }
}

@media(min-width: 895px) and (max-width: 916px) {
    .experience .fa-briefcase {
        left: 33%;
    }
    .timeline::after {
        left: 41%;
        margin-left: -15px !important;
    }
}

@media(min-width: 873px) and (max-width: 894px) {
    .experience .fa-briefcase {
        left: 34%;
    }
    .timeline::after {
        left: 42%;
        margin-left: -16px !important;
    }
}

@media(min-width: 851px) and (max-width: 872px) {
    .experience .fa-briefcase {
        left: 35%;
    }
    .timeline::after {
        left: 42%;
        margin-left: -8px !important;
    }
}

@media(max-width: 850px) {
    .experience {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
    .company {
        margin-right: 0px;
        margin-bottom: 18px;
        max-width: 600px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
    .experience .description::after {
        right: auto;
        border-right-color: transparent;
        border-bottom-color: #f3f3f3;
        top: -20px;
    }
    .experience .description {
        margin-left: 0;
    }
    .timeline::after {
        display: none;
    }
    .experience .fa-briefcase {
        left: unset;
        right: 0;
        margin-top: 36px;
    }
    .timeline {
        margin-left: 0;
        margin-right: 0;
    }
}

@media(min-width: 821px) {
    .paragraph.big.dynamic {
        max-width: 750px !important;
    }
}

@media(max-width: 750px) {
    .experience .fa-briefcase {
        margin-right: 0;
    }
}