/*-----------------------------------------------------------------------
// <copyright file="gallery.dashboard.css" company="MarketingXpress BV" >
// Copyright (c) MarketingXpress BV. All rights reserved.
// </copyright >
//-----------------------------------------------------------------------
*/

/*
 *
 * 1. Gallery POPUP
 *
 */
/* The Popup (background) */
.mx-preview-popup { display: block; /* Block by default */ position: fixed; /* Stay in place */ z-index: 1001; /* Sit on top */ padding-top: 25px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ }

/* Popup Content (image) */
.mx-preview-popup .mx-preview-popup-content { margin: auto; display: block; width: 80%; max-width: 700px; margin-bottom: 50px;}

/* The Close Button */
.mx-preview-popup .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }

.mx-preview-popup .close:hover,
.mx-preview-popup .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.mx-preview-popup-content { width: 100%; }
.mx-preview-popup .close { right: 15px;}
}


/*
 *
 * 2. Gallery loader
 *
 */

/* Loader */
.mx-preview-loader { display: block; position: absolute; z-index: 2000; top: 35%; left: 48%; width: 14px; height: 14px; border: solid 3px transparent; border-radius: 10px; -webkit-animation: pace-spinner 600ms linear infinite; -moz-animation: pace-spinner 600ms linear infinite; -ms-animation: pace-spinner 600ms linear infinite; -o-animation: pace-spinner 600ms linear infinite; animation: pace-spinner 600ms linear infinite; }

/* Animation */
@-webkit-keyframes pace-spinner {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes pace-spinner {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes pace-spinner {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes pace-spinner {
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes pace-spinner {
    0% { transform: rotate(0deg); transform: rotate(0deg); }
    100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/*
 *
 * 3. Gallery carousel
 *
 */

/* Carousel */
.mx-carousel { display: flex; align-items: center; justify-content: center; position: relative; }

/* Card */
.mx-carousel .mx-carousel-card { height: auto; width: 75px; position: relative; z-index: 1; cursor: pointer; transition: .2s; opacity: 0; margin: 0px 5px; }
.mx-carousel .mx-carousel-card.large-image { width: 100%; }
.mx-carousel .mx-carousel-card img { border: 1px solid fff; }
.mx-carousel .mx-carousel-card.active { z-index: 3; opacity: 1; transform: scale(1) translateY(0) translateX(0); transition: .2s; }
.mx-carousel .mx-carousel-card.prev, .mx-carousel .mx-carousel-card.next { z-index: 2; transform: scale(0.8) translateY(-1rem) translateX(0); opacity: 0.8; transition: .2s; }
.mx-carousel .mx-carousel-card .image-preview-sub { height: auto; width: 100%; }

.carousel-container { position: relative; height: 100%; width: 100%;}
.carousel-container .main-container { height: calc(100% - 1px);}
.carousel-container .carousel-card-container { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); max-width: 100%}
.gallery-picker-main { height: 100%; margin-bottom: 20px; text-align: center; overflow: hidden; position: relative; }
.gallery-picker-main img { height: 100%; width: auto; left: 50%; top: 50%;}
.gallery-picker-carousel .mx-carousel-card { width: 150px; }
.gallery-picker-carousel .mx-carousel-card .image-preview-sub {max-height: 150px; max-width: 150px;}




.gallery-item {
    border: 1px solid #dadce0;
    background-color: #fff;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all .3s;
}
.gallery-item .image {
    width: 100%;
    box-sizing: border-box;
    background-color: #f5f5f5;
    transition: all .3s;
    height: 250px;
}

.gallery-item .image img {
    width: 100%;
    height: 100%;
    transition: all .3s;
    object-fit: contain;
    box-sizing:border-box;
    padding:20px;
}

.gallery-item .label {
    padding: 10px;
    border-top: 1px solid #dadce0;
}

.gallery-item:hover{
    filter: brightness(90%);
}