/*=========================================
            PAGE GALERIE
=========================================*/

/* Bannière */
.gallery-banner{
    background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
    url("../images/banner-galerie.jpg") center center/cover no-repeat;
    padding:140px 0;
}

.gallery-banner h1{
    font-size:52px;
    font-weight:700;
    margin-bottom:15px;
}

.gallery-banner p{
    font-size:20px;
    max-width:700px;
    margin:auto;
}

/* Boutons des filtres */

.gallery-filter .btn{
    margin:8px;
    padding:12px 28px;
    border-radius:40px;
    font-weight:600;
    transition:.4s;
}

.gallery-filter .btn:hover,
.gallery-filter .active{
    background:#f5b301;
    color:#fff;
}

/* Carte photo */

.gallery-box{

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.4s;

}

.gallery-box img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.5s;

}

/* Effet Zoom */

.gallery-box:hover img{

    transform:scale(1.12);

}

/* Ombre */

.gallery-box:hover{

    transform:translateY(-8px);

}

/* Overlay */

.gallery-overlay{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(11,61,145,.75);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.gallery-box:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay i{

    color:#fff;

    font-size:45px;

    margin-bottom:20px;

}

.gallery-overlay h5{

    color:#fff;

    font-weight:bold;

}

/*=====================
    LIGHTBOX
=====================*/

#lightbox{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#lightbox img{

    max-width:90%;

    max-height:85%;

    border-radius:12px;

    box-shadow:0 0 40px rgba(255,255,255,.2);

}

#close-lightbox{

    position:absolute;

    top:30px;

    right:40px;

    color:#fff;

    font-size:45px;

    cursor:pointer;

}

/*=====================
        CTA
=====================*/

.gallery-cta{

    background:#0B3D91;

    padding:90px 0;

}

.gallery-cta h2{

    font-size:40px;

    margin-bottom:20px;

}

.gallery-cta p{

    font-size:18px;

    width:70%;

    margin:auto;

    margin-bottom:30px;

}

/* Responsive */

@media(max-width:768px){

.gallery-banner{

padding:90px 0;

}

.gallery-banner h1{

font-size:35px;

}

.gallery-banner p{

font-size:17px;

}

.gallery-box img{

height:240px;

}

.gallery-cta p{

width:100%;

}

}