/*
|--------------------------------------------------------------------------
| Simple Photo Gallery Pro
| Version 2.0 CSS
|--------------------------------------------------------------------------
*/


.spg-gallery-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto;
    text-align: center;
}



/*
|--------------------------------------------------------------------------
| Main Gallery Container
|--------------------------------------------------------------------------
*/


.spg-gallery-container {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

}



/*
|--------------------------------------------------------------------------
| Image Area
|--------------------------------------------------------------------------
*/


.spg-main-image {

    width: 100%;

    max-width: 900px;

}



.spg-image-link {

    display: block;

}



.spg-main-image img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

    border-radius: 12px;

    background: #f7f7f7;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.18);

}



/*
|--------------------------------------------------------------------------
| Navigation Buttons
|--------------------------------------------------------------------------
*/


.spg-btn {

    width: 75px;

    height: 75px;

    min-width: 75px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;


    background:
        rgba(0,115,170,0.90);


    color: #ffffff;

    text-decoration: none;

    font-size: 42px;

    line-height: 1;


    box-shadow:
        0 8px 25px rgba(0,0,0,0.30);


    transition:
        transform .25s ease,
        background .25s ease;


}



.spg-btn:hover {

    background:
        #005a87;


    transform:
        scale(1.12);

}



.spg-btn:active {

    transform:
        scale(0.95);

}




/*
|--------------------------------------------------------------------------
| Counter
|--------------------------------------------------------------------------
*/


.spg-counter {


    display: inline-block;


    margin-top: 22px;


    padding:
        8px 22px;


    background:
        #f1f1f1;


    border-radius:
        30px;


    font-size:
        18px;


    font-weight:
        700;


    color:
        #333;


    box-shadow:
        0 3px 10px rgba(0,0,0,0.08);


}



/*
|--------------------------------------------------------------------------
| Caption
|--------------------------------------------------------------------------
*/


.spg-caption {


    margin-top: 15px;


    font-size:
        16px;


    color:
        #555;


    font-style:
        italic;


}



/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
@media(max-width:768px) {


    .spg-gallery-wrapper {

        width:100%;
        padding:0 5px;
        margin:20px auto;

    }



    .spg-gallery-container {

        position:relative;

        display:block;

        width:100%;

    }



    /*
    Full width mobile image
    */

    .spg-main-image {

        width:100%;

        max-width:none;

    }



    .spg-main-image img {

        width:100%;

        height:auto;

        border-radius:8px;

    }




    /*
    Big buttons over image
    */


    .spg-btn {

        position:absolute;

        top:50%;

        transform:translateY(-50%);


        width:70px;

        height:70px;

        min-width:70px;


        font-size:42px;


        z-index:10;


        background:
        rgba(0,115,170,0.90);


        box-shadow:
        0 5px 20px rgba(0,0,0,.35);


    }



    .spg-btn:hover {

        transform:
        translateY(-50%) scale(1.1);

    }



    .spg-prev {

        left:10px;

    }



    .spg-next {

        right:10px;

    }



    /*
    Counter below image
    */


    .spg-counter {

        margin-top:15px;

        font-size:20px;

        padding:8px 22px;

    }



}




@media(max-width:420px) {


    .spg-btn {

        width:65px;

        height:65px;

        min-width:65px;

        font-size:38px;

    }



    .spg-prev {

        left:8px;

    }



    .spg-next {

        right:8px;

    }


}