/*modal Menu*/
.modal {display: block; position: fixed; z-index: 9999; left: 0; top: 0;  overflow: auto; width: 100%; height: 0; padding: 0 20px; transition-property: height width opacity; transition-duration: 0.3s}
.modal .close{ position: absolute; cursor: pointer; right:0; top: 0; opacity: 1; padding: 3vh; z-index: 99; font-size: 2rem; }
.modal .close img{ cursor: pointer;}

.modal > .container{ max-width: 600px; padding: 40px 10px;  position: relative; top: 5vh; }
.modal .cover { height: 240px; 	background-size:cover; background-repeat: no-repeat; background-position: top center; }
.modal .title h2{  text-align: center; font-size: 34px; }
.modal .info { margin: 10px 5px; display: block; text-align: right;}
.modal .info img{	height: 16px;	margin: 0 3px; vertical-align: middle;}
.modal img{ max-width: 100% }

.modal.opened{ height: 100%; }

body.modalopened{ overflow: hidden; }

.onlymodal{ display: none; }
.modal .onlymodal{ display: block; }

/* ul internal description style */

main .text ul, main .description ul,
modal .text ul, modal .description ul{ padding-left: 1em }

/* header */
html{ scroll-behavior: smooth; }

header .starcontainer{ position: relative; top: -100%}
header .starred-bg{ position: absolute; }
header .header-content{  }


.navbutton{ mask-image: url(../images/curve-button.svg); 
    -webkit-mask-image: url(../images/curve-button.svg); 
    mask-clip: padding-box; -webkit-mask-clip: padding-box;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center; 
    margin-top:  -66px}

.minified{ position: fixed}