<style>
/*--------------------------------------------------------------*/
/*-------Masonry Filterable Portfolio Layout by Divi Soup-------*/
/*--------------------------------------------------------------*/


/*Hide items until all loaded*/

.ds-masonry-portfolio .et_pb_portfolio_item {
 display: none;
}


/*Set the number of columns*/

.ds-masonry-portfolio .et_pb_portfolio_items {
 -webkit-columns: 20em; /*increase em values for less columns, decrease for more columns*/
 columns: 20em; /*increase em values for less columns, decrease for more columns*/
 -webkit-column-gap: 10px; /*space between columns*/
 column-gap: 10px; /*space between columns*/
 width: 100%;
 margin-bottom: 30px;
}


/*Size the items and add spacing*/

.ds-masonry-portfolio .et_pb_portfolio_item {
 width: 100%;
 margin: 0;
 border-bottom: 10px solid transparent; /*space between images (should be same value as space between columns)*/
 overflow: hidden;
 -webkit-column-break-inside: avoid;
 break-inside: avoid-column;
}


/*Remove title spacing*/

.ds-masonry-portfolio .et_pb_portfolio_item h2 {
 margin-top: 0;
 padding-bottom: 0;
}


/*Style the title and caption hover effect*/

.ds-masonry-portfolio .ds-portfolio-text {
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 padding: 20px; /*padding around title and category*/
 background: rgba(255, 255, 255, .8); /*overlay colour on hover*/
 opacity: 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-transition: all .3s ease;
 transition: all .3s ease;
}


/*Activate hover effect*/
.ds-masonry-portfolio
.et_pb_portfolio_item:hover .ds-portfolio-text {
 opacity: 1;
}


/*Space the filters*/

.ds-masonry-portfolio .et_pb_portfolio_filters ul {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 width: 100%;
}

.ds-masonry-portfolio .et_pb_portfolio_filters li {
 min-width: 20%; /*adjust percentage based on number of filters*/
 text-align: center;
}


/*--------------------------------------------------------------*/
/*-----End Masonry Filterable Portfolio Layout by Divi Soup-----*/
/*--------------------------------------------------------------*/
</style>