﻿:root                                               {
                                                    --ldf-gallery-color0:                          rgba(0,0,0,0.95);
                                                    --ldf-gallery-color1:                          rgba(255,255,255,0.95);

                                                    --ldf-gallery-padding:               1rem;
                                                    --ldf-gallery-radius:                0.4rem;
                                                    --ldf-gallery-inner-width:           auto;
                                                    --ldf-gallery-head-padding:          0.2rem;
                                                    --ldf-gallery-images-fit:            contain;
                                                    --ldf-gallery-empty-background:      rgba(0,0,0,0.4);
                                                    }

/* All ----------------------------------------------------------------------------------------------------------------------------------------------- */
.ldf-gallery-types                                   {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem;}
.ldf-gallery-types a                                 {display: block; font-size: 1.15em; color: black; text-decoration: underline; font-weight: bold;}
.ldf-gallery-types a:hover                           {text-decoration: none; opacity: 0.8;}

.ldf-gallery.ldf-fixed                                   {width: 100vw; height: 100vh; position: fixed; inset: 0; }

.ldf-gallery.ldf-theme-dark                              {background: #252525;}
.ldf-gallery.ldf-theme-dark .ldf-title                       {color: var(--ldf-gallery-color1);}
.ldf-gallery.ldf-theme-dark .ldf-close::before,
.ldf-gallery.ldf-theme-dark .ldf-close:after                 {background: var(--ldf-gallery-color1);}
.ldf-gallery.ldf-theme-dark .ldf-gallery-slider,
.ldf-gallery.ldf-theme-dark .ldf-img span,       
.ldf-gallery.ldf-theme-dark .ldf-gallery-button           {background: black;}
.ldf-gallery.ldf-theme-dark .ldf-gallery-button svg       {fill: white;}

.ldf-gallery.ldf-theme-light                             {background: white;}
.ldf-gallery.ldf-theme-light .ldf-title                      {color: var(--ldf-gallery-color0);}
.ldf-gallery.ldf-theme-light .ldf-close::before,
.ldf-gallery.ldf-theme-light .ldf-close:after                {background: var(--ldf-gallery-color0);}
.ldf-gallery.ldf-theme-light .ldf-gallery-slider,
.ldf-gallery.ldf-theme-light .ldf-img span,       
.ldf-gallery.ldf-theme-light .ldf-gallery-button          {background: var(--ldf-gallery-color0);}
.ldf-gallery.ldf-theme-light .ldf-gallery-button svg      {fill: white;}
.ldf-gallery.ldf-theme-light .ldf-gallery-counter > div   {background: white;}

.ldf-gallery                                         {display: block; width: 100%; height: var(--ldf-gallery-height); font-size: min(18px, calc(11px + 1vw)); line-height: 1.3; padding: var(--ldf-gallery-padding); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.ldf-gallery-inner                                   {display: flex; width: 100%; max-width: var(--ldf-gallery-inner-width); margin-inline: auto;}
.ldf-gallery-head                                    {display: flex; width: 100%; padding: var(--ldf-gallery-head-padding) 2rem; position: relative; box-sizing: border-box;}
.ldf-gallery-head .ldf-title                             {display: block; width: 100%; text-align: center; font-size: min(1.4rem, calc(0.55rem + 3vw)); font-weight: bold;}
.ldf-gallery-head .ldf-close                             {display: block; width: 1.4rem; height: 1.4rem; border-radius: 100%; position: absolute; right: 1rem; top: calc(50% - 0.7rem); opacity: 0.5; cursor: pointer; transition: .15s ease-in-out;}
.ldf-gallery-head .ldf-close::before,
.ldf-gallery-head .ldf-close:after                       {display: block; width: 100%; height: 2px; border-radius: 1px; position: absolute; left: 0; top: calc(50% - 1px); content: "";}
.ldf-gallery-head .ldf-close::before                     {transform: rotate(45deg);}
.ldf-gallery-head .ldf-close:after                       {transform: rotate(-45deg);}
.ldf-gallery-head .ldf-close:hover                       {opacity: 1;}
   @media screen and (max-width: 540px)             {
   .ldf-gallery-head                                 {padding-left: 0;}
   .ldf-gallery-head .ldf-title                          {text-align: left;}
   }




/* single-image --------------------------------------------------------------------------------------------------------------------------------------- */
.ldf-gallery-single-image                            {
                                                    --ldf-gallery-height:                auto;
                                                    --ldf-gallery-space:                 1rem;
                                                    --ldf-gallery-slider-radius:         var(--ldf-gallery-radius);
                                                    --ldf-gallery-thumbs-height:         5rem;
                                                    --ldf-gallery-thumbs-ar:             1.55;
                                                    --ldf-gallery-thumbs-count-desktop:  6;
                                                    --ldf-gallery-thumbs-spacing:        0.4rem;
                                                    --ldf-gallery-thumbs-radius:         var(--ldf-gallery-radius);
                                                    --ldf-gallery-thumb-radius:          var(--ldf-gallery-radius);
                                                    --ldf-gallery-thumbs-width:          calc(var(--ldf-gallery-thumbs-height) * var(--ldf-gallery-thumbs-ar) * var(--ldf-gallery-thumbs-count));
                                                    --ldf-gallery-button-size:           3rem;
                                                    z-index:9999;
                                                    }
  @media screen and (min-width: 1081px)             {
  .ldf-gallery-single-image                          {
                                                    --ldf-gallery-thumbs-count:          var(--ldf-gallery-thumbs-count-desktop);
                                                    }
  }
  @media screen and (max-width: 1080px)             {
  .ldf-gallery-single-image                          {
                                                    --ldf-gallery-thumbs-count:          4;
                                                    }
  }                                               
  @media screen and (max-width: 540px)              {
  .ldf-gallery-single-image                          {
                                                    --ldf-gallery-thumbs-height:         15vw;
                                                    --ldf-gallery-button-size:           2rem;
                                                    }
  } 
  @media screen and (max-height: 540px)             {
  .ldf-gallery-single-image                          {
                                                    --ldf-gallery-padding:               0.6rem;
                                                    --ldf-gallery-space:                 0.6rem;
                                                    --ldf-gallery-thumbs-height:         4rem;
                                                    }
  }  

.ldf-gallery-single-image .ldf-gallery-inner          {height: 100%; flex-direction: column; justify-content: center; align-content: center; align-items: center; gap: var(--ldf-gallery-space) 0;}
.ldf-gallery-single-image .ldf-gallery-slider         {flex-grow: 2;}

.ldf-gallery-slider                                  {display: block; width: 100%; border-radius: var(--ldf-gallery-slider-radius); overflow: hidden; position: relative;}
.ldf-gallery-slider-inner                            {display: block; width: 100%; height: 100%; overflow: hidden;}
.ldf-gallery-slider-images                           {display: flex; height: 100%;}

.ldf-gallery .ldf-img                                    {display: flex; width: calc(100vw - 2 * var(--ldf-gallery-padding)); cursor:default; height: auto; position: relative; box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;}
.ldf-gallery .ldf-gallery-slider-images .ldf-img.ldf-active.ldf-zoom                         { cursor: zoom-in; }
.ldf-gallery .ldf-img span                               {display: block; width: 100%; height: 100%; overflow: hidden; transition: .15s ease-in-out; /*background-image:url('loader.svg') !important;*/ background-position:center center !important; background-repeat:no-repeat !important; }
.ldf-gallery .ldf-img span img                           {display: block; width: 100%; height: 100%; object-fit: var(--ldf-gallery-images-fit);}
.ldf-gallery .ldf-img figcaption                         {display: block; width: 100%; text-align: center; font-size: 0.8em; color: white; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); padding: 3em 2em 1.6em; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 2;}
.ldf-gallery-slider .ldf-img span                        {border-radius: var(--ldf-gallery-slider-radius);}



/*.ldf-gallery-thumbs                                  {display: block; width: 100%; max-width: var(--ldf-gallery-thumbs-width); height: var(--ldf-gallery-thumbs-height); border-radius: var(--ldf-gallery-thumbs-radius);}
.ldf-gallery-thumbs-inner                            {display: block; width: 100%; height: 100%; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
.ldf-gallery-thumbs-inner::-webkit-scrollbar         { display: none; }
.ldf-gallery-thumbs-images                           {display: flex; height: 100%;}
.ldf-gallery-thumbs-images > *                       {width: calc(100% / var(--ldf-gallery-thumbs-count)) !important; padding-inline: calc(var(--ldf-gallery-thumbs-spacing) / 2);}
.ldf-gallery-thumbs-images > * span                  {opacity: 0.4; border-radius: var(--ldf-gallery-thumb-radius);}
.ldf-gallery-thumbs-images > *:hover span            {opacity: 1;} 
.ldf-gallery-thumbs-images > *.ldf-active span           {opacity: 1 !important;} */




.ldf-gallery-thumbs                                  {display: flex; width: var(--ldf-gallery-thumbs-width); height: var(--ldf-gallery-thumbs-height); justify-content: center; border-radius: var(--ldf-gallery-thumbs-radius);}
.ldf-gallery-thumbs-inner                            {display: flex; max-width: 100%; height: 100%; overflow: hidden;}
.ldf-gallery-thumbs-images                           {display: flex; height: 100%;  -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.ldf-gallery-thumbs-images > *                       {width: calc(var(--ldf-gallery-thumbs-width) / var(--ldf-gallery-thumbs-count)) !important; padding-inline: calc(var(--ldf-gallery-thumbs-spacing) / 2);}
.ldf-gallery-thumbs-images > * span                  {opacity: 0.4; border-radius: var(--ldf-gallery-thumb-radius);}
.ldf-gallery-thumbs-images > *:hover span            {opacity: 1;} 
.ldf-gallery-thumbs-images > *.ldf-active span       {opacity: 1 !important;}






.ldf-gallery-button                                  {display: flex; width: var(--ldf-gallery-button-size); height: var(--ldf-gallery-button-size); justify-content: center; align-items: center; opacity: 0.8; font-size: 1rem; background: transparent; box-sizing: border-box; border-radius: 100%; position: absolute; top: calc(50% - 0.5 * var(--ldf-gallery-button-size)); z-index: 100; margin: 0; isolation: isolate; cursor: pointer; transition: .15s ease-in-out;}                                
.ldf-gallery-button.ldf-prev                             {left: 1rem; transform: rotate(180deg);}
.ldf-gallery-button.ldf-next                             {right: 1rem;}
.ldf-gallery-button svg                              {display: block; width: 40%;}
.ldf-gallery-button:hover                            {opacity: 1;}
.ldf-gallery-button.ldf-disabled                         {opacity: 0.15 !important;}

.ldf-gallery:has(.ldf-gallery-counter) .ldf-img figcaption
                                                    {padding-bottom: 2em;}

.ldf-gallery-counter                                 {display: flex; width: 100%; height: 1.4rem; justify-content: center; align-items: center; position: absolute; left: 0; bottom: calc(var(--ldf-gallery-thumbs-height) + 2 * var(--ldf-gallery-padding) - 0.8rem); z-index: 10;}
.ldf-gallery-counter > div                           {display: flex; width: auto; height: 100%; justify-content: center; align-items: center; font-size: 0.7em; font-weight: bold; padding: 0 0.6em; border-radius: 0.7rem; box-sizing: border-box; position: relative; inset: auto; -webkit-user-select: none; -ms-user-select: none; user-select: none; }


/* Grid ----------------------------------------------------------------------------------------------------------------------------------------------- */
.ldf-gallery-grid                                    {
                                                    --ldf-gallery-grid-count:            4;
                                                    --ldf-gallery-grid-spaces:           0.5rem;
                                                    --ldf-gallery-grid-ar:               1.5;

                                                    overflow: auto;
                                                    z-index:9998;
                                                    }
  @media screen and (max-width: 1080px)             {
  .ldf-gallery-grid                                  {
                                                    --ldf-gallery-grid-count:            3;
                                                    }
  } 
  @media screen and (max-width: 540px)              {
  .ldf-gallery-grid                                  {
                                                    --ldf-gallery-grid-count:            2;
                                                    }
  }         

.ldf-gallery-grid .ldf-gallery-inner                  {flex-wrap: wrap;}
.ldf-gallery-grid .ldf-gallery-head                   {margin-bottom: var(--ldf-gallery-padding);}

.ldf-gallery-grid-items                              {display: flex; width: 100%; flex-wrap: wrap; gap: var(--ldf-gallery-grid-spaces);}
.ldf-gallery-grid-items div                            {display: block; width: calc(100% / var(--ldf-gallery-grid-count) - var(--ldf-gallery-grid-spaces) * ((var(--ldf-gallery-grid-count) - 1) / var(--ldf-gallery-grid-count))); aspect-ratio: var(--ldf-gallery-grid-ar); background: var(--ldf-gallery-empty-background); border-radius: var(--ldf-gallery-radius); overflow: hidden; cursor: zoom-in; }
.ldf-gallery-grid-items div span                       {display: block; width: 100%; height: 100%; transition: .15s ease-in-out; background-image:url('loader.svg'); background-position:center center; background-repeat:no-repeat; }
.ldf-gallery-grid-items div span img                   {display: block; width: 100%; height: 100%; object-fit: var(--ldf-gallery-images-fit);}
.ldf-gallery-grid-items div:hover span                 {opacity: 0.75;}

/* Large screens ----------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 2400px)             {
  /*.ldf-gallery.ldf-fixed                                 {width: 1600px; max-height: calc(1100px - 4rem); left: calc(50% - 800px); top: 2rem; padding: 0;}
  .ldf-gallery.ldf-fixed .ldf-img                            {width: 1600px;}*/

  .ld-gallery.fixed .ld-gallery-grid-items          {width: 1600px; margin-inline: auto;}
  .ld-gallery.fixed .ld-gallery-slider-images       {width: 1600px; margin-inline: auto; overflow: hidden;} 
  .ld-gallery.fixed .img                            {width: 1600px;}
  .ld-gallery.fixed .img span                       {background: none;}
  .ld-gallery.fixed .ld-gallery-button.prev         {left: calc(50% - 770px);}
  .ld-gallery.fixed .ld-gallery-button.next         {right: calc(50% - 770px);}
}