/* footer layout*/

footer{display:grid; grid-template-columns: 55dvw 45dvw; max-width: 200rem; width: 100%; max-height: 100%;  height: 22dvh; margin: 0 auto; object-fit:cover;}
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: 55dvw; width: 100%; font-weight: 500; padding: 1dvh 1dvw; font-size: clamp(1rem, 2dvw + 0.5rem, 1.5rem); line-height: 2; color: white;}
#number{margin-left: 2%; font-weight: 800;}

/* clock settings */

.clock-container { display: flex; flex-flow: row nowrap; }
.day {font-size: clamp(1rem, 2dvw + 0.5rem, 1.5rem); font-weight: 400; color: white; margin-bottom: 0.1rem; padding-right: 1dvw;}
.time { font-size:  clamp(1rem, 2dvw + 0.5rem, 1.5rem); font-weight: 700;font-family: 'Courier New', Courier, monospace; letter-spacing: 2px; display: flex; align-items: left; justify-content: left; }
.time-unit { min-width: 2.2ch;text-align: left;}
.separator { color: white; animation: blink 1s step-end infinite;}
 @keyframes blink {
      50% { opacity: 0.3; }
    }

/* animation settings */

#animation{display: flex; flex-flow: row nowrap; width: 65dvw;  max-width: 100%; margin-left: 20dvw; height: auto; }
#container_a{position: abolute; display:flex; flex-direction: column; width: 20dvw; 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; }


/** SETTINGS FOR OTHER DEVICES AND OTHER SIZES**/


/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
    footer{position: relative; max-width: 100%; display: grid; grid-template-columns: 45dvw 50dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(1rem, 1dvw + 0.5rem, 1.25rem); }
    #animation #container_a .slider{position: relative; width: 50dvw; margin-left: 20dvw; max-width: 100%;}
    #number{margin-left: 2%; }
}
/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
}
 /* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw; height: 30dvh;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }

 }

/* max-width: 55rem =  880px */
 @media screen and (45rem <= width <= 55rem){
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }

}

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
 }

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
 }


@media (max-width: 480px) {
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 30dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
}

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
    footer{width: 100%; grid-template-columns: 60dvw 40dvw; max-width: 99dvw;}
    .reference{width: 50dvw; max-width: 100%;}
    .reference, .day, .time{font-size: clamp(0.5rem, 1dvw + 0.5rem, 1rem); }
    #animation #container_a .slider{position: relative; width: 40dvw; margin-left: 25dvw; max-width: 100%;}
    .number, #number{ margin-left: 2%; }
 }