@media only screen and (max-width: 768px){
    .nav-title{
        display: none;
    }
    #index-header, header{
        padding: 15px;
    }
    #nav-front-two{
        padding: 15px;
    }
    #nav-front-link{
        right: 20px;
    }
    #nav-back{
        padding: 20px;
    }
    #nav-back .nav-one .nav-container:last-child{
        width: 100%;
    }
    #nav-back #nav-deploy li{
        font-size: 13vw;
    }
    #nav-back .nav-two li{
        padding: 0 20px;
    }
    #nav-back .nav-two::before{
        left: -25%;
    }
    #nav-back .nav-two::after{
        right: -25%;
    }



    #index-about #about-resume{
        padding: 15px;
        flex-direction: column;
    }
    #index-about .resume-partone{
        width: 100%;
        padding: 15px;
    }
    #index-about .resume-parttwo{
        width: 100%;
    }
    #index-about .resume-partthree{
        display: none;
    }
    #index-about .about-resume-download{
        flex-direction: column;
    }
    #index-about .about-resume-download button{
        width: 100%;
        padding: 25px;
    }
    #index-experience{
        padding: 15px;
        flex-direction: column;
    }
    #index-recent{
        padding: 15px;
    }
    #index-recent #recent-grid{
        padding: 20px;
    }
    #index-recent #recent-grid .recent-item a{
        padding: 50px 0;
    }
    #index-recent #recent-grid .recent-item .recent-list{
    display: none;
    }
    #index-recent #recent-button{
        text-align: center;
    }
    #index-recent #recent-button a::after{
        width: 40%;
        left: 50%;
    }

    #index-skills{
        padding: 15px;
    }
    #index-contact{
        padding: 20px;
    }
    #index-contact h2{
        font-size: 15vw;
        text-align: center;
    }
    #index-contact h2::before{
        left: -95%;
    }
    #index-contact h2::after{
        right: -95%;
    }
    #index-contact .contact-column{
        flex-direction: column;
    }
    #index-contact .contact-column-left{
        width: 100%;
    }
    #index-contact .contact-column-right{
        width: 100%;
    }
    #index-contact form button{
        width: 100%;
    }
    footer{
        padding: 0;
    }
    footer .footer-container{
        flex-direction: column;
    }
    footer .footer-copyright{
        text-align: center;
        padding: 30px 15px;
    }
    footer .footer-network ul{
        flex-direction: column;
    }
    footer .footer-network li{
        padding: 30px !important;
        text-align: center;
    }
    footer .footer-container::before{
        width: 100%;
        top: 0;
        left: 0;
    }
   









    main#list{
        padding: 20px;
    }

    #list-headline .list-headline{
        padding-top: 0;
    }
    #list-headline .list-tag{
        flex-direction: column;
        width: 100%;
    }
    #list-projects .project-group{
        flex-direction: column;
        gap: 25px 5%;
    }
    #list-projects .project-item{
        width: 100%;
        margin: 25px 0 0 0;
    }
    #list-projects .project-container-top{
        padding: 10px;
    }
    #list-projects .project-container-top span{
        font-size: 12pt;
    }
    #list-projects #load-more{
        width: 100%;
        padding: 30px 24px;
        margin: 25px auto;
    }




    #individual #individual-container{
        padding: 15px;
        flex-direction: column;
    }
    #individual .individual-content{
        padding-bottom: 0;
    }
    #individual .individual-column:first-child{
        position: relative;
        width: 100%;
        top: 25px;
    }
    #individual .individual-column:last-child{
        padding: 50px 0;
    }
    #individual .individual-column{
        width: 100%;
    }
    #individual .individual-content h1{
        font-size: 4em;
    }
    #individual .individual-more{
       flex-direction: column;
        gap: 25px;
    }
    #individual .filter-tag{
        padding: 14px 24px;
        width: max-content;
    }
    #individual .project-details-sub{
        flex-direction: column;
        gap: 25px;
    }
    #individual #individual-tools .tools-list{
        flex-wrap: wrap;
    }



    #individual #project-details .individual-one{
        grid-template-columns: none;
        justify-content: start;
    }
    #individual #project-details .individual-one h3{
        font-size: 1.5em;
    }
    #individual #project-details .individual-one p{
        font-size: 1.2em;
    }
    #individual #individual-tools .tools-item{
        padding: 18px 18px;
    }
}



@media screen and (min-width: 769px) and (max-width: 1150px){
    #individual .filter-tag{
        padding: 8px 14px;
        width: max-content;
    }

    #nav-front-two{
        padding: 15px;
    }
    #nav-front-link{
        right: 20px;
    }
    #nav-back{
        padding: 20px;
    }
    #nav-back .nav-one .nav-container:last-child{
        width: 100%;
    }
    #nav-back #nav-deploy li{
        font-size: 13vw;
    }
    #nav-back .nav-two li{
        padding: 0 20px;
    }
    #nav-back .nav-two::before{
        left: -25%;
    }
    #nav-back .nav-two::after{
        right: -25%;
    }




    #index-about #about-resume{
        padding: 50px;
    }
    #index-about .resume-partone{
        padding: 15px;
        padding-top: 100px;
        flex-direction: column;
        width: 100%;
    }
    #index-about .resume-item{
        width: 100%;
    }
    #index-about .about-resume-download{
        flex-direction: column;
    }
    #index-about .about-resume-download button{
        width: 100%;
    }





    #index-experience{
        padding: 50px;
    }



    #index-recent{
        padding: 50px;
    }
    #index-recent #recent-grid{
        padding: 0;
    }
    #index-recent #recent-button{
    text-align: center;
    }




    #index-skills{
    padding: 0
    }



    #index-contact{
        padding: 50px;
    }
    #index-contact h2::after{
        right: -70%;
    }
    #index-contact .contact-column{
        flex-direction: column;
    }
    #index-contact .contact-column-left{
        width: 100%;
    }
    #index-contact .contact-column-right{
        width: 100%;
    }


    footer{
        padding: 50px 20px;
    }
    footer .footer-container{
        flex-direction: column;
    }
    footer .footer-container div{
        padding: 25px;
    }
    footer .footer-container::before{
        left: 30%;
    }





    main#list{
        padding: 30px;
        margin-top: 0;
    }
    #list-projects .project-group{
        justify-content: space-between;
    }
    #list-projects .project-item{
        width: 45%;
        margin: 50px 0 0  0;
    }
    #list-projects #load-more{
        margin: 50px auto;
        width: 100%;
        padding: 30px 18px;
    }


    #individual #individual-container{
        padding: 50px;
    }
    #individual .individual-content h1{
        font-size: 5em;
    }
    #individual #individual-container{
        flex-direction: column;
    }
    #individual .individual-column:first-child{
        position: relative;
        width: 100%;
        top: 0;
    }
    #individual .individual-column:last-child{
        padding: 25px 0;
    }
    #individual .individual-column{
        width: 100%;
    }
    #individual #individual-modal{
        padding: 25px 200px;
    }
}

@media screen and (min-width: 1151px) and (max-width: 1440px){
    #nav-front-two{
        padding: 10px 4%;
    }
    #nav-front-link{
        right: 4%;
    }
    #individual #individual-container{
        padding: 40px 6%;
    }
    #individual .individual-content h1{
        font-size: 3em;
    }
}