body{
    margin: 1rem !important;
}

img{
    border: none !important;
}

h4{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px !important;
}

a{
    font-family: 'IBM Plex Sans', sans-serif;
}
#modalProject1{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject2{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject3{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject4{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject5{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject6{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}
#modalProject7{
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 0.95;
    margin-bottom: 20rem;
}

.linePortfolio{
    height: 1px;
    width: 38rem;
}

.titlePortfolio{
    margin-right: 20rem;
}

.titleSection{
    font-family: 'IBM Plex Serif', serif;
    font-size: 50px !important;
}

.imgMobile img{
    filter: grayscale(100%);
}
.imgMobile img:hover{
    filter: none;
}
.portfolioImg{
    width: 81px;
    height: 100%;
    max-width: none;
}

.btnClose{
    display: flex !;
}

@media only screen and (min-device-width: 600px) and (max-device-width: 768px) {
    .titlePortfolio{
        margin-right: 7rem;
    }
    .lineUp{
        display: block;        
    }
    .lineDown{
        display: none !important;
    }
    .titleSection{
        font-size: 72px !important;
    }
}

@media only screen and (min-device-width: 400px) and (max-device-width: 644px) {
    .titlePortfolio{
        margin-right: 0 !important;
        margin-left: 1rem;
    }
    .lineUp{
        display: block;        
    }
    .lineDown{
        display: none !important;
    }
    .titleSection{
        margin-left: 1rem;
        font-size: 34px !important;
    }
    .linePortfolio{
        display: none;
    }
    body{
        margin: 0 !important;
    }
    .divImgs img{
        width: 100%;
        height: auto;
    }
    .imgMobile{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .popupMobile{
        margin-top: 15rem;
    }    
    .portfolioImg{
        width: 33px;
    }
    .imgHeight{
        height: 16rem !important;
    }
}


@media only screen and (min-device-width: 250px) and (max-device-width: 400px) {
    .titlePortfolio{
        margin-right: 0 !important;
        margin-left: 1rem;
    }
    .lineUp{
        display: block;        
    }
    .lineDown{
        display: none !important;
    }
    .titleSection{
        margin-left: 1rem;
        font-size: 34px !important;
    }
    .linePortfolio{
        display: none;
    }
    body{
        margin: 0 !important;
    }
    .divImgs img{
        width: 100%;
        height: auto;
    }
    .imgMobile{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .popupMobile{
        margin-top: 15rem;
    }    
    .portfolioImg{
        width: 33px;
    }
    .imgMobile{
        border-radius: none !important;
    } img{
        border-radius: none !important;
    }
    
}