/* footer layout*/

footer{display:grid; grid-template-columns: 50% 50%; max-width: 120rem; width: 100%; height: 20dvh; margin: 0 auto; }
footer{background-image:repeating-linear-gradient(45deg, lightgreen .2dvw, transparent .2dvw, steelblue 3dvw, transparent .3dvw, white .2dvw),repeating-linear-gradient(-45deg, transparent .2dvw, lightgreen .2dvw, transparent .2dvw, steelblue .3dvw, transparent .2dvw, white .2dvw); border-radius: 5%;}
.reference{position: absolute; max-width: 50%; font-weight: 500; padding: 1dvh 1dvw; font-size: 0.6dvw; line-height: 3;}
.author, .time, .number{color: white;}
#number1, #number2, #number3{color:red; font-size: 0.6dvw; margin-left: 2%; font-weight: 800;}
#animation{display: flex; flex-flow: row nowrap; width: 50%;  margin-left: 20dvw;; height: 20dvh; }  
#container_a{position: abolute; display:flex; flex-direction: column; width: 30dvw; height: 18dvh; margin-left: 5dvw;} 
.slider {position: relative; width: 15dvw; max-width: 100%; max-height: 18dvh; height: 100%; display: flex; perspective: 62.5dvw; align-items:center; margin-left: 1dvw; margin-block: 1dvh;}
.box1{background:url('./pic/foto-7.webp');background-size:10dvw 18dvh; background-position:center center;}
.box2{background:url('./pic/foto-22.webp');background-size:10dvw 18dvh;background-position:center center;}
.box3{background:url('./pic/foto-25.webp');background-size:10dvw 18dvh;background-position:center center;}
.box4{background:url('./pic/foto-26.webp');background-size:10dvw 18dvh;background-position:center center;}
.box5{background:url('./pic/foto-18.webp');background-size:10dvw 18dvh;background-position:center center;}
.box6{background:url('./pic/foto-63.JPG');background-size:10dvw 18dvh;background-position:center center;}
.box7{background:url('./pic/foto-62.webp');background-size:10dvw 18dvh;background-position:center center;}
.slider [class*="box"] {overflow: hidden; border-radius:2dvw; transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);position:absolute;}
.slider [class*="box"]:nth-child(7),.slider [class*="box"]:nth-child(1) {width: 10dvw; height: 18dvh; transform: scale(0.2) translate(0%,0%); top: 0;z-index:1;}
.slider [class*="box"]:nth-child(2), .slider [class*="box"]:nth-child(6) {width: 10dvw; height: 18dvh; transform: scale(0.4) translate(0%,0%); top: 0; z-index:2;}
.slider [class*="box"]:nth-child(3), .slider [class*="box"]:nth-child(5) {width: 10dvw; height: 18dvh; transform: scale(0.6) translate(0%,0%); top: 0; z-index:3;}
.slider [class*="box"]:nth-child(4) {width: 10dvw;height: 18dvh; border-color: #c92026; color: #fff; transform: scale(1) translate(0%,0%); top: 0; z-index:4;}
.slider [class*="box"]:nth-child(1){left:-30%;}
.slider [class*="box"]:nth-child(2){left:-20%;}
.slider [class*="box"]:nth-child(3){left:-10%;}
.slider [class*="box"]:nth-child(4){left:15%;}
.slider [class*="box"]:nth-child(5){left:40%;}
.slider [class*="box"]:nth-child(6){left:50%;}
.slider [class*="box"]:nth-child(7){left:60%;}
.slider .firstSlide {-webkit-animation:  firstChild 1s; animation:  firstChild 1s; }





/** Desktop (large) : maximum width - 1520px (95.5m) **/ 
@media (max-width: 96rem ) {
   footer{grid-template-columns: 60% 40%;; line-height: .2; height: 25dvh;}
   .reference{font-size: var(--fs-1);}
   #number1, #number2, #number3{color: aqua; font-size: 1.1dvw;}
   #animation{margin-left: 40dvw; height: 20dvh; margin-top: 1dvh;}
   
}   

/* max-width: 85rem = 1,320px */
@media screen and (max-width: 85rem){
   
} 

/* max-width: 75rem = 1,200px*/
 @media screen and (max-width: 75rem){
   #number1, #number2, #number3{margin-top: 1dvh;}
 }


/* max-width : 65rem  = 1,040px*/
 @media screen and (max-width: 65rem){   
  .author, .time, .email, .number{font-size: calc(var(--fs-1)*0.9); line-height: 1.5;}
   #number1, #number2, #number3{font-size: var(--fs-1); margin-top: -0.3dvh;}
   #animation{margin-left: 60dvw;max-height: 60dvh;}   

 }


/* max-width: 55rem =  880px */
 @media screen and (max-width: 55rem){
  .author, .time, .email, .number{font-size: calc(var(--fs-1)*0.7); line-height: 1.5;}
   #number1, #number2, #number3{font-size: var(--fs-1); margin-top: -0.3dvh;}
   #animation{margin-left: 60dvw; height: 100%;}
 }

/* max-width: 45rem =  720px */
 @media screen and (max-width: 45rem){
   
 }

 /* max-width: 35rem =  560px */
 @media screen and (max-width: 35rem){
   
 }

  /* max-width: 26.5rem =  420px */
 @media screen and (max-width: 26.5rem){
   footer{height: 15dvh;} 
   .reference{font-size: var(--fs-1); line-height: 2; max-width: 100%;}
   #animation{display: none;} 
 }