* {position:relative; box-sizing:border-box; margin:0; padding:0; }

html,body{ font-family: "Segoe UI Light", "Segoe UI", Arial, Helvetica, sans-serif; }

html,body{ font-size:1rem; color:#ccc; background-color:black; }

.modal{ color:#333; }

.navbar-collapse{flex-grow:unset;}

	a, a:visited {text-decoration:none;color:dodgerblue!important;}

	a:hover {border-bottom:1px solid dodgerblue!important;}

#msg{min-height:200px;}

.form-floating{margin-bottom:10px;}

.cardwid{ max-width: 300px; margin:0 0 10px 10px;}

.hidden{ display:none; }

.fgGold, .fgGoldRod, .fgGoldenRod{ color:gold; }

.fgCyan{ color:cyan; }

.fgGrey{color:grey;}

.fgYellow{color:Yellow;}

.fsNormal{font-style:normal;}

.dib{display:inline-block;}

.plr5{padding:0 5px;}



#sosSeeMore{width:fit-content;color:darkcyan;cursor:pointer;}

#sosSeeMore:hover{color:cyan;}



#ctalert{display:none; position:absolute;bottom:0;left:0;font-size:4rem;color:gold;transform:translate(40px,-140px) rotate(-30deg); text-shadow: 1px 2px 1px #222; }

#nowork{display:none;cursor-events:none; position:fixed;bottom:0;left:0;font-size:8rem;color:gold;transform:translate(40px,-140px) rotate(-30deg);}

.thbolay{position:absolute;top:0;left:0; width:100%;height:100%;  opacity:0.5; }

.fm{background:darkblue;}

.ce{background:darkgreen;}

.mc{background:firebrick;}

.st{background:darkorange;}



#lb{z-index:1;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}

#lb{display:none;position:fixed;opacity:0;}

#lb{top:0;left:0; justify-content:center;align-items: center; background: #111111f7;}

    #inner{width:900px;padding:2vh 2vw;background:rgba(0,0,0,0.7)}

        #closex{position:absolute;top:1px;right:1px;padding:1px 10px;font-size:2.2rem;color:#aaa;xxxborder:1px solid #aaa;border-radius:5px;z-index:9;}

            #closex:hover{color:red;xxxborder:1px solid #c6e3ff;cursor:pointer;}

        #lbBody{width:100%;height:100%;}

            #videoDiv{width:100%;height:100%;xxxpadding:5%;}

                #videoImg {text-align:center;}

                #videoImg img{min-width:100%;max-width:100%;max-height:85vh;text-align:center;overflow:hidden;}

                video#video{width:100%;max-height:78vh;}

                    .imgMp3{height:60px;}

            #explan{font-size:1.1rem;color:#ccc;font-style:italic;}

			#loading{position:absolute;top:5px;left:5px;font-size:3rem;color:gold;text-shadow: 1px 2px 1px #222; }



#lbImg{z-index:8;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}

#lbImg{display:none;position:fixed;opacity:0;}

    #innerImg{padding:2vh 2vw;background:rgba(0,0,0,0.7);XXXwidth:900px;}

        #closexImg{position:absolute;top:1px;right:1px;padding:1px 10px;font-size:2.2rem;color:#aaa;xxxborder:1px solid #aaa;border-radius:5px;z-index:9;}

            #closexImg:hover{color:red;xxxborder:1px solid #c6e3ff;cursor:pointer;}

        #lbImgBody{width:100%;height:100%;}

            #theImgDiv{width:100%;height:100%;xxxpadding:5%;}

            #explanImg{font-size:1.1rem;color:#ccc;font-style:italic;}



.fadeIn{animation:fadeIn ease 1.5s forwards;}

@keyframes fadeIn {

    0% {opacity:0;}

    100% {opacity:1;}

}



.robot { width:250px;max-width:250px; text-align:right; color:#ccc; }

#robot{ margin-left:10px;width:280px;}

.spacer {flex-grow: 1;}

#msgsent{display:none;position:absolute;bottom:0;left:0; font-size:7rem;font-weight:bold; color:gold; transform: translate(200px, -200px) rotate(-30deg); }

#modal-contact .modal-body form input::placeholder {color:#1e90ff63; font-weight:bold; } /* dodgerblue with opacity */

#modal-contact .modal-body form textarea::placeholder {color:#1e90ff63; font-weight:bold; } /* dodgerblue with opacity */



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

/*  Jack T. Chick JTC  */

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

#jtcMenuDiv{min-height:85vh;height:90vh;}

	#jtcMenuInner{display:flex;flex-direction:column;padding:20px 50px;color:#ccc;background:#1b4165;}

		#jtcMenuInner > div{padding-left:10px;cursor:pointer;}

		#jtcMenuInner > div:hover{background:#2b80d3}

#coverDiv{position:fixed;top:200px;right:40px;}

	#coverDiv > img{width:200px;height:auto;}

#comicDiv{position:absolute;top:0;left:0; width:100vw;height:90vh;background:#000000dd; z-index:10;}

	#comicCloseX{font-size:3.5rem;color:#aaa;position:absolute;top:25px;right:22%; cursor:pointer;z-index:11;}

		#comicCloseX:hover{color:white;}

	.arrows{font-size:10rem;color:#aaa;position:relative;XXXtop:40vh;user-select:none; cursor:pointer;z-index:11;}

		.arrows:hover{color:white;}

		.arrows:active{color:cyan;}

		#left {left: -50px;}

		#right{right:-50px;}

	#comicInner{margin-top:55px;padding:20px;}

		#comicInner img{width:auto;height:95vh;}



.fcc{display:flex;justify-content:center;align-items:center;}

.olay{position:fixed;top:0;left:0;width:100vw;height:100vh;}

.onTop{z-index:20 !important;}



#loaderDiv{background:#000a;pointer-events:none; z-index:-1; display:none;}

.taloader {

  width: 60px;

  aspect-ratio: 1;

  display: flex;

  color: #ccc; /* #0066ee77; /* orig #000 */

  border: 4px solid;

  box-sizing: border-box;

  border-radius: 50%;

  background: 

    radial-gradient(circle 5px, currentColor 95%,#0000),

    linear-gradient(currentColor 50%,#0000 0) 50%/4px 60% no-repeat;

  animation: l1 2s infinite linear;

}

.taloader:before {

  content: "";

  flex: 1;

  background:linear-gradient(currentColor 50%,#0000 0) 50%/4px 80% no-repeat;

  animation: inherit;

}

@keyframes l1 {

  100% {transform: rotate(1turn)}

}