/*set up portfolio section set up buttons */
.portfolio .button-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding:1rem 0;
}
/*set up portfolio section buttons*/
.portfolio .button-container .btn{
    margin:1rem;
    cursor: pointer;
}


/*set up blog section container */
.portfolio .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


/*set up blog section box */
.portfolio .box-container .filterBox{
    width:33rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1.5rem;
    background: var(--primary-bg-color);
    overflow: hidden;
}
/*set up blog section fit image on box */
.portfolio .box-container .filterBox img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
}
/*set up blog section text box */
.portfolio .box-container .filterBox .content{
    padding:1.5rem;
}
/*set up blog section info text for icon box */
.portfolio .box-container .filterBox .content .info{
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    text-align: center;
    position: relative;
    font-size: 1.5rem;
    color:var(--primary-text-color);
    background:var(--secondary-bg-color);
    padding:1rem;
    margin-top: -4rem;
    margin-bottom: 1rem;
}
/*set up blog section icon box */
.portfolio .box-container .filterBox .content .info i{
    color:var(--main-color);
    padding:0 1rem;
}
/*set up blog section text title box */
.portfolio .box-container .filterBox .content .title{
    color:var(--primary-text-color);
    display: block;
    font-size: 2.5rem;
    padding:.5rem 0;
}
/*set up blog section text title hover box *//*
.portfolio .box-container .filterBox .content .title:hover{
    text-decoration: underline;
    color:var(--main-color);
}*/
/*set up blog section text box */
.portfolio .box-container .filterBox .content p{
    color:var(--secondary-text-color);
    padding:.5rem 0;
    font-size: 1.5rem;
}