/*  dgbase.css 20230302  */
root {
    --main-bgcolor: #f3f4f6;
    --title-color: #262626;
    --text-color: #525252;
    --font-family: "Arial", sans-serif;
}
body {
    background:#fff;
    color:#000;
    font-size: 16px;
    font-size: clamp(1rem, calc(0.93rem + 0.33vw), 1.875rem);
    font-family: var(--font-family);
}
* {box-sizing: border-box;}
img {width: 100%;height: auto;}
.inline {display: inline-block;}
.logo {
    display: inline-block;
    border:0.4rem solid;
    border-radius:50%;
    font-family:sigmarregular, sans-serif, arial;
    font-size: 1.2rem;
    font-size: clamp(1.2rem, -0.875rem + 8.333vw, 8rem);
    font-weight:800;
    line-height:77%;
    margin-right:1rem;
    padding: 0.3rem 0.2rem .1rem 0.12rem;
    vertical-align:top;
}
@media (min-width:600px) {
    .logo {line-height:82%; padding:0.6rem 0.5rem 0 0.4rem;}
}
.title {
    display: inline-block;
    font-family:sigmarregular, sans-serif, arial;
    font-size: 1.2rem;
	/*font-size: clamp(2rem, -0.875rem + 9.333vw, 8rem);*/
	font-size: clamp(2rem, -0.12rem + 9.333vw, 8rem);
    font-weight: 600;
    margin: 0;
}
a, a:link, a:visited {color: blue;}
.previous {display: inline-block;position: relative;vertical-align: super;}
.previous a {padding: 1rem;vertical-align: super;}

/* h1 {font-size:2.4rem;margin:0;padding:1rem 0;}
@media (min-width:600px) {
    h1 {padding-bottom:3rem;padding-top:5rem;}
}
*/
h1 {
    font-size:3rem;margin-top: 0;
    font-size: clamp(2rem, -0.875rem + 9.333vw, 8rem);
}
h2 {font-size: clamp(1.5rem, calc(0.93rem + 0.93vw), 4rem);margin:0 auto;}
h3 {font-size: clamp(1.2rem, calc(0.93rem + 0.83vw), 2rem);}
p {font-size: clamp(1rem, calc(0.93rem + 0.43vw), 1.875rem);
    font-weight:bold;max-width:550px;margin:1rem auto;}

section {border: 1px solid #000; border-radius:1rem;
    max-width:550px;margin:3rem auto 1rem auto;padding: 1rem;}

video {
	max-width: 568px;
	max-height: 320px;
}

.page , .page2 {position: relative;}

@media print {
    .page {display: none;}
}

.container-ss {
    background-color: #fdf5e6;
     /* color: #fff;*/
    margin: 2vh auto;
      /*width: 90vw; height: 66vh;*/
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    resize: both;
}

.taLeft {text-align: left;line-height: 1.4rem;}

.listn {
    list-style-type: none;
    padding: 0.4rem;
    margin: 0;
    border: 1px solid #000;
    border-radius: 1rem;
    background: #effae1e5;
    opacity: 0.6;
}

.wrap {opacity: 1.0;position: relative;z-index: 2}
/* .wrap {position:absolute;top:0;opacity: 1.0;}   w320 163%, w360 130% */

.bgrd {
    background-image: url(../image/20190509-480w.webp);
    background-size: cover;
    background-position: left top;
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    height: 100%;/* opacity: 0.6; */
}

@media (min-width:768px) {
    .bgrd {background-image: url(../image/20190509-800w.webp);}
}
@media (min-width:1080px) {
    .bgrd {background-image: url(../image/20190509-1080w.webp);}
}
@media (min-width:2560px) {
    .bgrd {background-image: url(../image/20190509-2560w.webp);}
}
@media (min-width:3000px) {
    .bgrd {background-image: url(../image/20190509-4032w.webp);}
}

/* header , main , footer {opacity: 1.0;} */

footer {margin:1rem auto 0 auto; padding-bottom: 1rem;}
.copy {font-size: 1.3rem;}

.basemenu {
    margin: 0 auto 1rem;
    padding: 0;
    text-align: center;
}
.basemenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.basemenu li {
    display: inline-block;
    margin:1.4rem 0.2rem;
}
.basemenu a {
    background: #d9d3d3;
    background: #fff3f3;
    border-radius: 0.35rem;
    font-size: clamp(1.3rem, calc(0.93rem + 0.53vw), 1.875rem);
    font-weight: bold;
    padding: 1rem;
}
.basemenu a:link, .basemenu a:visited, .basemenu a:active {
    color:#000;
}
.basemenu a:hover {
    box-shadow: 0 4px 4px 4px #053d05;
    color:#053d05;
    padding: 0.5rem 1rem 0.5rem 1rem;
}
.basemenu a:active {color:#fff;}

.center {margin: 1rem auto; max-width: fit-content;}

.indent-left {
    margin: 1rem 0.5rem 0.5rem 7rem;
    font-size: 1.6rem; font-weight: bold; text-align: left;
}
.indent-left > dt {margin-bottom: 0.7rem}
.indent-left > dd {margin-left: 1rem;}

main {padding-top: 1rem; padding-bottom: 1rem;}

.font1 {font-size: 1rem;}
.font1-3 {font-size: 1.3rem;}
.font1-6 {font-size: 1.6rem;}
.font1-8 {font-size: 1.8rem;}

.shadow-box {
    -webkit-box-shadow: 4px 2px 8px #323232;
	box-shadow: 4px 4px 8px #323232;
	margin: 10px 1rem;
}
/* ver 2023-04-15  #d9d3d3; lite gray, #323232; blackish */

/* Begin popout classes - October 2013 */
.popout {position:relative;margin:1rem;}

.popout-link {
    /*max-width:400px;max-width:100px;*/
    margin:0 auto;text-align:center;
}
.popout-link a {text-decoration: underline;}
.popout-link img {
    height: auto;
    max-height: 300px;
    width: auto;
    max-height: 100px;
    max-width: 100px;
}/* for small screens */
.popout-link:hover ~ .popout-hover, .popout-item:hover {display: block;}

.popout-item {
    background-color: #BFBFBF;
    border: 1px solid #999999;
    box-shadow: 1px 1px 10px #E6E6FA;
    padding: 8px;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 303px;
    z-index: 337;
} /* bottom: 0; width: 100%; 2023-07-13*/

.popout-img {border:0;height:auto;width:99.9%;}
.popout-article {padding:4px;text-align:left;}
.popout-title {color:#d51bce;text-align:center;margin:0.5rem;}/*#FF0000; red */
.popout-title:before {content: open-quote;}
.popout-title:after {content: close-quote;}
.popout-title-src {text-decoration: underline;}
.popout-title-txt {color: red;}
.popout-hover {display: none;}

.popout-item a {color: #00008B}
.popout-item a.close {
    background-color: #BFBFBF;
    color: red;
    font-size: 1.5rem;
    position: absolute;
    top: -2.0em;
    right: 0.02em;
    padding: 0 .8rem;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-shadow: 2px 1px 10px #E6E6FA;
    z-index: 347;
}/* overflow: hidden; removes underline bar, text-indent: 100%; hides text */
.popout-item a.close::before {content: "\02613";font-size:2.5rem;}
.popout-item a.close:hover {display:none;}
.popout-item a:hover {color:#000;}

 /* 2023-07-12 for time-for-ukraine.html */
.popout-item img {width:98%; height: auto; max-height: 82vh;max-width:96vw;}
.popout-list {position: relative;margin: 1rem;}
.popout-item {
    position: fixed;top: 6rem; /*margin: 1rem auto;*/
    padding:0;
} /* width:100%; max-width: 100vw;*/
.popout {display: inline-block;/* max-width: 100px;*/}
/*@media (min-width:677px) {.popout-item img {width: auto;}*/

/* end popout classes */