/*****************************************************************************
 * Fenêtre modale pour la lightbox                                           *
 *****************************************************************************/

.win-lightbox                                { z-index: 11; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); }
.win-lightbox-content                        { width: 100%; height: 100vh; }
.win-lightbox-content img                    { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100vh; }

.win-lightbox-left,
.win-lightbox-right                          { z-index: 12; position: fixed; right: 20px; top: 0; line-height: 100vh; color: #AAA; font-size: 4.0rem; cursor: pointer; }
.win-lightbox-close                          { z-index: 13; position: fixed; right: 20px; top: 10px; color: #AAA; font-size: 4.0rem; cursor: pointer; }
.win-lightbox-left                           { right: inherit; left: 20px; transform: rotate(180deg); }

.win-lightbox-left:hover,
.win-lightbox-right:hover,
.win-lightbox-close:hover                    { color: #FFF; }

div.win-lightbox-loader                      { z-index: 15; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: transparent; line-height: 100vh;
                                               font-size: 40px; color: #FFF; text-align: center;
                                             }
span.win-lightbox-loader                     { position: relative; width: 62px; height: 62px; vertical-align: middle; display: inline-block; }
span.win-lightbox-loader-double              { border-radius: 50px; border: 6px solid transparent; border-top-color: #FFF; border-bottom-color: #FFF; animation: spin-reverse 3s linear 0s infinite; }
span.win-lightbox-loader-double:after        { content: ''; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; border-radius: 50px; border: 4px solid transparent;
                                               border-left-color: rgba(255, 255, 255, 0.3); border-right-color: rgba(255, 255, 255, 0.3); animation: spin 1s linear 0s infinite;
                                             }

/*****************************************************************************
 * Animation                                                                 *
 *****************************************************************************/

@keyframes spin                              {
                                               0%   { transform: rotate(0deg); }
                                               100% { transform: rotate(360deg); }
                                             }

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