body,html,textarea{
font-family:'Quicksand', sans-serif;font-size:18px;
}
body,html{
position:relative;
height:100%;
width:100%;
overflow:;
padding: 0;margin: 0; 
color:#111;
}
.fnta{
font-family: 'Playfair Display', serif;	
}
.fntb{
font-family: 'Rochester', cursive;	
}
.pageWrap{
position:relative;
width:100%;
padding:2% 5%;
}
.float{
display:inline-block;
margin-right:10px;
vertical-align:top;
}
#pageHead{
position:fixed; /*relative*/
display:flex;
align-items:center;
top:0px;left:0px;
width:100%;
height:17vh;
/*transition:background 10s ease,top 300ms;*/
background-color:#FFF;
z-index:1000;
transition:all 300ms ease;
}
#pageHead.sticky{
height:10vh;
box-shadow:5px 0 5px red;
}
#pageHead #logo{
position:relative;
display:flex;
flex-direction:column;
text-align:center;
padding:20px;
height:100%;
text-align:center;
}
#pageHead #logo a{
display:block;
height:100%;
text-align:center;
}
#pageHead #logo img{
height:100%;
}
#pageHead #logo_title{
color:#152fa9;
transition:opacity 600ms ease;
opacity:1;
}
#pageHead.sticky #logo_title{
opacity:0;
}
#app_menu,#back_menu,#tag_menu{
display:none;
}
#adminMenu{
padding:5px;
display:flex;
font-size:80%;
justify-content:center;
}
#adminMenu li{
padding:10px;
background-color:rgb(255,255,255,0.2);
color:rgb(0,0,0);
}
#adminMenu li.title{
filter:invert(0.5);
}
#pageMenu{
flex:1 1 auto;
display:block;
text-align:center;
}
#pageMenu>ul{
position:relative;
display:flex;
justify-content:flex-end;
}
#pageMenu>ul>li{
position:relative;	
font-size:80%;
font-weight:bold;
padding:0 10px;
}
#pageMenu a,#pageMenu span{
font-weight:bold;
display:inline-block;
color:#1751A8;
padding:10px 20px;
width:100%;
border-bottom:1px solid #E6E9EC;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
/*fade transition*/
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
transition: background-color 300ms ease;
}
#pageMenu a.active,#pageMenu a:hover{
color:#CB1232;
background-color:#FFF;
}
.subMenu>ul{
position:absolute;
display:none;
background:#FFF;
width:100%;
box-shadow:0px 1px 5px 0px rgb(0,0,0,0.25);
text-align:left;
}
.subMenu:hover>ul{
display:flex;
flex-direction:column;
}
.subMenu a i{
width:25px;
}
#pageBody{
position:relative;
min-height:550px;
padding:17vh 20px 20px 20px;
background:#FFF;
letter-spacing:0.5px;
}
#pageFoot{
background:#79A9C6;
text-align:left;
color:#FFF;
}
#pageFoot a{
color:#FFF;
}
#pageFoot>.pageWrap{
display:flex;
}
#sitecredits{font-size:80%;}
#menuAdmin{
background:#F4E6D7;
padding:10px;
}
.adminedit{
display:inline-block;
padding:2px 5px;
background:#F4E6D7;
font-size:80%;
}
a{color:rgb(92,73,35); text-decoration: none; font-weight: normal;cursor:pointer;}
a:hover{color:#000;}
.none,.none:hover{
text-decoration:none !important;
border-bottom:none !important;
}
h1{
font-family:'Quicksand', sans-serif;
font-size:175%;
font-weight:bold;
font-style:normal;
color:#000040;
}
h2{
font-family:'Quicksand', sans-serif;
color: #000;
font-weight:bold;
font-size:150%;
margin:15px 0px 20px 0px;padding:0px;
}
h3{ 
font-family:'Quicksand', sans-serif;
font-style:normal;
color: #000;
font-size:130%;
color:#003;
font-weight:bold;
margin-bottom:5px;
padding:15px 0px 20px 0px;
line-height:30px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
ul.classic{margin-left:15px;}
ul.classic li{margin-left:15px;display:list-item;list-style:disc outside none;}
button,.btnMain{
display: inline-block;
padding:15px 25px !important;
outline: none;
border: none;
border-radius: .3em;
text-transform: uppercase;
background-color: #3784E1;
color: rgb(255,255,255);
cursor: pointer;
transition: all .2s ease-in-out;
background-size: 100% 100%;
background-position:center;
}
.btnMain:focus,.btnMain:hover{
color: #363636;
background-color: #FFF;
}
.btnMain:active {
}
.table1 td{
padding:3px;
}
.tabs{
position:relative;
z-index:100;
}
.tabs li{
position:relative;
display:inline-block;
padding:10px 30px;
border:1px solid #AAA;
background:#EFEFEF;
cursor:pointer;
}
.tabs li.active{
position:relative;
border-bottom:1px solid #FFF;
border-top:2px solid #CC0000;
top:0px;
background:#FFF;
}
.tabContent{
z-index:90;
position:relative;
top:-1px;
border:1px solid #AAA;
padding:7px;
}
.tabContent>li{
display:none;
}
#page-navig {
display:flex;
height:20vh;
color: #999999;
background:#F1F2F3;
align-items:center;
}
#page-navig li{
padding:0 0 0 15px;
}
#page-navig li:not(:last-child)::after{
content:'\f054';
font-family:'Font Awesome 5 Free';
font-weight:600;
padding-left:15px;
}
#page-navig a {
font-size: 120%;
color: #000000;
}
.ackMsg span{
display:inline-block;
border:5px solid #FFF;
padding:10px 80px;
margin:20px;
border-radius:10px;moz-border-radius:10px;webkit-border-radius:10px;
font-size:600%;
background:#CCC;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.box1{
border: 12px solid #FAFAFA;
background:#FFF;
padding:5px;
border-radius:4px;moz-border-radius:4px;webkit-border-radius:4px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.box2 {
padding: 5px;
border: 2px solid #F2E6D2;
}
.box3{
background:#617361;
color:#FFF;
padding:10px;
border-radius:4px;moz-border-radius:4px;webkit-border-radius:4px;
}
.tablerow1 {
border-bottom: 1px dotted #999999;
padding: 10px 10px 10px 50px;
}
.b1{
padding-left:20px;
}
.b1 li{
border-left:7px solid #DBE3DF;
transition:border 200ms;
margin:5px 0;
}
.b1 li:hover{
border-left:7px solid #000;
}
.b2>li{
padding-left:20px;
border-left:7px solid #DBE3DF;
border-bottom: 1px dotted #999999;
padding:5px;
margin:2px 0;
}
.b2>li:hover{
border-left:7px solid #000;
}
#list_content ul,ul#list_content{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#list_content li{
flex-basis:25%;
padding:2vmax;
}
#list_content li img{
max-height:15vmax;
height:auto;
width:100%;
object-fit:cover;
}
#list_content li b{
display:block;
}
#list_content li span{
font-size:80%;
}
#list_content a{
display:block;
color:#555;
}
#list_content a:hover{
color:#000;
}
.cols,.toBreak{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
padding:5px;
}
.cols li,.toBreak li{
padding:10px;
flex:1 1 auto;
}
.responsive{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
.responsive>*{
padding:10px;
}
.tblresponsive tr td{
padding:5px 2px;
}
.tblresponsive tr.title td{
background:#EEE;
border-bottom:2px solid #CCC;
}
.tleft{text-align:left}
.tcenter{text-align:center}
.tright{text-align:right}
.cellmiddle{display:inline-block;vertical-align:middle;padding:5px;}
.c25p{width:25%;}.c33p{width:33%;}.c50p{width:50%;}.c75p{width:75%;}
.clear{clear:both;}
.social-icons {text-align:right;}
.social-icons ul{display:flex;}
.social-icons a{display:block;transition:background-color 0.3s;padding:20px;}
.hmiddle{left:50%;transform:translate(-50%,0);}

/*form  components*/
#msgPage,.msgAck,.msgSuccess {
font-size: 12px;
font-weight: bold;
color:#003300;
margin: 5px;padding: 10px;
background:#CFDEC5;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgErr,.msgFail {
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 7px;
background:#F0E4BF;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgForm{
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin:10px 0;padding: 10px;
background:#F5F88F;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgAck li,.msgSuccess li,.msgErr li,.msgFail li{
list-style-type:circle;
padding:3px 0px;
}
.msgTip{
font-size:85%;
}
.listDefault li{
margin-left:15px;
list-style-type:circle;
list-style-position:inside;
}
.listBasic li{
padding: 10px 0px;
}
.listBullets li{
list-style:outside circle;
padding: 10px 0px;
margin-left:25px;
}
input[type=submit],input[type=button]{
padding:5px 10px;
}
input[type=radio]{
position:relative;
top:2px;
margin-right:3px;
}
input[type=text],input[type=password],input[type=number],
select,textarea{
display:inline-block;
font-size:16px;
padding:10px;
border:none;
width:100%;
background:transparent;
}
input:focus,texarea:focus,select:focus{
outline: none;
border-color:rgb(133,100,33) !important;
}
input:hover:not([type=radio]),input:focus:not([type=radio]){border-color:rgb(234,207,100)}
input::placeholder,select.placeholder{
color:rgb(114,103,65);
}
select option.placeholder{
display:none;
}
.component{
width:100%;
}
fieldset legend{
font-size:14px;
font-weight:bold;
}
fieldset>ul>li{
display:flex;
flex-direction:row;
position:relative;
margin:10px 0px;
padding:5px;
border-top:1px dotted #EEE;
background:rgba(255,255,255,0.85);
border-bottom:2px solid rgb(242,235,142);
}
fieldset>ul>li>label>span,fieldset>ul>li>span{
flex:1 1 20%;
min-width:200px;
font-size:90%;
color:#888;
}
fieldset>ul>li>label>div,fieldset>ul>li>div{
flex:1 1 80%;
}
fieldset .clean{
background:none;border:none;
}
fieldset .custom{
padding:0 10px;
}
fieldset error{
position:relative;
display:block;
font-size:80%;
padding:0 10px;
color:red;
}
#filterConditions{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
background:rgb(228,220,194);
padding:10px;
}
#filterConditions li{
padding:10px;
display:flex;
flex-wrap:no-wrap;
justify-content:center;
align-items:center;
}
#filterConditions li>span{
min-width:0;
white-space:nowrap;
flex:none;
}
#filterConditions #btnGo{
width:100%;
text-align:center;
}

@media screen and (min-device-width:650px){ 
.monitoroff{display:none;}
}

/*site specific*/
#headTop{
position:absolute;
top:100%;
left:50%;transform:translateX(-50%);
z-index:310;
background:url("imgs/sun.png?4") no-repeat;
width:35vw;height:35vw;
background-size:contain;
filter:brightness(10%) hue-rotate(0deg);
/*animation:sunrise 5s linear forwards,sunshine 10s linear 7s infinite;*/
}
#logo small{display:block;font-size:60%;color:#000;}
@keyframes sunrise{
	0% {top:90%;filter:brightness(10%) hue-rotate(0deg);}
	100% {top:-10%;filter:brightness(150%) hue-rotate(-20deg);}
}
@keyframes sunshine{
	0% {filter:brightness(150%) hue-rotate(-20deg);}
	25% {filter:brightness(120%) hue-rotate(0deg);}
	50% {filter:brightness(140%) hue-rotate(-10deg);}
	75% {filter:brightness(110%) hue-rotate(-5deg);}
	100% {filter:brightness(150%) hue-rotate(-20deg);}
}
#logo_title{
font-size:1.5vmax;
}
#footMenu{
font-size:85%;
}
.category{
font-size:60%;
display:block;
color:#AAA;
}
#donate{
padding:20px 10px;
text-align:center;
background:#F1F0E2;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}