@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC");
/* @import url("https://fonts.googleapis.com/css?family=Exo+2"); */
@import url("https://fonts.googleapis.com/css?family=Lancelot");

html {
     scroll-behavior: smooth;
     margin: 0px;
}
body {
     background-color: rgba(0, 0, 0, 0.9);
     color: white;
     font-family: "Noto Sans TC", sans-serif;
     margin: 0px;
}
body > div {
     background-color: rgba(0, 0, 0, 0.6);
     max-width: 1350px;
     margin: 0 auto;
     padding-bottom: 1em;
}
#banner {
     width: 100%;
     filter: brightness(0.4);
}
#top {
     position: relative;
}
#top h1 {
     position: absolute;
     bottom: 0;
     /*      right: 0;
     left: 0; */
     font-size: calc(17px + 3vw);
     padding-left: 1em;
}
#t2 {
     text-shadow: 0 0 3px rgba(225, 225, 225, 0.7);
}
#topTitle {
     /*       position: absolute;
     top: 1.2em;
     right: 0;
     left: 0; */
     font-size: 4em;
     text-align: center;
     padding-top: 1em;
     margin-top: 0px;
     /*      background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.63) 25%, rgba(69,146,85,1) 45%, rgba(255,255,255,1) 63%, rgba(255,255,255,1) 65%,  rgba(240,50,25,1) 75%, rgba(0,0,0,0.96) 91%, rgba(0,0,0,1) 100%); */

     background: linear-gradient(135deg, #d21034 32%, transparent 0) 0 -110px,
          linear-gradient(45deg, #d21034 32%, transparent 0) 0 -110px,
          linear-gradient(180deg, #000 48%, #fff 54%, #fff 68%, #007229 74%);

     background-clip: text;
     -webkit-background-clip: text;
     color: rgba(255, 255, 255, 0.3);
     text-shadow: 0 0 4px rgba(225, 225, 225, 0.3);
}
h2 {
     font-size: 2em;
     line-height: 1.3em;
}

h2 {
     text-align: center;
}

#years {
     margin: 0 auto 3em auto;
     max-width: 1000px;
}

#years div {
     margin: 1em;
}
#years h2:last-of-type {
     text-shadow: 0 0 1px red;
     /*      word-spacing:0.3em; */
}

#PAleader {
     max-width: 800px;
     margin: 0 auto;
     flex-wrap: wrap;
}
#tabCtl {
     margin: 0 2vw;
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
      position: sticky;
  top: 0;
     z-index:4;
          background-color: black;
/*        background:linear-gradient(to bottom, #f7f2e9  95%, transparent); */
     border-top:3px solid black;
}
.tabCtlSelected {
/*      border-top-color: red !important; */
/*      border-bottom-color: #f7f2e9 !important; */
     background:#f7f2e9 !important;
/*      background:linear-gradient(to bottom, #f7f2e9  90%, transparent)!important; */
}
#tabCtl a {
     width: 33.2%;
     height: 80px;
     background-size: 100% 100%;
/*      position: relative; */
     /*      border-top: 3px solid #f7f2e9; */
/*      border-top: 3px solid #f7f2e9; */
/*      border-bottom: 8px solid #0a0a0a; */
     text-align: center;
/* line-height: 80px; */
/*      font-size: 1.4em; */
     font-size: calc(10px + 0.8vw);
     color: black;
/*      font-weight: bold; */
     background: linear-gradient(to bottom, lightgray 95%, transparent);
/*      text-shadow: 0 0 2px black; */
     text-decoration:none;
     padding-top: 5px;
}
#tabCtl a:hover {
/*      color: black; */
/*      text-shadow: 0 0 6px white;  */
     text-decoration: underline;
/*      border-top:1px solid red; */
     background-color:#f7f2e9;
}
/* #tabCtl a span {
     position: absolute;
     bottom: 15%;
     left: 2vw;
     font-size: 1.5em;
     color: white;
     font-weight: bold;
     text-shadow: 0 0 2px black;
} */
#tabCtl a:first-of-type {
/*      background-image: url(https://www.mecaforpeace.org/wp-content/uploads/2017/04/img-about-us.png); */
     /*      border-bottom: 10px solid #0a0a0a; */
}
#tabCtl a:first-of-type.tabCtlSelected{
/*      border-bottom-color:#d0ae69!important; */
/*      background:#d0ae69!important; */
     background:url(https://palwatch.org/Storage/Images/2020/SPC-scroll.png) 10% 86% !important;
}
#tabCtl a:nth-of-type(2) {
/*      background-image: url(https://www.mecaforpeace.org/wp-content/uploads/2017/04/bg-events.jpg); */
}
#tabCtl a:nth-of-type(3) {
/*      background-image: url(https://picsum.photos/250/100?random=1); */
}
.tab {
     display: none;
}
#bill.tab {
     display: block;
}
#PAsign img,
#PAsign div {
     width: 265px;
     height: 265px;
}
#worldSign img,
#worldSign div {
     width: 200px;
     height: 200px;
}
#PAleader img,
#PAleader div {
     width: 200px;
     height: 200px;
}
.dImg {
     font-family: alef, "Noto Sans TC", sans-serif;
}
.dImg img {
     z-index: 2;
     transition: 0.5s;
}
.imgTxt {
     background-color: rgba(0, 0, 0, 0.8);
     padding: 5px 15px;
     position: absolute;
     bottom: 3px;
     left: 0;
     z-index: 2;
     font-size: 18px;
     transition: 0.5s;
}
.imgTitle {
     padding: 5px 10px;
     position: absolute;
     top: 1px;
     right: 0;
     z-index: 2;
     font-size: 18px;
     font-weight: bold;
     transition: 0.5s;
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

.dImg *:hover img {
     opacity: 0.2;
}
.dImg *:hover .imgTxt,
.dImg *:hover .imgTitle {
     opacity: 0;
}
.dImg *:hover:before {
     display: none;
}
.txt {
     padding: 0.8em;
     font-size: 1.2em;
     position: absolute;
     top: 0;
     left: 0;
}

#kids img,
#kids > div {
     width: 230px;
     height: 230px;
}
#PAleader .txt {
     max-width: 183px;
}
#PAsign .txt {
     max-width: 243px;
     font-size: 17px;
}
#worldSign .txt {
     max-width: 183px;
}
.dImg a {
     padding: 0px 20px;
     text-decoration: none;
     position: absolute;
     bottom: 8px;
     right: 14px;
     background-color: rgba(0, 0, 0, 1);
     color: pink;
     opacity: 0.5;
     /*      color: lightpink; */
     /*      background-color: rgba(0, 0, 0, 0.3); */
     border-radius: 4px;
     /*      z-index: 3; */
}
.dImg *:hover .txt,
.dImg *:hover a {
     z-index: 3;
}
.dImg a:hover {
     background-color: rgba(0, 0, 0, 0.5);
}
.dImg > div {
     margin: 0.5em;
     background-color: slategray;
     border-radius: 3px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     box-shadow: 0px 0px 6px black;
}
.dImg > div:before {
     content: url("https://poomw.neocities.org/spc/tuch2.png");
     position: absolute;
     right: -2px;
     top: 2px;
     z-index: 3;
     opacity: 0.3;
     transform: scale(0.8);
}
img {
     border-radius: 3px;
}

#video {
     text-align: center;
     margin: 4em 4vw 2em 4vw;
}

#bill {
     color: black;
     font-size: 1.6em;
     line-height: 1.2em;
     font-family: "Lancelot", cursive;
     position: relative;
     top: -15px;
}
#bill img {
     width: 100%;
     height: 100%;
     position: absolute;
top: -35px;
}
#bill > div {
     max-width: 950px;
     margin: 0 auto;
     position: absolute;
     top: 10%;
     left: 0;
     right: 0;
     padding: 1em 8vw;
}
#bill h2 {
     font-size: 2.5em;
}
.act {
     padding: 8px;
}
.act > div {
     margin-left: 1em;
     margin-bottom: 8px;
}

.sec {
     background-color: #f7f2e9;
     border-radius: 3px;
     padding-bottom: 2em;
     margin: 0 2vw 7vh 2vw;
}

.txtSec {
     color: black;
     padding: 1em;
     line-height: 2em;
     max-width: 1200px;
     margin: 0 auto;
}
.txtSec li {
     list-style-type: none;
}
.txtSec b {
     /*      font-style: italic; */
     font-size: 1.1em;
}
iframe {
     max-width: 98%;
     border: 6px solid white;
     border-radius: 4px;
     background-color: black;
     /*      background:black url('https://loremflickr.com/320/240') no-repeat center center; */
}

#popTube {
     /* visibility: hidden; set inline so not seen on page load */
     opacity: 0;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     text-align: center;
     display: flex;
     transition: 1s;
     z-index: 4;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     /*      background-color:black; */
     /*      background:url('https://loremflickr.com/320/240') no-repeat center 48%; */
}


#close {
     cursor: pointer;
     font-weight: bold;
     margin-top: 5px;
     border-radius: 4px;
     width: 250px;
     background-color: black;
     padding-bottom: 3px;
}
#close:hover {
     background-color: darkslategray;
}
hr {
     margin: 0 3em;
     border-top: 0px solid;
}
.flexSA {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
}
.flex {
     display: flex;
}
.flexCl {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

/* .txtV{
     writing-mode: vertical-lr;
     font-size:2em;
} */
/* #bill ul{
     list-style-type: none;
} */
/* act {
     font-weight: bold;
     font-size: 1.3em;
} */
/* dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
     font-weight: bold;
     font-size: 1.1em;
}

dd {
  grid-column-start: 2;
          margin-left:15px;
} */