/*
******************** FOR DEVICES MORE THAN XS **************************
*/
@media screen and (min-width: 480px) {
    .scroll-progress-container {
        height: 2.5px;
    }
    
    .name {
        top: 50%;
    }

    .first-name,
    .last-name {
        font-size: 72px;
        letter-spacing: 10px;
    }

    .first-name {
        left: -60%;

    }

    .last-name {
        left: 30%;
        top: 75px;
    }

    .tagline-container {
        top: 75%;
        font-size: 24px;
    }

    #about {
        overflow: hidden;
        display: block;
        position: relative;
    }

    #about::before {
        background: rgba(0, 0, 0, 0.1);
        content: "";
        width: 80%;
        height: 300%;
        transition: 0.6s;
        position: absolute;
        /*        filter: blur(30px);*/
        transform: skewX(40deg) translateX(15%);
    }

    #about:hover::before {
        transform: skewX(40deg) translate(113%);
    }

    .project-expanded {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1));
        padding: 120px 120px 70px 120px;
        z-index: 10;
    }

    .project-container {
        position: relative;
        top: 0;
        left: 0%;
        width: 100%;
        height: 100%;
        border-radius: 500px 30px 30px 30px;
    }

    .project-container .cover {
        position: relative;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 50%;
        height: 100%;
        z-index: 5;
    }

    .cover img {
        width: 100%;
        object-fit: cover;
        object-position: left;
        height: 100%;
        border-radius: 500px 0px 0px 30px;
    }

    .project-container .bg {
        position: absolute;
        top: 0%;
        left: 49%;
        width: 51%;
        height: 76%;
        margin-top: 40px;
        border-radius: 0px 15px 30px 0px;
        overflow: hidden;
    }

    .project-container .bg .blurred {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 50%;
        /*        background: blue;*/
        transform: translate(-50%, 0%);
        background: url("../images/proj-exp-cover.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
        border-radius: 0px 15px 30px 0px;
        filter: blur(5px);
        z-index: -5;
    }

    .project-container .bg .tint {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.65);
        border-radius: 0px 15px 30px 0px;
        /*        z-index: 2;*/
    }

    .project-expanded .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: black;
        opacity: 1;
        box-shadow: -1px 1px 5px 0px rgba(250, 250, 250, 0.9);
        z-index: -5;
        /*        border: 3px solid white;*/
    }

    .close:hover,
    .cover button:hover {
        cursor: pointer;
    }

    .close button {
        width: 100%;
        height: 100%;
        border: none;
        background: none;
        color: white;
    }

    .close button i {
        font-size: 0.6em;
        transform: translateY(-50%);
    }

    .project-expanded .icon {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        z-index: 4;
    }

    .project-expanded .icon::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150%;
        height: 150%;
        background: white;
        content: "";
        border-radius: 50%;
        filter: blur(40px);
    }

    .project-expanded .icon img {
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%);
    }

    .project-expanded .btn-goto {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 50%);
        padding: 3px 10px 5px 10px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background: #94081d;
        opacity: 1;
        box-shadow: -1px 1px 10px 0px rgba(0, 0, 0, 0.9);
        color: white;
        overflow: hidden;
        z-index: 35;
    }

    .btn-goto::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0%;
        height: 0%;
        background: white;
        content: "";
        z-index: -1;
        transition: 0.3s;
        border-radius: 50%;
    }

    .btn-goto:hover::before {
        width: 100%;
        height: 100%;
    }

    .btn-goto:hover,
    .btn-goto button:hover,
    .btn-goto button a:hover {
        cursor: pointer;
    }

    .btn-goto button {
        width: 100%;
        height: 100%;
        border: none;
        background: none;
    }

    .btn-goto button a {
        color: white;
        /*        font-size: 12px;*/
        transition: 0.3s;
    }

    .btn-goto:hover button a {
        color: #94081d;
    }

    .project-expanded .title {
        position: absolute;
        top: 8%;
        left: 50%;
        margin-top: 55px;
        margin-left: 20px;
        z-index: 4;
    }

    .title {
        color: white;
        text-shadow: 2px 2px 10px #94081d;
    }

    .title h4 {
        font-size: 3.6em;
    }

    .project-expanded .category {
        position: absolute;
        top: 0%;
        left: 50%;
        margin-top: 55px;
        margin-left: 22px;
        z-index: 4;
    }

    .category {
        color: #94081d;
        font-size: 2em;
        text-shadow: 1px 1px 5px #222222;
    }

    .project-expanded .desc {
        position: absolute;
        top: 180px;
        right: 15px;
        width: 50%;
        padding-left: 45px;
        padding-right: 30px;
        font-size: 14px;
        margin-top: 83px;
        z-index: 35;
    }

    .desc {
        color: #b8b8b8;
        text-align: center;
    }

    .desc p {
        font-size: 1.5em;
    }

    .project-expanded .keywords {
        position: absolute;
        bottom: 50px;
        right: 15px;
        transform: translateY(50%);
        width: 50%;
        padding-right: 30px;
        padding-left: 80px;
        font-size: 14px;
        /*        background: green;*/
        z-index: -1;
    }

    .keywords p {
        text-align: center;
        font-weight: bold;
    }

    .keywords {
        color: #ccc;
        text-shadow: 1px 1px 0px #94081d;
    }

    .keywords p {
        font-size: 1.5em;
    }

    .keywords strong {
        font-size: 1.6em;
        color: #94081d;
        text-shadow: 0px 1px 2px white;
    }

    #achievements {
        margin-top: 50px;
    }

    .achievements-carousel .badge {
        padding: 10px;
        height: 50%;
    }

    .achievements-carousel .badge img {
        width: auto;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .achievements-carousel .title {
        height: 50%;
    }

    .achievements-carousel .title-content {
        text-align: center;
        margin-left: 5px;
        font-size: 2em;
    }

    .my-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    #contact::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        content: "";
        transform: rotate(45deg) translateY(50%);
        z-index: -1;
        transition: 0.5s;
    }

    #contact:hover::after {
        transform: rotate(45deg) translateY(-50%);
    }

    .contact-form label {
        position: absolute;
        top: 30px;
        transform: translateY(-100%);
    }

    .contact-form {
        background: rgba(0, 0, 0, 0.4);
        /*rgba(255, 255, 255, 0.3);*/
        box-shadow: 0px 0px 20px 0px rgba(147, 8, 29, 0.7);
        padding: 30px 40px 30px 40px;
        border-radius: 5px;
    }

    .contact-form input,
    .contact-form textarea {
        margin-bottom: 20px;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.4);
        color: black;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        color: #111;
    }

    .contact-form .submit {}

    .my-info .my-email,
    .my-info .my-phone,
    .my-info .my-location {
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .social-links {
        padding-left: 40px;
    }

    #footer .quote {
        letter-spacing: 2px;
    }

    .btn-github-holder {
        padding: 50px 0px 0px 0px;
    }

}