/*======================================
Theme Name: Free Divi Child Theme By Pee-Aye Creative
Theme URI: https://www.peeayecreative.com/
Description: This is a free Divi child theme from Pee-Aye Creative!
Author: Nelson Lee Miller (aka The Divi Teacher)
Author URI: https://www.peeayecreative.com/
Author Email: nelson@peeayecreative.com
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

 /* ===== NOTES ==================================================================
 * 
 * New to Divi? Take our full Divi course: https://www.peeayecreative.com/product/beyond-the-builder-the-ultimate-divi-website-course/
 * 
 * Learn cool tricks and features with our Divi tutorials: https://www.peeayecreative.com/blog/
 * 
 * Discover our premium Divi products: https://www.peeayecreative.com/shop/
 * 
 * =============================================================================== */

/*add your custom CSS below this line*/


/* Divi Engine Blog Post - How to Show the Title on Hover with the Divi Portfolio Module */

/* We set the position of the title here */
.de-portfolio-title h2.et_pb_module_header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin-top: 0px!important;
    z-index: 3;
    opacity: 0;     /* We want to make sure it is not shown unless hovered */
}
 
/* Make the title visible when hovered */
.de-portfolio-title .et_pb_portfolio_item:hover h2.et_pb_module_header {
    opacity: 1;
}
 
/* Remove the overlay icon if one is set */
.de-portfolio-title span.et_overlay:before {
    content: '';
}


 
/* Make sure the title is shown even if you hover it directly */
.de-portfolio-title .et_pb_portfolio_item:hover span.et_overlay {
    opacity: 1;
    z-index: 3;
}

/*portfolio image aspect ratio landscape 3:2*/

.de-portfolio-title .et_portfolio_image {
  padding-top: 66.66%;
  display: block;
}

.de-portfolio-title .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}


/*Set number of columns and margin for the images*/
@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .de-portfolio-title.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item,
    .et_pb_gutters3 .et_pb_column_4_4 .de-portfolio-title.et_pb_filterable_portfolio .et_pb_portfolio_item.active,
    .de-portfolio-title.et_pb_portfolio_grid .et_pb_portfolio_item,
    .et_pb_column_4_4 .de-portfolio-title.et_pb_grid_item:nth-child(1n) /*Change this number to value 4 in the calculator (don't remove the 'n')*/ {
        width: 50% !important; /*Change this number to value 3 in the calculator (don't remove the '%') */
        margin: 0 0.0% 0.0% 0; /*Change these numbers to values 1 & 2 in the calculator (don't remove the '%' or '0')*/
    }
}

/*Ensures portfolio images display on mobile and tablets, you don't need to touch this*/
@media only screen and ( max-width: 980px) {
    .de-portfolio-title.et_portfolio_image img {
        width: 100%;
    }
}