.tunnel-1 {
            width: 300vw;
            z-index:5;
            margin-left:9vw;
            padding-left:300px;
        } 
       

        @keyframes Slide-in {
             from { transform:translateY(-101%)}
             to {transform:translateY(0)}}
        
       @keyframes Slide-out {
             from {transform:translateY(0)}
             to {transform:translateY(-101%)}}
       
       @keyframes Rotaty-inx {
           from {transform:rotate(-95deg)}
             to {transform: rotate(0deg)}}
         
       @keyframes Rotaty-outx {
             from {transform:rotate(0deg)}
             to {transform: rotate(-95deg)} }
       
         @keyframes Rotaty-inv {
             from {transform:rotate(90deg)}
             to {transform: rotate(0deg)}}
       
       @keyframes Rotaty-int {
             from {transform:rotate(0deg)}
             to {transform: rotate(90deg)}}
      
       
        @keyframes FadeOut {
             from   {opacity: 1;}
             to     {opacity: 0;}}
       
         @keyframes FadeBgrTwo {
             
             1%     {opacity: 0;}
             2%     {opacity: 1;}
             99%     {opacity: 1;} 
            100%     {opacity: 0;} 
       }
        @keyframes FadeBgr {
             0  {opacity: 1;}
             100%     {opacity: 0;} }
       
 
       
      
 

       .xbox {   
            aspect-ratio: 1/1;
            width: auto;
            position: relative;
            overflow:hidden;
            margin: 0;
            padding: 0;
           max-height:26vh;
        }
      
     
        .x1, .x2, .x3, .x4 {
            aspect-ratio: 1/1;
            width: 50%;
            position: absolute;
            overflow:hidden;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
             
        }
        @supports not (aspect-ratio: 1/1) {
            .x1::before, .x2::before, .x3::before, .x4::before {
                  float: left;
                  padding-top: 100%;
                  content: "";}
                
            .x1::after, .x2::after, .x3::after, .x4::after {
                  display: block;
                  content: "";
                  clear: both;}
                
            .xbox::before {
                  float: left;
                  padding-top: 100%;
                  content: "";}

            .xbox::after {
                  display: block;
                  content: "";
                  clear: both;}}

         .x1 {left:0;   top:0;}
         .x2 {right:0;  top:0;}
         .x3 {left:0;   bottom:0;}
         .x4 {right:0;  bottom:0;}
       
         .xt, .xb {
             height: 101%;
             width: 101%;
             position: absolute;
             overflow:hidden;
             background-repeat: no-repeat;
             margin: 0;
             padding: 0;
        }     
        
        .xt {z-index:6;}
       
        .xb { z-index:5;} 
       
 
           .xbgr-legal .xbox-1 .x1 .xt {
          	background-image: var(--black);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out .3s;
           animation-fill-mode: both;
             transform-origin: left bottom;
            left:-1%;
        }
      
        .xbgr-legal .xbox-1 .x2 .xt {
              background-image: var(--blank);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out .4s;
           animation-fill-mode: both;
             transform-origin: left bottom;
            left:-1%;
        }
      .xbgr-legal .xbox-1 .x3 .xt {
          	background-image: var(--black);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
        }
      
        .xbgr-legal .xbox-1 .x4 .xt {
             background-image: var(--blank);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inx .3s ease-out .6s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
           top:-1%;
        }
       .xbgr-legal .xbox-2 .x1 .xt {
            background-image: var(--black);
            border-radius:   0  0 0 100%  ;
            animation: Rotaty-inv .3s ease-out .6s;
            animation-fill-mode: both;
            transform-origin: right top ;
            top:-1%;
        }

       .xbgr-legal .xbox-2 .x2 .xt {
             background-image: var(--black);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inv .3s ease-out .8s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
           top:-1%;
        }   
      
       .xbgr-legal .xbox-2 .x3 .xt {
        background-image: var(--blank);
             border-radius:    100% 0 0 0;
             animation: Rotaty-inx .3s ease-out 1s;
           animation-fill-mode: both;
             transform-origin: right bottom;
        }
       
       .xbgr-legal .xbox-2 .x4 .xt {
             background-image: var(--blank);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out 1.2s;
           animation-fill-mode: both;
             transform-origin: left bottom;
           left:-1%;
        }
       
       .xbgr-legal .xbox-3 .x1 .xt {
          	background-image: var(--black);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out .3s;
           animation-fill-mode: both;
             transform-origin: left bottom;
            left:-1%;
        }
         .xbgr-legal .xbox-3 .x2 .xt {
          	background-image: var(--black);
             border-radius: 100%  0 0      0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right bottom ;
            left:-1%;
        }
       
 
      .xbgr-legal .xbox-3 .x3 .xt {
          	background-image: var(--black);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
        }
       
   .xbgr-legal .xbox-3 .x4 .xt {
          	background-image: var(--black);
             border-radius:   0 0      0 100%;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right top ;
            left:-1%;
        }
       
       .xbgr-legal .xbox-4 .x1 .xt {
             background-image: var(--black);
             border-radius: 0 0 0  100% ;
             animation: Rotaty-inx .3s ease-out 1.2s;
           animation-fill-mode: both;
             transform-origin: right top;
        }
      
       
      .xbgr-legal .xbox-4 .x2 .xt {
             background-image: var(--black);
             border-radius:     0   0 100% 0;
             animation: Rotaty-inx .3s ease-out 1.6s;
           animation-fill-mode: both;
             transform-origin: left top;
          left:-1%;
        }       
           .xbgr-legal .xbox-4 .x3 .xt {
        background-image: var(--black);
             border-radius:    100% 0 0 0;
             animation: Rotaty-inx .3s ease-out 1s;
           animation-fill-mode: both;
             transform-origin: right bottom;
        }
       
       .xbgr-legal .xbox-4 .x4 .xt {
             background-image: var(--black);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out 1.2s;
           animation-fill-mode: both;
             transform-origin: left bottom;
           left:-1%;
        }
        
         .xbgr-legal .xbox-5 .x1 .xt {
          background-image: var(--blank);
             border-radius: 100%  0 0      0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right bottom ;
            left:-1%;
        }
      
        .xbgr-legal .xbox-5 .x2 .xt {
              background-image: var(--blank);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out .4s;
           animation-fill-mode: both;
             transform-origin: left bottom;
            left:-1%;
        }
      .xbgr-legal .xbox-5 .x3 .xt {
          	background-image: var(--blank);
             border-radius:   0 0      0 100%;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right top ;
            left:-1%;
        }
      
        .xbgr-legal .xbox-5 .x4 .xt {
             background-image: var(--blank);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inx .3s ease-out .6s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
           top:-1%;
        }
        
           .xbgr-legal .xbox-6 .x1 .xt {
             background-image: var(--black);
             border-radius: 0 0 0  100% ;
             animation: Rotaty-inx .3s ease-out 1.2s;
           animation-fill-mode: both;
             transform-origin: right top;
        }
      
       
      .xbgr-legal .xbox-6 .x2 .xt {
             background-image: var(--black);
             border-radius:     0   0 100% 0;
             animation: Rotaty-inx .3s ease-out 1.6s;
           animation-fill-mode: both;
             transform-origin: left top;
          left:-1%;
        }       
           .xbgr-legal .xbox-6 .x3 .xt {
        background-image: var(--blank);
             border-radius:    100% 0 0 0;
             animation: Rotaty-inx .3s ease-out 1s;
           animation-fill-mode: both;
             transform-origin: right bottom;
        }
       
       .xbgr-legal .xbox-6 .x4 .xt {
             background-image: var(--blank);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out 1.2s;
           animation-fill-mode: both;
             transform-origin: left bottom;
           left:-1%;
        }  
 .xbgr-legal .xbox-7 .x1 .xt {
          	background-image: var(--black);
             border-radius:      0 100% 0 0;
             animation: Rotaty-inx .3s ease-out .3s;
           animation-fill-mode: both;
             transform-origin: left bottom;
            left:-1%;
        }
         .xbgr-legal .xbox-7 .x2 .xt {
          	background-image: var(--black);
             border-radius: 100%  0 0      0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right bottom ;
            left:-1%;
        }
       
 
      .xbgr-legal .xbox-7 .x3 .xt {
          	background-image: var(--black);
             border-radius:   0 0    100%  0;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: left top ;
            left:-1%;
        }
       
   .xbgr-legal .xbox-7 .x4 .xt {
          	background-image: var(--black);
             border-radius:   0 0      0 100%;
             animation: Rotaty-inx .3s ease-out .5s;
           animation-fill-mode: both;
             transform-origin: right top ;
            left:-1%;
        }
       
      
       
       


			
			
			 @keyframes Slide-inX {
             from { transform:translateX(-101%)}
             to {transform:translateY(0)}}
        
       @keyframes Slide-outX {
             from {transform:translateX(0)}
             to {transform:translateY(-101%)}}