/* css Document */
/**
 * This file is part of AKB - ARLENE MODULE
 * @package     AKB Arlene Photogallery
 * @version		2.7.3
 * @author		AKB srlcr - Andrea Bini
 * @copyright 	Copyright (C) 2024 Andrea Kozul Bini s.r.l.c.r.
 * @license     GNU/GPLv2 http://www.gnu.org/licenses/gpl-2.0.html 
 * @link        http://www.akbproject.com
 * Email:       info@akbproject.com
*/


.AKBarlene-grid {
    display: flex;
    flex-wrap: wrap;
}

.AKBarlene-cell {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-image {
    width: 100%;
    height: auto;
}

.AKBarlene-caption {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    width: 101%;
    height: 101%;
    transition: transform 0.3s ease-in-out;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

.AKBarlene-caption > p {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    font-size: 0.8rem;
    opacity:1 !important;
}

.AKBarlene-image-container {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-image-container:hover .AKBarlene-hover-layer {
    display: block;
}

.AKBarlene-image-container:hover .AKBarlene-caption {
    transform: translateX(-50%) translateY(0%);
}

.AKBarlene-image-container:hover .AKBarlene-caption.AKBarlene-out {
    transform: translateX(-50%) translateY(-100%);
}


/* 
CSS per il layout 01 
*/

.AKBarlene-grid-AKBlayoutstyle01 {
    display: flex;
    flex-wrap: wrap;
    
}

.AKBarlene-image-container-AKBlayoutstyle01 {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-cell-AKBlayoutstyle01 {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-hover-layer-AKBlayoutstyle01 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
    opacity: 0.8;
    height: auto;
    overflow: hidden;
}

.AKBarlene-caption-AKBlayoutstyle01 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;
    transition: transform 0.3s ease-in-out;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transform: translateX(0%) translateY(100%); /* Entra dal basso */
    height: auto; /* Altezza automatica in base al contenuto */
}

/* Regola per far apparire il layer in hover */
.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-hover-layer-AKBlayoutstyle01 {
    transform: translateY(0);
    height: auto;
    overflow: visible;
}

/* Regola per far apparire il caption in hover */
.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-caption-AKBlayoutstyle01 {
    transform: translateX(0%) translateY(0); /* Entra dal basso */
}

.AKBarlene-image-container-AKBlayoutstyle01 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* Effetto di transizione per l'immagine */
}

.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-image {
    transform: scale(1.1); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}

/* 
CSS per il layout 02 
*/

.AKBarlene-grid-AKBlayoutstyle02 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.AKBarlene-image-container-AKBlayoutstyle02 {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-cell-AKBlayoutstyle02 {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-hover-layer-AKBlayoutstyle02 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
    height: auto;
    overflow: hidden;
}

.AKBarlene-caption-AKBlayoutstyle02 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;
    transition: opacity 0.5s ease-in-out; /* Aggiunge una transizione fluida */
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 100%;
}

.AKBarlene-caption-AKBlayoutstyle02:hover {
    opacity: 0; 
}

.AKBarlene-image-container-AKBlayoutstyle02 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* Effetto di transizione per l'immagine */
}

.AKBarlene-image-container-AKBlayoutstyle02:hover .AKBarlene-image {
    transform: scale(1.1); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}


/* 
CSS per il layout 03 
*/

.AKBarlene-grid-AKBlayoutstyle03 {
    display: flex;
    flex-wrap: wrap;
}

.AKBarlene-image-container-AKBlayoutstyle03 {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-flow: column;
    align-items: stretch;
}

.AKBarlene-cell-AKBlayoutstyle03 {
    padding: 0px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

a.AKBarlene-popup-link {
    text-decoration: none;
}

a.AKBarlene-popup-link-generic {
    text-decoration: none;
}

a.AKBarlene-popup-link-selectimage {
    text-decoration: none;
}

.AKBarlene-caption-default-AKBlayoutstyle03 {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}


.AKBarlene-caption-AKBlayoutstyle03 {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    font-size: 18px;
    font-weight: 500;
  }
  
  .AKBarlene-caption-AKBlayoutstyle03 > div {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  


.AKBarlene-image-container-AKBlayoutstyle03 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.AKBarlene-image-container-AKBlayoutstyle03:hover .AKBarlene-image {
    transform: scale(1.05); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}

/********* text AKBtemplate_selectimage *******/

.AKBarlene-text_container_title-AKBlayoutstyle01, .AKBarlene-text_container_title-AKBlayoutstyle02 {
    text-align: center;
}

.AKBarlene-text_container_desc, .AKBarlene-text_container_desc-AKBlayoutstyle01, .AKBarlene-text_container_desc-AKBlayoutstyle02, .AKBarlene-text_container_desc-AKBlayoutstyle03 {
    text-align: center;
    font-size: 0.9rem;
}

.AKBarlene-text_container_title-AKBlayoutstyle03, .AKBarlene-text_container_desc-AKBlayoutstyle03 {
    text-align: left;
    line-height: 1.3;
}


/* css gallery **/

.mfp-bg {
    opacity: 1 !important;
  }


.mfp-close {
    font-size: 44px !important;
  }

/*
.mfp-content {
    width: 100%;
}
*/
.mfp-title {
    text-align: center !important;
    padding-right: 1px !important;
    display: block;
}

.mfp-figure::after {
    box-shadow:none !important;
    background: none !important;
}

.mfp-counter {
    position: initial !important;
    text-align: center !important;
  }


/********* column ***********/

/***** 1fr *******/
.AKBarlene-grid-1fr-AKBdefault, .AKBarlene-grid-1fr-AKBlayoutstyle01, .AKBarlene-grid-1fr-AKBlayoutstyle02, .AKBarlene-grid-1fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 colonne con larghezza uguale */
}

.AKBarlene-grid-1fr-AKBdefault, .AKBarlene-grid-1fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 2fr *******/
.AKBarlene-grid-2fr-AKBdefault, .AKBarlene-grid-2fr-AKBlayoutstyle01, .AKBarlene-grid-2fr-AKBlayoutstyle02, .AKBarlene-grid-2fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne con larghezza uguale */
}

.AKBarlene-grid-2fr-AKBdefault, .AKBarlene-grid-2fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 3fr *******/
.AKBarlene-grid-3fr-AKBdefault, .AKBarlene-grid-3fr-AKBlayoutstyle01, .AKBarlene-grid-3fr-AKBlayoutstyle02, .AKBarlene-grid-3fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne con larghezza uguale */
}

.AKBarlene-grid-3fr-AKBdefault, .AKBarlene-grid-3fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 4fr *******/
.AKBarlene-grid-4fr-AKBdefault, .AKBarlene-grid-4fr-AKBlayoutstyle01, .AKBarlene-grid-4fr-AKBlayoutstyle02, .AKBarlene-grid-4fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne con larghezza uguale */
}

.AKBarlene-grid-4fr-AKBdefault, .AKBarlene-grid-4fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 6fr *******/
.AKBarlene-grid-6fr-AKBdefault, .AKBarlene-grid-6fr-AKBlayoutstyle01, .AKBarlene-grid-6fr-AKBlayoutstyle02, .AKBarlene-grid-6fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonne con larghezza uguale */
}

.AKBarlene-grid-6fr-AKBdefault, .AKBarlene-grid-6fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

@media screen and (max-width: 969px) {
    .AKBarlene-grid-1fr-AKBdefault, 
    .AKBarlene-grid-1fr-AKBlayoutstyle01, 
    .AKBarlene-grid-1fr-AKBlayoutstyle02, 
    .AKBarlene-grid-1fr-AKBlayoutstyle03,
    .AKBarlene-grid-2fr-AKBdefault,
    .AKBarlene-grid-2fr-AKBlayoutstyle01, 
    .AKBarlene-grid-2fr-AKBlayoutstyle02, 
    .AKBarlene-grid-2fr-AKBlayoutstyle03,
    .AKBarlene-grid-3fr-AKBdefault,
    .AKBarlene-grid-3fr-AKBlayoutstyle01, 
    .AKBarlene-grid-3fr-AKBlayoutstyle02, 
    .AKBarlene-grid-3fr-AKBlayoutstyle03,
    .AKBarlene-grid-4fr-AKBdefault,
    .AKBarlene-grid-4fr-AKBlayoutstyle01, 
    .AKBarlene-grid-4fr-AKBlayoutstyle02, 
    .AKBarlene-grid-4fr-AKBlayoutstyle03,
    .AKBarlene-grid-6fr-AKBdefault,
    .AKBarlene-grid-6fr-AKBlayoutstyle01, 
    .AKBarlene-grid-6fr-AKBlayoutstyle02, 
    .AKBarlene-grid-6fr-AKBlayoutstyle03
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 1 colonna con larghezza uguale */
    }
}