@charset "utf-8";
html, body{width:100vw;min-height:100lvh;margin:0;font-family:system-ui, sans-serif;font-size:calc(15px + 0.390625vw);background:#245f67;overflow-x:clip;scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) rgba(255,255,255,.85);scroll-behavior:auto!important;box-sizing:border-box;-webkit-text-size-adjust:none}
*,*::before,*::after {box-sizing:inherit} /* important */
.big{font-size:175%}
.small{font-size:75%}
.caps{font-variant:small-caps}
.bold{font-weight:900}
img{object-fit:cover;object-position:center;transition:all ease-in-out 0.5s}
/* transition images on hover */
.img{position:relative;margin:0}
.hover_img{position:absolute;top:0;left:0;opacity:0}
.img:hover .hover_img {opacity:1}
/* anchors */
a{text-decoration:none;transition:all ease-in-out 0.5s}
a:active,a:hover{color:#D96D00;border:transparent}
a:focus-visible{outline:0}
a.extlnk{text-decoration:underline;color:inherit}
.extlnk:after{content: "\29c9";padding-left:0.5vw}
a.extlnk:hover{color:#D96D00}
/* header.htm  and .sub-header */
header{position:sticky;top:0;z-index:2;padding:0 0 0.5rem 0.5rem;background:linear-gradient(#fff, 99.9%, #2e6272)}
#logo-container{display:inline-block;width:15rem;vertical-align:-55%}
.logo{margin-left:0.5rem}
.sub-header{padding:0 0 0 2vw;margin:0;font-size:1.4rem;font-style:oblique}
.dark{background:transparent;color:rgba(46, 98, 114, 1);text-shadow:1px 0 1px #fff}
.clear{background:transparent;color:rgba(255,255,255,1)}
/* footer.htm */
footer{opacity:0;height:fit-content;font-size:0.55rem;background:#fff;color:#2e6272;border-top:thin #2e6272;padding:0.5vh 0 0.5vh 0.75vw}
footer a{color:inherit;font-weight:700}
footer a:hover{color:#D96D00}
/* Mini drop-down menu */
.sub-menu{visibility:hidden;opacity:0;position:absolute;top:100%;left:0.5vw;width:fit-content;transform:translateY(-2em);transition:all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s}
.sub-menu-parent:focus .sub-menu,.sub-menu-parent:focus-within .sub-menu,.sub-menu-parent:hover .sub-menu{visibility: visible;opacity:1;z-index:-1;transform:translateY(0%);transition-delay: 0s, 0s, 0.3s}
/* Mini drop-down menu presentational */
#mini-menu{position:relative;z-index:999;display:inline-block;color:#2e6272}
.menu{font-size:3.6rem;margin:-.1em 0;transition:ease-in-out 0.5s;text-shadow:0.1vw 0.1vw 0.3vw #E9B6B9, 1vw 1vw 0.5vw rgba(46, 98, 114, 0.5), 1vw 1vw 0.5vw rgba(217, 109, 0, 0.4);display:block;min-width:6.5vw;animation-name:fading;animation-timing-function:ease-in;animation-fill-mode:forwards;animation-duration:1s;animation-delay:1s;font-weight:700;text-align:center;cursor:pointer}
.menu:hover,.menu:focus {color:rgba(217, 109, 0, 1)}
nav ul a {display:block;padding:0.4em 0.5em 0.3em 0.25em;color:rgba(46, 98, 114, 1)}
.sub-menu a:hover, .sub-menu a:focus, .sub-menu a:active {background:#e0e8ea;color:rgba(217, 109, 0, 1);border-radius:4px}
.sub-menu a.actual{background:#e0e8ea;font-weight:900;border-radius:4px}
nav ul, nav ul li {list-style-type:none;padding:0;margin:0}
nav > ul > li {font-size:0.7rem;text-align:right}
.sub-menu {background:rgba(255,255,255,1);font-weight:700;border-radius:4px;border:1px groove #A1AFBD}
/* Responsive columns */
.resp-col{}
.col{margin:auto}
.col-left{padding:0 1vw 0 0}
.col-center{padding:0 1vw}
.col-right{padding:0 0 0 1vw}
@media only screen and (min-width:640px){.resp-col{display:flex}}
/* hidden musicians overlays */
.musician-overlay{position:fixed;opacity:0;transform:scaleX(0);z-index:-1;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) transparent;width:60%;height:75%;top:15%;left:10%;padding-bottom:6vh;background:linear-gradient(#fff, 33%, rgba(255,255,255,0.85));color:#1f414b;overflow-y:scroll;border:1px groove rgba(46, 98, 114, 0.25);border-radius:0.5em;font-size:0.8rem;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s allow-discrete}
@media only screen and (min-width:320px) and (orientation:portrait){.musician-overlay{width:80%}}
.musician-overlay h3{position:sticky;top:0;padding:0.5vh 0 0.5vh 1.75vw;background:#fff;font-size:1.3rem}
.musician-overlay img.close{opacity:1;width:1.7rem;float:right;margin:0.1rem 0.4rem 0 0;border:0.25em solid transparent;border-radius:0.25em;cursor:pointer}
/* Menus Concert Repertoire + Teacher & philosopher */
.menuconcertrep{opacity:0;position:relative;min-height:100lvh;background: url("../img/pianist/concert-repertoire-bg.webp") no-repeat right 80% / 75%, #afd9d8}
.menuteacher, .potpourri, .guru{opacity:0;min-height:100lvh;background:url("../img/pianist/teacher-bg.webp") no-repeat right 85% / 50%, linear-gradient(to bottom right, #d8e8e8, #fff 80%)}
.icon{display:inline;max-width:1.7rem;height:auto;margin-right:0.5rem;vertical-align:-0.25rem}
hr{margin:0.2rem 0 0 0;padding:0.1rem 0 0 0;color:#e0eeef;box-shadow:0.2rem 0.1rem 0.4rem #2e6272}
/* infobulles */
.menuconcertrep nav a, .menuteacher a{position:relative;font-weight:700;color:#2e6272;text-decoration:none;text-shadow:0.1rem 0 white}
.menuconcertrep nav h2, .menuteacher h2{display:inline;font-size:1.4rem}
.menuconcertrep nav a span, .menuteacher a span{display:none}
.menuconcertrep nav a:hover, .menuteacher a:hover{color:#1f414b;text-shadow:none}
.menuconcertrep nav a:hover span, .menuteacher a:hover span{display:inline;width:120%;position:absolute;margin-top:0.25rem;left:0;font-size:0.7rem;text-shadow:none;color:#1f414b}
/* Repertoire */
.repertoire{background:url("../img/pianist/repertoire-bg.webp") 1% 1% / 23%;position:relative;left:100%;min-height:100lvh;padding-bottom:30vh;font-weight:600;color:#1f414b;text-align:left;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
.repertoire p{text-indent:1rem}
#repertoire1 .resp-col{width:90%;margin:18vh auto 0 auto;line-height:1.75rem;text-indent:1rem}
.repertoire a{color:#2e6272;font-weight:700;font-style:italic}
.repertoire a:hover{color:#d96d00}
#repertoire2 a{font-style:normal;font-weight:900;text-decoration:underline}
.repertoire .next{position:sticky;top:0;z-index:2;width:50px;height:fit-content;margin:-10vh 2vw 0 0;float:right;font-size:0.75rem}
.repertoire .next a{text-decoration:none!important;font-style:italic!important;font-weight:700!important}
/* Auditorium */
.auditorium{position:relative;left:100%;min-height:100lvh;background:#245f67}
.auditorium #auditory{position:relative;width:fit-content;height:12vh;margin:0 0 0 2vw;color:#E2EFF3}
.auditorium h2 {font-size:1.2rem;font-weight:600;text-shadow:0.012rem 0 #fff;margin:3vh 0 0}
.auditorium #subtitle{font-size:0.75rem}
.auditorium #playlist{width:fit-content;margin:4vh 0 0 2vw}
.auditorium a{color:inherit;font-weight:700;text-decoration:underline}
.auditorium a:hover{color:#D96D00}
.auditorium a.next{position:sticky;z-index:2;float:right;margin-right:7vw;top:3vh;background:rgba(46,98,114,.7);color:#D96D00;text-shadow:0.3rem 0 0.6rem #fff;border:0.005rem solid rgba(255,255,255,0.5);box-shadow:0.03rem 0 0.3rem #fff; border-radius:50%;padding:0 0.645rem 0.3rem 0.645rem;font-size:1.6rem;font-weight:900;text-decoration:none}
.auditorium a.next:hover {background:radial-gradient(rgba(217,109,0,0.8) 3%, rgba(255, 255, 255, 0.75));color:#fff;text-shadow:0.6rem 0 0.2rem #fff}
/* infobulles auditorium */
.auditorium a span{display:none;position:absolute;margin-top:2rem;right:0;border-radius:0.25em;background:#6DB1C5;color:#ffffff;font-size:0.65rem;font-weight:400;padding:0.25rem 0.5rem}
.auditorium a:hover span{display:inline}
/* sliding soundclips */
.soundclip{left:100%;position:fixed;top:16%;z-index:2;width:fit-content;
border:1px groove rgba(46, 98, 114, 0.25);border-radius:0.25em;background:#fff}
@media only screen and (orientation:landscape) and (max-width:915px){.soundclip{height:100%;top:4%;max-height:calc(100% - 8%);overflow:scroll}}
#soundclip-header{display:block;background:rgba(46, 98, 114,0.6);padding:5px;font-size:0.6rem;font-weight:700;color:#fff;border-radius:0.25em 0.25em 0 0;height:25px}
#soundclip-header a.close img {float:right;width:16px;height:16px;margin:0;background:#fff;border:2px ridge transparent;border-radius:0.25em;transition:all ease-in-out 0.5s}
#soundclip-header a.close img:hover{background:rgba(255,160,64,1)}
/* video in auditorium2 */
a.video {display:inline-block;min-height:1.6rem;vertical-align:middle;background:url("../img/opuscatalogue/watch-btn.webp") no-repeat 0.2rem 50% / 1.3rem, linear-gradient(to right, rgba(255,255,255,0.25) 60%, transparent);border-radius:0.25em;padding:0.2rem 0.2rem 0.2rem 2rem;min-width:350px;text-decoration:none;font-size:0.8rem;font-weight:600;color:#f6f9ff}
a.video:hover,a.video:active,a.video:focus{background:url(../img/opuscatalogue/watch-btn-hover.webp) no-repeat 0.2rem 50% / 1.3rem, linear-gradient(to right, #6DB1C5, transparent);font-weight:700;color:#fff}
.videoclip-chopin{width:350px} /* video in auditorium2 */
#auditorium1{background:url("../img/pianist/auditorium1-bg.webp") no-repeat right 80% / 75%}
#auditorium2{background:url(../img/pianist/auditorium2-bg.webp) no-repeat right 80% / 75%}
#auditorium3{background:url("../img/pianist/auditorium3-bg.webp") no-repeat right 80% / 75%}
#auditorium4{background:url("../img/pianist/auditorium4-bg.webp") no-repeat right 80% / 75%}
#auditorium5{background:url(../img/pianist/auditorium5-bg.webp) no-repeat right 80% / 75%}
#auditorium6{background:url("../img/pianist/auditorium6-bg.webp") no-repeat right 80% / 75%}
#auditorium7{background:url("../img/pianist/auditorium7-bg.webp") no-repeat right 80% / 75%}
#auditorium8{background:url("../img/pianist/auditorium8-bg.webp") no-repeat right 80% / 75%}
#auditorium9{background:url(../img/pianist/auditorium9-bg.webp) no-repeat right 80% / 75%}
#auditorium10{background:url(../img/pianist/auditorium10-bg.webp) no-repeat right 80% / 75%}
#auditorium11{background:url("../img/pianist/auditorium11-bg.webp") no-repeat right 80% / 75%}
#auditorium12{background:url("../img/pianist/auditorium12-bg.webp") no-repeat right 80% / 75%}
#auditorium13{background:url("../img/pianist/auditorium13-bg.webp") no-repeat right 80% / 75%}
#auditorium14{background:url("../img/pianist/auditorium14-bg.webp") no-repeat right 80% / 75%}
#auditorium15{background:url("../img/pianist/auditorium15-bg.webp") no-repeat right 80% / 75%}
#auditorium16{background:url("../img/pianist/auditorium16-bg.webp") no-repeat right 80% / 75%}
/* Teacher & Philosopher content: 
 Piano guru + Potpourri + Loitering */
.potpourri{color:#2e6272}
.guru, .loitering{color:#1f414b}
.potpourri a, .guru a, .loitering a{color:#2e6272;text-decoration:underline;font-weight:900}
.potpourri a:hover, .guru a:hover, .loitering a:hover{color:#d96D00}
.potpourri a.next, .guru a.next, .loitering a.next{position:sticky;z-index:2;float:right;top:2vh;margin-right:2vw;text-align:center;font-size:0.65rem;font-weight:700;font-style:italic;text-shadow:0.05rem 0 0.05rem #fff;text-decoration:none}
.potpourri a.next img:hover, .guru a.next img:hover, .loitering a.next img:hover{opacity:0.6}
.potpourri .graphic{width:fit-content;max-width:90%;background:rgba(46, 98, 114, 0.75);border-radius:0.25em;text-shadow:none}
.longline{width:50%;padding:1vh 2vw 0 2vw;font-weight:600;text-shadow:0.05rem 0 0.05rem #fff;line-height:1.5rem}
@media only screen and (min-width:320px) and (orientation:portrait){.longline{width:85%}}
.rotary, .cantabile, .physicalrhythm, #guru1, #guru2, #guru3{width:85%;padding:3vh 2vw 6vh 2vw;font-weight:600;text-shadow:0.05rem 0 0.05rem #fff;line-height:1.5rem}
.loitering {opacity:0;min-height:100lvh;background: url("../img/pianist/loitering-bg2.webp") no-repeat 0 99%, url("../img/pianist/loitering-bg1.webp") no-repeat 40% 70%/cover #fff}
.loit{padding:2vh 2vw 15vh 2vw;font-weight:600;text-shadow:0.05rem 0 0.05rem #fff;line-height:1.5rem}
/* Menu Tributes and Reviews */
.menutribrev{opacity:0;min-height:100lvh;background:url(../img/pianist/tributesreviews-bg.webp) no-repeat right bottom /45%, linear-gradient(to right, #649597,#2d4a50 36%)}
.menutribrev #menu{width:fit-content;padding:4vh 0 20vh 2vw}
.menutribrev h2{display:inline;margin:0;font-size:1.2rem}
.menutribrev a{opacity:0.75;font-weight:700;color:#a1e9f4;text-shadow:0.02rem 0 0 #fff;text-decoration:none}
.menutribrev a:hover{opacity:1;color:#fff;text-shadow:0.02rem 0 0.02rem #fff}
.menutribrev a img{border-radius:0.25em;margin:0.25rem;vertical-align:bottom;transition:border ease-in-out 0.2s}
.menutribrev a img:hover{border:0.15em solid #e0e8ea}
.menutribrev hr{margin-bottom:1.5rem}
/* Tributes */
.tribute{min-height:100lvh;background:url("../img/pianist/tribute-bg.webp") no-repeat center 33% / 100%, #fcfcfc;padding-bottom:15vh}
.tribute a{color:inherit;font-weight:900;text-decoration:underline}
.tribute a:hover{color:#d96D00}
#carousel li .trib{padding:1em;background:rgba(255,255,255,0.6);border-radius:0.25em;box-shadow:0.05em 0.05em 0.5em #2e6272;font-size:1.1rem;font-weight:500}
#carousel li .trib-img{float:left;margin-right:1rem;border:0.1em solid #fff;box-shadow:0.1em 0 0.3em #2e6272;border-radius:0.25em}
.helps-puzzle{width:90%;margin:auto;text-align:center}
.helps-puzzle img{width:100%;max-width:300px;height:auto;background:rgba(255,255,255,0.6);border-radius:0.25em;box-shadow:0.05em 0.05em 0.5em #2e6272}
/* Selected reviews */
#review{opacity:0;background:#fff;padding:0 0 15vh 0}
.review{min-height:100lvh;background:linear-gradient(to bottom, rgba(31, 65, 75, 0.15), #fff 10%);margin:3vh 4vw 9vh 4vw;color:#1f414b;border:thin #fff;border-radius:0.33em}
.review img{float:left;width:15%;height:auto;margin:3vh 0 0 3vw;border:0.005em solid rgba(46,98,114,0.25)}
.review h2{margin:0;padding:2vh 0 0;font-size:2.2rem;font-weight:900;text-align:center}
.review .intro{font-weight:700;font-size:1.1rem;margin:2vh 5vw}
.article{margin:10vh 0 0}
.article p{text-align:justify;text-justify:inter-word;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
.review a{color:#1f414b;font-weight:900}
.review a.next{position:sticky;z-index:2;top:2vh;float:right;background:#dbe0e2;font-size:0.8rem;width:fit-content;padding:0.25rem;border-radius:0.33em;border:0.1rem ridge #fff;box-shadow:0.3em 0.3em 0.3em #2e6272}
.review a:hover{color:#d96D00}
.more{opacity:0}
/* Jump to top */
a#gotop{position:fixed;right:4vw;bottom:2vh;display:block;background:#dbe0e2;padding:0.25em;border-radius:0.2em;border:0.1rem ridge #fff;box-shadow:0.1em 0.1em 0.1em #2e6272;color:#1f414b;font-size:6vw;animation-name:fading-gotop,bounce;animation-duration:5s;animation-delay:10s;text-align:center;opacity:0;animation-timing-function:ease-in;animation-fill-mode:forwards}
.review a.next:hover, a#gotop:hover{color:#d96D00;border:0.05rem groove #fff;box-shadow:0.2em 0.2em 0.2em #2e6272}
@keyframes fading-gotop{from {opacity:0}to {opacity:1}}
@keyframes bounce{0%, 20%, 50%, 80%, 100% {transform:translateY(0)}40% {transform:translateY(-20vw)}
60% {transform: translateY(-10vw)}}
@keyframes blinker{50% {opacity:0}}
/* donate_fff et donate_1f414b.php */
.popup-don{position:relative;float:right;top:.33em;width:fit-content;z-index:1;left:100%;margin:0 1vw 0;padding:0 0 .2rem 0;font-size:.6rem;font-weight:normal!important;color:#ffffff;transition:opacity 1s}
@media only screen and (max-width:428px){.popup-don{display:none}}
.popup-don.fadeOut{opacity:0}
.close img{width:.7rem;height:.7rem;background:#fff;vertical-align:middle;margin:0 0 0.2rem!important;box-shadow:none!important;border-radius:.5rem!important;padding:.1rem;cursor:pointer}
a.donate{display:flex!important;justify-content:center;align-items:center;margin-top:.2rem;padding-bottom:.15rem;box-shadow:0.1em 0.15em 0.1em rgba(64,64,64,.4);text-decoration:none;color:#ffffff!important;opacity:1!important;font-weight:900!important;font-size:1.2rem;border:1px solid rgba(255,255,255,.66);border-radius:.5rem}
a.donate:hover{color:#d96D00!important}
.obscur{color:#1f414b!important}
a.obscur{background:#ffffff;color:#1f414b!important;border:1px solid rgba(31,65,75,.66)!important;text-shadow:unset!important}