/*
=========================================================
Divi Dynamic Gallery
=========================================================
*/

/* ==========================================
   WRAPPER
========================================== */

.ddg-wrapper{
    width:100%;
}

/* ==========================================
   FILTER BUTTONS
========================================== */

.ddg-filters{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-bottom:40px;

}

.ddg-filter{

    background:transparent;

    border:1px solid #77bcc4;

    color:#77bcc4;

    padding:12px 24px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:all .3s ease;

}

.ddg-filter:hover{

    background:#77bcc4;

    color:#000;

}

.ddg-filter.active{

    background:#d02266;

    border-color:#d02266;

    color:#fff;

}

/* ==========================================
   GALLERY GRID
========================================== */

/*.ddg-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    grid-auto-flow:dense;

    gap:10px;

}*/
.ddg-gallery{

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
    justify-content: center;
    grid-auto-rows: 200px;
    gap: 10px;

}

/* ==========================================
   GALLERY ITEM
========================================== */

.ddg-item{

    position:relative;

    overflow:hidden;

    border-radius:14px;

}

.ddg-item a{

    display:block;

    width:100%;

    height:100%;

}

.ddg-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s ease;

}

.ddg-item:hover img{

    transform:scale(1.05);

}

/* ==========================================
   IMAGE SIZES
========================================== */

.ddg-small{

    grid-column:span 1;

    grid-row:span 1;

}

.ddg-wide{

    grid-column:span 2;

    grid-row:span 1;

}

.ddg-tall{

    grid-column:span 1;

    grid-row:span 2;

}

.ddg-large{

    grid-column:span 2;

    grid-row:span 2;

}

/* ==========================================
   LOAD MORE
========================================== */

.ddg-load-more-wrapper{

    text-align:center;

    margin-top:40px;

}

.ddg-load-more{

    background:#080e30;
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

    color:#77bcc4;

    border:solid 2px #77bcc4;

    padding:10px 15px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

.ddg-load-more:hover{

    
    background: #d02266;
    color: #fff;
    border-color: #d02266;

}
/* ==========================================
   LOADING
========================================== */

.ddg-gallery.loading{

    opacity:.25;

    pointer-events:none;

    transition:opacity .25s ease;

}

.ddg-spinner{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.ddg-spinner:after{

    content:"";

    width:42px;

    height:42px;

    border:4px solid #40D8FF;

    border-top-color:#FF007A;

    border-radius:50%;

    animation:ddg-spin .8s linear infinite;

}

@keyframes ddg-spin{

    to{

        transform:rotate(360deg);

    }

}
/* ==========================================
Gallery Heading 
========================================== */

.ddg-gallery-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin:35px 0 30px;
    color:#bfc5d3;
    font-size:16px;
    font-weight:500;
    letter-spacing:.3px;
}

.ddg-gallery-heading::before,
.ddg-gallery-heading::after{
    content:"";
    flex:1;
    max-width:320px;
    height:1px;
    background:rgba(255,255,255,.15);
}

.ddg-gallery-heading span{
    white-space:nowrap;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:980px){

    .ddg-gallery{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:767px){

    .ddg-gallery{

        grid-template-columns:1fr;

        grid-auto-rows:220px;

    }

    .ddg-wide,
    .ddg-large{

        grid-column:span 1;

    }

    .ddg-tall{

        grid-row:span 1;

    }

    .ddg-filters{

        justify-content:flex-start;

    }

    .ddg-filter{

        font-size:14px;

        padding:10px 18px;

    }

}