/*-- ==================================-=================================== --*/
/*-- ==                    D O C U M E N T   R O O T                     == --*/
/*-- ==================================-=================================== --*/
   :root
      {
                                 --imgw: 192.5px;
                                 --imgh: 297.5px;
                                 --imgd: 308px;

                                 --durn: 30s;
                                 --dirn: reverse;
                                 --inft: infinite;
                                 --anim: turner;
                                 --strt: 0deg;
                                 --fnsh: 360deg;

                                 --ltpg: 0deg;

                                --durnR: 30s;
                                --strtR: 0deg;
                                --fnshR: 360deg;

                                --crslX: 602px; 
                                --crslY: 164px;

                                --backX: 10px; 
                                --backY: 60px;

                               --topNow: 150px; 
                              --leftNow: -160px;
   }
/*-- ==================================-=================================== --*/
/*-- ==               G L O B A L   D E F I N I T I O N S                == --*/
/*-- ==================================-=================================== --*/
   * {
                             box-sizing: border-box;
                                 margin: 0;
                                padding: 0;
                             list-style: none;
   }
/*-- ==================================-=================================== --*/
/*-- ==  Move the carousel box, but scale the carousel (C01)             == --*/
/*-- ==================================-=================================== --*/
   #crsl1_box {
                               position: relative;
                                 margin: 0 auto;
                                    top: 150px;
                                   left: -250px;
                                  width: 380px;
                                 height: 400px;
                             text-align: center; 
                             background: #000040;
                                 border: 2px solid #E0E0E0;
                          border-radius: 15px;
                              transform: scale(1);
   }
/*-- ==================================-=================================== --*/
/*-- ==  Only scale the carousel, move the carousel box instead          == --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
   #crsl1_ctnr {
                                display: block;

                               position: relative;
                                    top: 0px;
                                   left: -6px;

                                  width: 190px;

                                  color: #C0D0B0;
                              transform: scale(.5);
                             transition: 2s ease-in-out;
   }
/*-- ==================================-=================================== --*/
   #crsl1_cver {
                               position: absolute;
                                    top: 0px;
                                   left: 0px;

                                  width: 380px;
                                 height: 400px;

                       background-color: A0A0A0;
                                opacity: 1;
                              font-size: 28px;
                                  color: #C0D0B0;
                                 border: 2px solid #F00;
                          border-radius: 15px;
                             transition: 2s ease-in-out;
   }
/*-- ==================================-=================================== --*/

/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
   .crsl_ctnr {
                                display: block;
                               position: absolute;
                                  width: var(--imgw);
                                 height: var(--imgh);
                                 margin: 0 auto;
                                    top: 22.5%;
                                   left: 43.7%; 
                               position: absolute;
                            perspective: 1000px;
                                 border: 0px solid #000;
                              transform: scale(.1);
}
/*-- ==================================-=================================== --*/
   .crsl_crsl {
                               position: absolute;
                                  width: var(--imgw);
                                 height: var(--imgh);
                                 margin: auto;
                       transform-origin: 106px 0px 0px;
                        transform-style: preserve-3d; 
   }
/*-- ==================================-=================================== --*/
   .crsl_face { 
                               position: absolute;
                                  width: var(--imgw);
                                 height: var(--imgh);
                                    top: 20px;
                                  right: 10px;
                                   left: 10px;
                                 border: #4F4F4F 1px solid;
                        background-size: cover;
                        transform-style: preserve-3d; 
   }
/*-- ==================================-=================================== --*/
   .crsl_face--front, .crsl_face--back { 
                               position: absolute;
                                  width: var(--imgw);
                                 height: var(--imgh);
                                 cursor: pointer;
                    backface-visibility: hidden;
                        background-size: cover;
                  background-attachment: fixed;
                      background-repeat: no-repeat;
                              transform: rotateY(   0deg );
   }
/*-- ==================================-=================================== --*/
   .crsl_face--back { 
                              transform: rotateY( 180deg );
   }
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
   .crsl_face:nth-child(1) {
                              transform: rotateY(  0deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(2) { 
                              transform: rotateY( 40deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(3) {
                              transform: rotateY( 80deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(4) {
                              transform: rotateY(120deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(5) { 
                              transform: rotateY(160deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(6) { 
                              transform: rotateY(200deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(7) { 
                              transform: rotateY(240deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(8) {
                              transform: rotateY(280deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
   .crsl_face:nth-child(9) {
                              transform: rotateY(320deg) translateZ(var(--imgd)); }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ==================================-=================================== --*/
   button {
                                  width: 60px;
                          border-radius: 7px;
                                 bottom: 0px;
                                padding: 4px;
                          margin-bottom: 50px;
                             visibility: hidden;
   }
/*-- ==================================-=================================== --*/
   button:hover {
                                  color: green;
                            font-weight: 600;
                             background: #ccddee;
   }
/*-- ==================================-=================================== --*/
   .image {
                                  width: var(--imgw);
                                 height: var(--imgh);
   }
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ==================================-=================================== --*/



/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --              K E Y F R A M E S   A N I M A T I O N S             -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ==================================-=================================== --*/



/*-- ==================================-=================================== --*/
/*-- --                  R O T A T E   C A R O U S E L                   -- --*/
/*-- ==================================-=================================== --*/
   @keyframes turner {
      from {
                              transform: rotateY(var(--strt));
           }
        to {
                              transform: rotateY(var(--fnsh));
           }
   }
/*-- ----------------------------------=----------------------------------- --*/
   .animator {
                              animation: turner;
                     animation-duration: var(--durn);
              animation-iteration-count: var(--inft);
                   animation-direction : var(--dirn);
              animation-timing-function: linear;
                    animation-fill-mode: none;
   }
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ==================================-=================================== --*/


/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==              F A D E   S C R E E N   T O   W H I T E             == --*/
/*-- ==================================-=================================== --*/
   @keyframes fadeBwrd {
      0% {
         opacity: 1;
         }
    100% {
         opacity: 0;
         }
   }
/*-- ==================================-=================================== --*/
   .fadeBack {
                              animation: fadeBwrd ease-in-out 2s;
              animation-iteration-count: 1;
                    animation-fill-mode: forward;
   }
/*-- ==================================-=================================== --*/
/*-- ==         R E S T O R E   S C R E E N   F R O M   W H I T E        == --*/
/*-- ==================================-=================================== --*/
   @keyframes fadeFrwd {
      0% {
         opacity: 0;
         }
    100% {
         opacity: 1;
         }
   }
/*-- ==================================-=================================== --*/
   .fadeAway {
                              animation: fadeFrwd ease-in-out 2s;
              animation-iteration-count: 1;
                    animation-fill-mode: forward;
   }
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/