html {
    scroll-snap-type: y mandatory; scroll-padding: 0;
}

@media only screen and (max-width: 700px ) {
	#theFooter .site-name {display:none;}
}

main#milesDavis {
    width:100%;
}

#theIframe > main#main {
	border:20px solid green;
}

.irvingTownsend {
    height:100dvh !important; width:100%; overflow: hidden; position:relative; scroll-snap-align: start end;
}
.teoMacero {
    height:100%; width:100%; overflow: hidden;
}

.paulChambers, .jimmyCobb, .julianCAdderley, .wyntonKelly, .johnColtrane {
    margin:0;
}

main#kindOfBlue, main.kindOfBlue, main {
    position:relative;
    /* display: none; */
}

article {
    position: relative; z-index:2;
}

article.noEvent {
	 pointer-events: none;
}

.printInfo {
    position:absolute; height: 100dvh; width:50%; background: rgb(255,255,255 , .4);
    backdrop-filter: blur(1px); box-sizing:border-box;

}
    .inPrintInfo {
        max-width: calc(500px + 3rem); padding:0 3rem; color:#fff; box-sizing:border-box;
    }

    .printInfo h1, .printInfo h2 {text-align:left; width: 100%; margin:0 0 1.5rem 0; line-height: 1; font-weight: 500; font-family:'comfortaaregular';}
    .printInfo h1 {font-size:clamp(1.6rem,5dvw,3.5rem); margin:0 0 1rem -.5rem;}
    .printInfo h2 {font-size:clamp(1.3rem,3dvw,2.5rem); padding:0 0 0 .5rem;}
    .printInfo p {padding:1rem 1.5rem}
	
	#blueInGreen .printInfo .inPrintInfo  p {
		text-shadow: 0 0 3px rgba(166, 124, 0, 0.75);
	}

    #soWhat .printInfo {left:0; box-shadow: 29px 0 15px -14px rgb(0 ,0 ,0 , .2); background: rgba(195,0,56, .75); justify-content: flex-end;}
    #freddieFreeloader .printInfo {right:0; box-shadow: -29px 0 15px -14px rgb(0 ,0 ,0 , .2); background:radial-gradient(circle at 0% 50%,rgba(230,32,32, .8) 10% ,rgba(159, 15, 15, 0.9) 65%); justify-content: flex-start;}
    #blueInGreen .printInfo {left:0; box-shadow: 29px 0 15px -14px rgb(0 ,0 ,0 , .2); background: rgba(255,200,0, .9); justify-content: flex-end;}
    #allBlues .printInfo {right:0; box-shadow: -29px 0 15px -14px rgb(0 ,0 ,0 , .2); background: linear-gradient(135deg, rgba(2,161,253, .9), rgba(2,33,253, .9)); justify-content: flex-start;}
    #flamencoSketches .printInfo {left:0; box-shadow: 29px 0 15px -14px rgb(0 ,0 ,0 , .2); background: linear-gradient(60deg, rgb(0,90,40, .9), rgb(0,183,81, .9)); justify-content: flex-end;}

    .visuelInfoBlock {
        height:40%; background: red;
    }

    .inPrintInfo {
        max-width: 500px;
    }
    .inPrintInfo p { text-align:justify ;}
	
	

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++ leMagazine +++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#billEvans {
    position: fixed; top:0; left:0; height: 100%; width:100%; z-index: 1;
    background: radial-gradient(circle at 40% 30%,rgb(255, 255, 255) 0%, rgb(181, 181, 181) 60%);
}

#leMagazine {
    position:absolute; z-index: 5; top:50%; left:50%; height: 400px; width:600px; margin:-200px auto auto -300px; transform-style: preserve-3d;
    scale:1; translate:0; transition: all 750ms cubic-bezier(.4, 0, .2, 1);
}
    #leMagazine.state01 {transform:rotate(12deg) scale(1.3) translate(15dvw, -5dvh);}
    #leMagazine.state02 {transform:rotate(-5deg) scale(1.4) translate(-15dvw, -3dvh);}
    #leMagazine.state03 {transform:rotate(0deg) scale(1.5) translate(12dvw, 0);}
    #leMagazine.state04 {transform:rotate(-5deg) scale(1.6) translate(-20dvw, 0);}
    #leMagazine.state05 {transform:rotate(-25deg) scale(.8) translate(20dvw, 10dvh);}


    #theJazzMag {
        position:absolute; z-index: 5; top:0; left:50%; height: 400px; width:300px;perspective: 1000px; transform-style: preserve-3d;

    }

        .theJazzMagUnder {
            position:absolute; z-index:3; top:50%; left:50%; height: 400px; width:614px; margin:-200px auto auto -310px; 
            background-color:#efefef; box-shadow: 3px 3px 3px -2px rgba(0,0,0, .4);
        }
            .theJazzMagUnder .pageUn {
                position: absolute; top:-30px; left:20px; height: 460px; width: 290px; background: rgb(255, 255, 255);
                border-radius: 310px 120px 120px 310px / 50px 50px 50px 50px; overflow: hidden; box-shadow: -15px 0 0 -10px rgb(232, 232, 232);
                filter: drop-shadow(20px 7px 3px rgba(0, 0, 0, 0.18));
            }
            .theJazzMagUnder .pageUn .leShadow,.theJazzMagUnder .pageUn .leVisuel {
                position: absolute; top:0; right:0;
            }

            .lastPage {
                position: absolute; left: 300px; height: 400px;  width: 300px; padding: 20px 0 20px 20px;
            }

            .lastPageImg {
                width:280px; height:280px; background: transparent url(../../images/in-the-mirror-hori.jpg)  center center/cover no-repeat;
            }
            .lastPageTitre {
                width: 280px; height:80px; background: red;
            }


            .leShadow {
                z-index: 4; height:100%; width:100%; background: linear-gradient(90deg, rgba(239, 239, 239, 0.1) 10%,rgba(255,255,255, .6) 40%, rgba(0, 0, 0, 0.55) 90%, rgba(28,28,28, .9) 100%);
            }

            .theJazzMagUnder .pageUn .leVisuel {
                z-index: 1; height:100%; width:100%; background-repeat: no-repeat; background-position:28px 0; background-size:90% 100% ;
                background-image: url(../../images/pageUn.png);
            }

            

    .page {
        background-color:transparent;  width:300px; height:400px; perspective:1000px;  position: absolute;
        top: 0; left:0; transform-origin: 0 100%; transform-style: preserve-3d;
    }
        .page.open {z-index: 1;}


        @keyframes pageQuiTourne {
            0%   {transform: rotateY(-180deg);}

            100% {transform: rotateY(0deg);}
        }
    

        @keyframes returne {
            0%   {transform: rotateY(0deg);}

            100% {transform: rotateY(-180deg);}
        }

        .page-inner {
          position: relative; width: 100%; height: 100%; text-align: center;  transform-style: preserve-3d; 
        }

        .page.open {animation: returne 500ms linear forwards;}
        .page.closed {animation: pageQuiTourne 500ms linear forwards;}

        .page-front, .page-back {
          position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden;
          background: rgb(255, 255, 255); color: rgb(0, 0, 0);
        }

        .page-front {
            transform: rotateX(0deg)
        }

        .page-back {
            transform: rotateY(180deg); border-radius:0; margin:0;
            transition:all 500ms linear;
        }
          /* .open .page-inner .page-back { */
           .page01 .page-inner .page-back, .open .page-inner .page-back  {
                border-radius:310px 120px 120px 310px / 50px 50px 50px 50px; margin: -30px 10px 0 0;
                height: calc(100% + 60px); width:calc(100% - 10px); 
				background-image:url(../../images/pageUn.png),linear-gradient(95deg,transparent 30%,rgba(74, 74, 74, 0.28) 70%, rgba(0, 0, 0, 0.62) 90%, black 100%);
				background-size:96% 100%; background-repeat:no-repeat; background-position:center right;
            }


            .inPageGauche {
                position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%;
                /* background: linear-gradient(90deg, rgba(239, 239, 239, 0.1) 10%,rgba(255,255,255, .6) 40%, rgba(0, 0, 0, 0.55) 90%, rgba(28,28,28, .9) 100%); */
            }
                .page-front .inPageGauche {background: transparent;}


            .inPageGauche-content {
                position: absolute; z-index: 1;
                top: 10px; left: 10px; height: calc(100% - 20px); width: calc(100% - 10px); background-size: 100% 100%;
                background-repeat: no-repeat; border-radius:0;
                /* background-image: url(imgs/pour-le-fun-9.jpg); */
            }
            .inPageGauche-content.full {
                top:0; left:0; height:100%; width:100%;
            }
                .popovithBox {
                    position:relative; height:100%; background-size: 100% 100%; background-repeat: no-repeat;
                }
                    .popovithBox:first-child {width:30%; background-image:url(../../images/popovitch-1.jpg);}
                    .popovithBox:nth-child(2) {width:45%; background-image:url(../../images/popovitch-2.jpg);}
                    .popovithBox:last-child {width:25%; background-image:url(../../images/popovitch-3.jpg);}

                .page04 .popovitch {
                    background-image: url(../../images/popovitch-4.jpg); background-size: 110% 110%;
                    background-repeat: no-repeat; background-position: 0 40%;
                }
            

            .pageDroiteOmbre {
                position: absolute; z-index: 4; top: 0; left: 0; height: 100%; width: 100%;
                background: linear-gradient(77deg, rgba(0, 0, 0, 0.83) 0%, transparent 45%);
            }

        .pageNum {position: absolute; z-index: 3; bottom:3px; left:50%; transform:translateX(-50%); font-size: 8px; height: 15px; width:15px; border-radius:50%; text-align: center; line-height:15px; background-color: white; color:black;}

        .page01 {z-index: 5;}

        .page02 {z-index: 4;}

        .page03 {z-index: 3;}   

        .page04 {z-index: 2;}  

        .page05 {z-index: 1;}


/* //////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////// */

.rectoPage_1 {
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px; grid-row-gap: 10px; padding: 0 8px 0 0;
    height:100%;
}
.rectoPage_b {margin:0;}
    .rectoPage_b p {
        text-align: justify; font-size: 7px; margin:0 0 5px 0;
    }

    .rectoPage_block1 { grid-area: 1 / 1 / 3 / 2; text-align:left; background-color: rgb(221, 161, 104); padding:0 12px;}
        .rectoPage_block1 span {display:block; font-weight: bolder; font-size: 20px; margin:20px 0 20px 0}
        .rectoPage_block1 p {text-align:left;}
    .rectoPage_block2 { grid-area: 3 / 1 / 4 / 2; background-image: url(../../images/potier.jpg); }
    .rectoPage_block3 { grid-area: 1 / 2 / 2 / 3; background-image: url(../../images/boulanger.jpg);}
    .rectoPage_block4 { grid-area: 2 / 2 / 4 / 3; background-color: rgb(202, 202, 202); padding:10px 15px 0 15px; overflow: hidden; border-bottom: 10px solid #ccc;}
        .rectoPage_block4 p:first-of-type:first-letter {display: block; font-weight: bolder; font-size: 200%; float:left; margin:0 2px 0 0;}


    .heidelberg {height:300px; background-size: 100% 100%; background-repeat: no-repeat;}
        .heidelberg:first-child {background-image: url(../../images/heidelberg-1.png); width:25%;}
        .heidelberg:nth-child(2) {background-image: url(../../images/heidelberg-2.png); width:45%;}
        .heidelberg:last-child {background-image: url(../../images/heidelberg-3.png); width:15%;}

    .page01 .inPageGauche {background-image: radial-gradient(circle at 50%,rgb(221, 161, 104) 50%, transparent 50%);}



.belleCourbe {height:100%; background-size:100% 94%; background-position: 0 100%; background-repeat: no-repeat;}
    .belleCourbe:first-child {background-color: rgb(255 ,171 ,0); width:50%; padding: 20px 15px 20px 30px; box-sizing: border-box;} 
        .belleCourbe:first-child p {font-size: 6px;  font-weight: normal; text-align: justify;}
  
    .belleCourbe:nth-child(2) { width:30%; background-image: url(../../images/belle_courbe-1.png);} 
    .belleCourbe:last-child {width:20%; background-image: url(../../images/belle_courbe-2.png); } 

    img.paraf {
        display: block; width: 130px; position: absolute; 
    }
        img.paraf.titre {bottom: auto; top: 60px; right: 5px; }
        img.paraf.text {bottom:20px; top:auto; right: 10px; }

    .courbes { width:50%; height:100%;  }
        .courbes:first-child  {background-image: url(../../images/belle_courbe-3.png); background-size:100% 100%; background-position: 0 ; background-repeat: no-repeat; }
        .courbes:nth-child(2)  {background-color: rgb(255 ,171 ,0); padding:30px 10px; text-align: left; box-sizing: border-box;}
        .courbes:nth-child(2) span {display:block; color:rgb(0,0,0); font-size: 15px; font-weight: bolder; margin:10px 0}
        .courbes:nth-child(2) p {color:rgb(255,255,255); font-size:7px; text-align: justify;}

.rectoPage_2 {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 10px; grid-row-gap: 10px;  width: 85%;  height: 80%; margin: auto auto auto 2rem;
}
    
    .rectoPage_2-block1 { grid-area: 1 / 1 / 2 / 3; }
        .rectoPage_2-block1 span {display:block; font-weight: bolder; font-size: 20px; margin:20px 0 20px 0; text-align: left;}
    .rectoPage_2-block2 { grid-area: 1 / 3 / 4 / 4; padding:10px 5px;}
        .rectoPage_2-block2 p {text-align: left;  font-size: 7px;}
    .rectoPage_2-block3 { grid-area: 2 / 1 / 3 / 2; }
        .rectoPage_2-block3 span {display:block; font-size: 15px;  font-weight: bolder; text-align: left;}
    .rectoPage_2-block4 { grid-area: 2 / 2 / 3 / 3; }
        .rectoPage_2-block4 p { font-size: 6px;  font-weight: normal; text-align: justify;}
    .rectoPage_2-block5 { grid-area: 3 / 1 / 5 / 3; background-image: url(../../images/blueEye.jpg);}
    .rectoPage_2-block6 { grid-area: 4 / 3 / 5 / 4; }
    
    

    .bitmapPage {
        background-image: url(../../images/page-distortion.jpg); background-size:100% 100%; background-repeat: no-repeat; background-position: center;
    }

    .inPageGauche.saxJazz {
        background-repeat: no-repeat; background-position: center; background-size: 90%; background-image: url(../../images/sax-jazz.jpg);
    }

    .saxText {
        position: absolute; width:100px; height:300px; color:rgb(255,255,255); top:50px; right:25px; padding:0 6px;
    }
        .saxText span {display:block; font-size: 20px; text-align: left; font-weight: bolder; margin: 0 0 5px 0;}
        .saxText p {
            font-size:7px; text-align: justify; letter-spacing: calc(.899rem - 15px); margin: 0 0 5px 0;
        }

            .saxText p:first-of-type:first-letter {font-size: 200%; font-weight: bolder; float: left; margin:0 4px 0 0;}


/* ///////////////////////////////////////////////////////////////////////// */

#tableMag {
    position: absolute; z-index: 2; height: 800px; width:800px; border-radius: 50%; top: 50%; left:50%; margin: -400px auto auto -400px;
    transform:scale(0.01) translate(30dvw, 15dvh); opacity: 0; transition: all 750ms cubic-bezier(.4, 0, .2, 1);
    background-image: repeating-linear-gradient(90deg, rgb(0 215 237 / 60%), rgb(92 197 229 / 65%) 1px, transparent 1px, transparent 40px);
    background-size: 4px; background-color: rgb(54, 28, 52); border: 3px solid black;
    box-shadow: inset 10px 5px 14px -6px rgb(47, 29, 51), inset -5px -5px 20px 0 rgba(224, 201, 229, 0.41);
}
    #tableMag.onscreen {transform:translate(20dvw, 5dvh); opacity: 1; }

    .assiette {
        position:absolute; height:280px; width:280px; border-radius:50%; background-image:radial-gradient(circle at 25% 20%,rgb(255,255,255) , rgb(200,200,200));
        background-color:rgb(255,255,255); top:425px; left:368px; box-shadow:15px 15px 10px 0 rgba(20,20,20, .6);
    }
        .assiette .inAssiette01 {
            position:absolute; z-index:1; height:240px; width:240px; border-radius:50%; top:20px; left:20px; background-image:radial-gradient(circle at 60% 60%,rgb(255,255,255) , rgb(188,188,188)); filter:blur(3px);
        }
            .assiette .inAssiette01 span {
                position:absolute; height:200px; width:200px; border-radius:50%; top:20px; left:20px; background-image:radial-gradient(circle at 70% 70% , rgb(200,200,200),rgb(255,255,255));
                box-shadow:inset -10px -6px 10px -6px rgba(255,255,255, .8);
            }
            
            .egg {
                position:absolute; z-index:2; top:90px; left:80px; height:100px; width:120px; border-radius:39% 57% 63% 27% / 32% 39% 54% 51% ;
                background-image:radial-gradient(ellipse at 10% 15%, rgb(255,255,255) 60%, rgb(200,200,200) 90%);
                box-shadow:inset 2px 2px 5px 0 rgb(76,53,25, .2), 1px 2px 5px -2px rgba(0,0,0, .2);
            }
            
                .yellowEgg {
                    position:absolute; height:60px; width:60px; top:15px; left:20px; background-image:radial-gradient( circle at 20% 30%, rgb(255, 235, 7), rgb(225,152, 0) ); border-radius:50%;
                    box-shadow:3px 3px 8px 2px rgba(55,55,55, .2);
                }
                    .yellowEgg span {
                        position:absolute; height:50px; width:50px; top:5px; left:5px; background-image:radial-gradient(ellipse at 0, rgb(255,255,255) 0%, transparent 20% ); border-radius:50%; rotate:25deg;
                    }
                    
            .appleQuarter {
                width:60px; position:absolute; z-index:2; height:90px; border-radius:35% 35% 45% 45% / 50% 50% 50% 50%; 
            }
            
            .appleQuarter.red {
                top:auto; bottom:34px; left:38px; rotate:-40deg; background-color:red;
                box-shadow:5px 28px 10px -6px rgba(0,0,0, .3);
            }
            
            
            .appleQuarter.green {
                top:10px; bottom:auto; left:135px; rotate:-105deg; background-color:green; scale:.95;
                box-shadow:-8px 14px 10px 2px rgba(0,0,0, .3);
            }
            
            
                .inAppleQuarter {
                    position:absolute; z-index:1; height:86px; width:44px; left:1px; right:auto; background:rgb(255, 252, 236); border-radius:50%; 
                }
                    .inAppleQuarter:first-child {left:1px; right:auto;}
                    .inAppleQuarter:last-child {right:1px; left:auto;}
                    
                    .midApple {
                        position:absolute; z-index:2; height:82px; width:40px; border-radius:50%; left:50%; top:50%; translate:-50% -42px; background-image:linear-gradient(90deg,transparent 40%, rgba(251, 212, 153, 0.24) 50%, transparent 60% ),radial-gradient(ellipse at 50%, rgb(255,255,255) , rgb(255, 252, 236) );
                    }
                    
                    .graine {
                        position:absolute; height:8px;  width:6px; border-radius:0% 100% 37% 63% / 0% 69% 31% 100% ; background:rgb(93, 31, 6);
                    }
                    
                    .graine:first-child {rotate:35deg; top:34px; left: 12px; box-shadow:0 0 2px 5px rgba(254, 230, 192, 0.58);}
                    .graine:last-child {rotate:36deg; top:38px; left: 22px; box-shadow:0 0 2px 5px rgba(254, 230, 192, 0.58);}


     .fourchette {
         height:412px; width:60px; position: absolute;
         z-index: 2; scale: .6; top: -10px; left: 200px; rotate: -23deg;
     }
         .fourchette_1, .fourchette_2, .fourchette_3 {
             position:absolute;
         }
         
         .fourchette_1 {
             top:0; background-image:linear-gradient(180deg, rgb(169, 169, 169) 60%,rgb(237, 237, 237) 90%) ;
             box-shadow:inset -2px 0px 3px -3px black;
         }
         
             .fourchette_1.pique01 {
                 left:0; height:71px; width:10px;border-radius:100% 0% 0% 0% / 100% 0% 0% 0% ;
             }
         
             .fourchette_1.pique02 {
                 left:18px; height:71px; width:8px;border-radius:100% 100% 0% 0% / 100% 100% 0% 0% ;
             }
         
             .fourchette_1.pique03 {
                 right:18px; height:71px; width:8px;border-radius:100% 100% 0% 0% / 100% 100% 0% 0% ;
             }
         
             .fourchette_1.pique04 {
                 right:0; height:71px; width:10px;border-radius:0% 100% 0% 0% / 0% 100% 0% 0% ;
             }
         
         
         .fourchette_2 {
             top:70px; width:60px; height:50px; border-radius:0% 0% 39% 39% / 40% 40% 60% 60% ;
             background-image:linear-gradient(180deg, rgb(237, 237, 237) 10%,rgb(97, 97, 97) 40%) ;
         }
         
         .fourchette_3 {
             top:110px; left:20px; height:300px; width:20px; border-radius:30% 30% 50% 50% / 80% 80% 20% 20% ;
             background-image:linear-gradient(180deg, rgb(97, 97, 97) 5%, rgb(255,255,255) 15% ,rgb(237, 237, 237) 30%, rgb(97, 97, 97) 100%);
             box-shadow:inset -1px -1px 3px -2px rgba(0, 0, 0, 0.5);
         }

/* ///////////////////////////////////////////////////////////////////////// */


@media only screen and (max-width: 700px ) {
    #soWhat .printInfo, #freddieFreeloader .printInfo, #blueInGreen .printInfo, #allBlues .printInfo, #flamencoSketches .printInfo {
        height:60dvh; bottom: 0; width: 100%; 
    }
        .inPrintInfo {
			padding: 1rem;
		}

    #leMagazine.state01 { transform: rotate(12deg) scale(.65) translate(-18dvw, -40dvh); }
    #leMagazine.state02 { transform:rotate(-5deg) scale(.55) translate(3dvw, -45vh); }
    #leMagazine.state03 { transform:rotate(0deg) scale(.58) translate(0dvw, -40dvh); }
    #leMagazine.state04 { transform:rotate(-5deg) scale(.6) translate(6dvw, -36dvh); }
    #leMagazine.state05 { transform:rotate(-25deg) scale(0.43) translate(50dvw, -69dvh);}
        #tableMag.onscreen {  transform: scale(.5) translate(0dvw, -46dvh);}

}

@media only screen and (min-width: 500px) and (max-width:800px){
    #leMagazine {scale:.8; translate:-10dvw -14dvh;}
    #tableMag.onscreen  {transform:scale(.8) translate(42dvw, 10dvh);}
}