@media screen and (min-width: 320px) and (max-width: 767px){
    /* main{
        position: absolute;
    } */
    .container{
        margin-bottom: 0;
    }
    .project-wrapper{        
        padding: 0 1.5rem;
    }
    .p-list{
        width: 100%;
        position: relative;
    }
    .p-list li{
        position: initial;
    }
    .p-item{
        padding: 0;
        margin: 2rem 0;
        font-size: 2rem;
        z-index: 99;
    }
    .p-item:active{
        color: #3b3b3d;
    }
    .p-circle{
        right: 0;
        left: 0;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-bottom: 100%;
    }
    .circle1{
        top: -15%;
    }
    .circle2{
        top: 5%;
    }
    .circle3{
        top: 40%;
    }
    .p-item:hover + .p-circle{
        transform: scale(1);
        opacity: .5;
    }
}
@media screen and (min-width: 768px) and (max-width: 1279px){
    .p-item{
        z-index: 99;
    }
    .circle1{
        top: -30%;
        left: 0%;
    }
    .circle2{
        top: -35%;
        left: 50%;
    }
    .circle3{
        top: -35%;
        left: -15%;
    }
    .p-item:hover + .p-circle{
        transform: scale(1);
        opacity: .5;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1599px){
    .p-item{
        z-index: 99;
    }
    .p-circle{
        width: 60%;
        padding-bottom: 60%;
    }
    .circle1{
        top: -30%;
        left: 80%;
    }
    .circle2{
        top: -35%;
        left: -65%;
    }
    .circle3{
        top: -35%;
        left: 100%;
    }
    .p-item:hover + .p-circle{
        transform: scale(1);
        opacity: 1;
    }
}