/**** BEGIN basic stylings ******/ 

* {
   text-decoration:none;
   list-style:none;
   margin:0px; 
   padding:0px; 
   outline:none;  
} 

body {
   color:#C8C8C8;
   background-color:#f4f5f2;
   font-family: Arial;
   font-size: 1vw;
}



/* debugging background colors */
/*
@media only screen and (min-width: 1601px)  { body { background-color: red; }}             
@media only screen and (max-width: 1600px)  { body { background-color: orange; }}          
@media only screen and (max-width: 1440px)  { body { background-color: yellow; }}          
@media only screen and (max-width: 1024px)  { body { background-color: lightgreen; }}      
@media only screen and (max-width:  800px)  { body { background-color: cyan; }}            
@media only screen and (max-width:  600px)  { body { background-color: blue; }}            
@media only screen and (max-width:  414px)  { body { background-color: indigo; }}           
@media only screen and (max-width:  375px)  { body { background-color: violet; }} 
@media only screen and (max-width:  319px)  { body { background-color: #ddd; }}  
*/


p {
   font-family: Arial;
   font-size: 1wv;
   color: #333333;
   margin: 10px;
}


table {
   width:  96%;
   margin: 0px;
   margin-top: 25px;
   margin-left: auto;
   margin-right: auto;
   border-collapse: collapse;
}

table th, td  {
   color: #333333;
   font-family: Arial;
   padding:5px;  
}

table.dashboard, .dashboard.th, .dashboard.td {
   width: 768;
   border-style:none;
   padding: 0px;
}

table.footnotes, .footnotes.th, .footnotes.td {
   width:77%;
   border-style:hidden;
   font-size: 1.0vw;
}

p.footnotes {
color: #333333;
font-size: 1.0vw;
left: 15%;
}

li { margin-left:40px; padding:0px }

/***** END basic stylings ******/ 





/***** BEGIN Collapsible Menu ******/ 

   /* For the 'About Page' Menu */

.collapsibleMenuOuterContainer {
   background-color: #F8F8F8;
   margin-top: 20px;
   margin-right: auto;
   margin-left: auto;
   border: 2px solid #9aa22b; 
   border-radius: 28px;

}

@media only screen and (min-width: 1601px)  { .collapsibleMenuOuterContainer { width: 1534px; }}
@media only screen and (max-width: 1600px)  { .collapsibleMenuOuterContainer { width: 95.5%; }}
@media only screen and (max-width: 1440px)  { .collapsibleMenuOuterContainer { width: 95.0%; }}
@media only screen and (max-width: 1024px)  { .collapsibleMenuOuterContainer { width: 94.5%; }}
@media only screen and (max-width:  800px)  { .collapsibleMenuOuterContainer { width: 94.0%; }}
@media only screen and (max-width:  600px)  { .collapsibleMenuOuterContainer { width: 93.5%; }}
@media only screen and (max-width:  414px)  { .collapsibleMenuOuterContainer { width: 93.0%; }}
@media only screen and (max-width:  375px)  { .collapsibleMenuOuterContainer { width: 92.0%; }}

.collapsibleMenuInnerContainer {
   border: 0px solid #ccc; 
}

.collapsibleMenu {
   background-color: #9AA22B;
   color: #F8F8F8;
   cursor: pointer;
   border: none;
   text-align: left;
   outline: none;
   font-family: Arial;
   border: 0px solid #9AA22B;  /* border: 1px solid #f9f9f9; */
 }

@media only screen and (min-width: 1601px)  { .collapsibleMenu { padding: 20px;  font-size: 20.0px;   width: 1534px; }}
@media only screen and (max-width: 1600px)  { .collapsibleMenu { padding: 20px;  font-size: 19.5px;   width: 100%;   }}
@media only screen and (max-width: 1440px)  { .collapsibleMenu { padding: 19px;  font-size: 19.0px;   width: 100%;   }}
@media only screen and (max-width:  600px)  { .collapsibleMenu { padding: 18px;  font-size: 18.0px;   width: 100%;   }}

.collapsibleMenuFirstItem { border-top-left-radius:    25px;  border-top-right-radius: 25px;    }
.collapsibleMenuLastItem  { border-bottom-left-radius: 25px;  border-bottom-right-radius: 25px; }

.collapsibleMenuActive, .collapsibleMenu:hover { color: #F8F8F8c4;  }  /* background-color: #9AA22Bc4; */
 
.collapsibleMenuHeader {
   font-size: 1.2em;
   font-weight: 600;
   padding-top: 8px;
   padding-bottom: 4px;
}

.collapsibleMenuContent {
   padding: 0px 10px 0px 10px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   background-color: #F8F8F8;
   color: #494949;
   font-family: Arial;
   font-size: 16px;
}
  
.collapsibleMenuContent a       { text-decoration: none; color: #494949; }
.collapsibleMenuContent a:hover { text-decoration: none; color: #666666; }


 /***** END Collapsible Menu ******/






/***************************************
     TILES tileTitle, tileText      
***************************************/


/******  BEGIN BIG Tile  *********/

.bigTileContainer {
   position: relative;
   float: left;
   background-color: #F8F8F8;
   border: 2px solid #ccc;
   border-radius: 25px;
   margin: 0  1%  0  1%;    /* top, right, bottom, left */
   transition: all 1.0s ease-in-out;
}
                                                                                                 
@media only screen and (min-width: 1601px) { .bigTileContainer { width: 1534px; }}   /* 3x wide  Max red    */   
@media only screen and (max-width: 1600px) { .bigTileContainer { width: 99.40%; }}   /* 3x wide  XXL orange */
@media only screen and (max-width: 1440px) { .bigTileContainer { width: 99.40%; }}   /* 3x wide   XL yellow */
@media only screen and (max-width: 1024px) { .bigTileContainer { width: 99.00%; }}   /* 2x wide    L green  */
@media only screen and (max-width:  800px) { .bigTileContainer { width: 99.75%; }}   /* 1x wide    M  cyan  */
@media only screen and (max-width:  600px) { .bigTileContainer { width: 100.0%; }}   /* 1x wide    S  blue  */
@media only screen and (max-width:  414px) { .bigTileContainer { width: 99.82%; }}   /* 1x wide   XS purple */
@media only screen and (max-width:  375px) { .bigTileContainer { width: 99.82%; }}   /* 1x wide  XXS violet */

@media (max-aspect-ratio: 3/6)                             { .bigTileContainer { height: 60vh; }}
@media (min-aspect-ratio: 3/6) and (max-aspect-ratio: 3/4) { .bigTileContainer { height: 75vh; }}
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) { .bigTileContainer { height: 75vh; }}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) { .bigTileContainer { height: 75vh; }}
@media (min-aspect-ratio: 4/3)                             { .bigTileContainer { height: 75vh; }}

/* ADDED 7/26/2024 */
.bigTileContainerResized {
   height: 50vh;
   width: 50%;
}


.bigTileContents {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   padding: 12px 12px 0px 12px;   /* top, right, bottom, left */
   text-align: center;
   overflow: hidden;
   border-radius: 25px;
}

/******  END BIG Tile  *********/




/****** START Standard Tiles  *********/



table.standardTilesTable {
   width: 100%; 
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: auto; 
   margin-right: auto;
}

@media only screen and (min-width: 1601px) {table.standardTilesTable { width: 1600px; }}  /* 1600px */

/* button { width: 1200px; max-width: 1200px; overflow:hidden; table-layout:fixed } */

table.standardTilesTable tr { height: 100%; padding: 30px  0px 30px  0px;}    /* top, right, bottom, left */
table.standardTilesTable td { width:  100%; padding:  0px 15px  0px 15px;}    /* top, right, bottom, left */

.standardTileContainer {
   position: relative;
   float: left;
   background-color: #F8F8F8;
   border: 2px solid #ccc;
   border-radius: 25px;
   transition: all 1.0s ease-in-out;
 }

 .standardTileContainerBlack {
   position: relative;
   float: left;
   background-color: #000000;
   border: 2px solid #ccc;
   border-radius: 25px;
}
                                                                                                              /* top, right, bottom, left */
@media only screen and (min-width: 1601px) { .standardTileContainer { width: 31.05%; padding-top: 25.00%; margin: 0   1.00%   1.7%   1.00% }}   /* 3x wide  Max  red    */   
@media only screen and (max-width: 1600px) { .standardTileContainer { width: 30.92%; padding-top: 25.00%; margin: 0   1.00%   2.0%   1.00% }}   /* 3x wide  XXL  orange */
@media only screen and (max-width: 1440px) { .standardTileContainer { width: 30.92%; padding-top: 25.00%; margin: 0   1.00%   2.6%   1.00% }}   /* 3x wide   XL  yellow */
@media only screen and (max-width: 1024px) { .standardTileContainer { width: 46.88%; padding-top: 37.50%; margin: 0   1.20%   3.2%   1.20% }}   /* 2x wide    L  green  */
@media only screen and (max-width:  800px) { .standardTileContainer { width: 97.50%; padding-top: 75.00%; margin: 0   1.30%   4.0%   1.30% }}   /* 1x wide    M  cyan   */
@media only screen and (max-width:  600px) { .standardTileContainer { width: 97.50%; padding-top: 75.00%; margin: 0   1.50%   6.0%   1.50% }}   /* 1x wide    S  blue   */
@media only screen and (max-width:  414px) { .standardTileContainer { width: 97.50%; padding-top: 75.00%; margin: 0   1.50%   7.2%   1.50% }}   /* 1x wide   XS  purple */
@media only screen and (max-width:  375px) { .standardTileContainer { width: 97.50%; padding-top: 75.00%; margin: 0   1.50%   7.2%   1.50% }}   /* 1x wide  XXS  violet */

/*  NOTE:  The padding-top 75% represents a ratio of WIDTH-to-HEIGHT.  At 75%, this is equivalent to saying 4:3 or 100:75 ratio. */
/*  NOTE:  The screen changes from 1x wide to 2x wide at ~ 1020PX wide on PC.  Is it consistently 1020PX across all devices???   */
/*         Seems like it would be better to break into 2x wide at ~ 800-900PX instead of 1020                                    */


/* added 7/29/2024 */
.standardTileContainerResized {
   height: 30vh;
   width:  85vw;
}


a.standardTileAnchor:link     { color: #ccc; }
a.standardTileAnchor:hover    { color: #ccc; }
a.standardTileAnchor:active   { color: #ccc; }
a.standardTileAnchor:visited  { color: #ccc; }

.standardTileContents {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   overflow: hidden;
   border-radius: 25px;  /* Added 6/29/2024 */
}

@media only screen and (min-width: 1601px) { .standardTileContents { padding: 20px 20px;}}
@media only screen and (max-width: 1600px) { .standardTileContents { padding: 19px 19px;}}
@media only screen and (max-width: 1440px) { .standardTileContents { padding: 18px 18px;}}
@media only screen and (max-width: 1024px) { .standardTileContents { padding: 17px 17px;}}
@media only screen and (max-width:  800px) { .standardTileContents { padding: 15px 15px;}}
@media only screen and (max-width:  600px) { .standardTileContents { padding: 13px 13px;}}
@media only screen and (max-width:  414px) { .standardTileContents { padding: 11px 11px;}}
@media only screen and (max-width:  375px) { .standardTileContents { padding: 10px 10px;}}

.standardTileContents img {
   width: 100%;
   object-fit: cover;
}

img.standardTileImgFull            { transform: scale(1.0); transition: all 0.8s ease-in-out; border: 0px; border-radius: 25px; padding: 0px 0px; width: 100%; height: 100%; }
img.standardTileImgFull:hover      { transform: scale(1.03);}

iframe.standardTileVideoFull       { transform: scale(1.0); transition: all 0.8s ease-in-out; border: 0px; border-radius: 25px; padding: 0px 0px; width: 100%; height: 100%; }
iframe.standardTileVideoFull:hover { transform: scale(1.03); } 



/****** END Standard Tiles  *********/




/***** START tile TITLE and TEXT Stylings *****/

.tileTitleCentered {
   width: 98%;
   margin: auto;
   font-family: Arial; 
   font-weight: 700; 
   text-align: center;
   color: #333333; 
   display: block;
}


.tileTitleCentered a         { color:#333333; text-align: left;}
.tileTitleCentered a:hover   { color:#999999; text-align: left;}

div.tileTextParagraph {
   font-size: 20px;
   font-weight: 400;
   text-align: left; 
   padding-left: 14px; 
   padding-right: 14px;
   padding-bottom: 14px;
   color: #333333;
   margin-bottom: 14px;
}

span.tileTextParagraph {
   display: block;
   padding-bottom: 14px;
}

.tileTextParagraph a          { color:#333333; text-decoration:underline; }
.tileTextParagraph a:hover    { color:#999999; text-decoration:underline; }

span.tileTextLinksList {
   display:block;
}

@media only screen and (min-width:  1601px) { span.tileTextLinksList { margin-top:38px;  }}    /* max red    */
@media only screen and (max-width:  1600px) { span.tileTextLinksList { margin-top:34px;  }}    /* XXL orange */
@media only screen and (max-width:  1440px) { span.tileTextLinksList { margin-top:29px;  }}    /* XL  yellow */
@media only screen and (max-width:  1024px) { span.tileTextLinksList { margin-top:28px;  }}    /* L   green  */
@media only screen and (max-width:  800px)  { span.tileTextLinksList { margin-top:32px;  }}    /* M   cyan   */
@media only screen and (max-width:  600px)  { span.tileTextLinksList { margin-top:24px;  }}    /* S   blue   */
@media only screen and (max-width:  414px)  { span.tileTextLinksList { margin-top:22px;  }}    /* XS  purple */
@media only screen and (max-width:  375px)  { span.tileTextLinksList { margin-top:18px;  }}    /* XXS violet */

div.tileTextLinksList {
   font-weight: 400;
   text-align: left; 
   color: #333333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 3px;   /* new on 2/2/2024 */
}

.tileTextLinksList a          { color:#333333; font-family: Arial; }
.tileTextLinksList a:hover    { color:#999999; font-family: Arial; }

@media only screen and (min-width:  1601px) { .tileTextLinksList a { font-size: 22px;   padding-left: 12px; margin-bottom:   5px; }}    /* max red    */
@media only screen and (max-width:  1600px) { .tileTextLinksList a { font-size: 1.50vw; padding-left: 12px; margin-bottom: 2.1vw; }}    /* XXL orange */
@media only screen and (max-width:  1440px) { .tileTextLinksList a { font-size: 1.50vw; padding-left:  6px; margin-bottom: 2.2vw; }}    /* XL  yellow */
@media only screen and (max-width:  1024px) { .tileTextLinksList a { font-size: 2.00vw; padding-left:  8px; margin-bottom: 3.0vw; }}    /* L   green  */
@media only screen and (max-width:  800px)  { .tileTextLinksList a { font-size: 3.80vw; padding-left: 12px; margin-bottom: 4.0vw; }}    /* M   cyan   */
@media only screen and (max-width:  600px)  { .tileTextLinksList a { font-size: 4.00vw; padding-left: 10px; margin-bottom: 4.5vw; }}    /* S   blue   */
@media only screen and (max-width:  414px)  { .tileTextLinksList a { font-size: 4.40vw; padding-left:  9px; margin-bottom: 5.0vw; }}    /* XS  purple */
@media only screen and (max-width:  375px)  { .tileTextLinksList a { font-size: 4.50vw; padding-left:  8px; margin-bottom: 6.0vw; }}    /* XXS violet */

.tileTextLinksCitation        { font-size: 0.5em; }  /*  font-style: italic;  */

ul.tileTextNoLinkList { list-style-type: disc; }
li.tileTextNoLinkList { list-style-type: disc; }









.daysUntilTileCalendarIcon {
   position: absolute;
   top: 58%;
   left: 5%;
   right: 5%;
   transform: translate(0%, -58%);
   /* transform: translate(0%, -58%); */
   font-family: 'Arial';
   font-weight: 400;
   /* font-size: 220px; */
   font-size: 10vw;
   color: #AA4239;

}

@media only screen and (min-width: 1601px) { .daysUntilTileCalendarIcon { font-size: 260px; }}   /* red    */
@media only screen and (max-width: 1600px) { .daysUntilTileCalendarIcon { font-size:  16vw; }}   /* orange */
@media only screen and (max-width: 1440px) { .daysUntilTileCalendarIcon { font-size:  15vw; }}   /* yellow */
@media only screen and (max-width: 1024px) { .daysUntilTileCalendarIcon { font-size:  23vw; }}   /* green  */
@media only screen and (max-width:  800px) { .daysUntilTileCalendarIcon { font-size:  50vw; }}   /* cyan   */
@media only screen and (max-width:  600px) { .daysUntilTileCalendarIcon { font-size:  50vw; }}   /* blue   */
@media only screen and (max-width:  414px) { .daysUntilTileCalendarIcon { font-size:  45vw; }}   /* purple */
@media only screen and (max-width:  375px) { .daysUntilTileCalendarIcon { font-size:  45vw; }}   /* violet */



.daysUntilTileDays {
   position: absolute;
   top: 69%;
   left: 5%;
   right: 5%;
   transform: translate(0%, -69%);
   font-size: 110px;
   font-family: 'Arial';
   font-weight: 700;
}

@media only screen and (min-width: 1601px) { .daysUntilTileDays { font-size: 120px; }}   /* red    */
@media only screen and (max-width: 1600px) { .daysUntilTileDays { font-size: 7.2vw; }}   /* orange */
@media only screen and (max-width: 1440px) { .daysUntilTileDays { font-size: 6.8vw; }}   /* yellow */
@media only screen and (max-width: 1024px) { .daysUntilTileDays { font-size:  11vw; }}   /* green  */
@media only screen and (max-width:  800px) { .daysUntilTileDays { font-size:  22vw; }}   /* cyan   */
@media only screen and (max-width:  600px) { .daysUntilTileDays { font-size:  20vw; }}   /* blue   */
@media only screen and (max-width:  414px) { .daysUntilTileDays { font-size:  20vw; }}   /* purple */
@media only screen and (max-width:  375px) { .daysUntilTileDays { font-size:  20vw; }}   /* violet */



.daysUntilTileMonthName {
   position: absolute;
   top: 33.5%;
   left: 5%;
   right: 5%;
   transform: translate(0%, -33.5%);
   font-size: 34px;
   font-family: 'Arial';
   font-weight: 700;
   color: #f8f8f8;
}

@media only screen and (min-width: 1601px) { .daysUntilTileMonthName { font-size:  40px; }}   /* red    */
@media only screen and (max-width: 1600px) { .daysUntilTileMonthName { font-size: 2.5vw; }}   /* orange */
@media only screen and (max-width: 1440px) { .daysUntilTileMonthName { font-size: 2.3vw; }}   /* yellow */
@media only screen and (max-width: 1024px) { .daysUntilTileMonthName { font-size: 3.5vw; }}   /* green  */
@media only screen and (max-width:  800px) { .daysUntilTileMonthName { font-size: 7.0vw; }}   /* cyan   */
@media only screen and (max-width:  600px) { .daysUntilTileMonthName { font-size: 7.0vw; }}   /* blue   */
@media only screen and (max-width:  414px) { .daysUntilTileMonthName { font-size: 7.0vw; }}   /* purple */
@media only screen and (max-width:  375px) { .daysUntilTileMonthName { font-size: 7.0vw; }}   /* violet */



.daysUntilTileBottomText {
   position: absolute;
   top: 90%;
   left: 5%;
   right: 5%;
   transform: translate(0%, -90%);
   font-size: 32px;
   font-family: 'Arial';
   font-weight: 700;
}

@media only screen and (min-width: 1601px) { .daysUntilTileBottomText { font-size:  50px; }}   /* red    */
@media only screen and (max-width: 1600px) { .daysUntilTileBottomText { font-size: 3.0vw; }}   /* orange */
@media only screen and (max-width: 1440px) { .daysUntilTileBottomText { font-size: 2.8vw; }}   /* yellow */
@media only screen and (max-width: 1024px) { .daysUntilTileBottomText { font-size: 4.5vw; }}   /* green  */
@media only screen and (max-width:  800px) { .daysUntilTileBottomText { font-size: 8.0vw; }}   /* cyan   */
@media only screen and (max-width:  600px) { .daysUntilTileBottomText { font-size: 8.5vw; }}   /* blue   */
@media only screen and (max-width:  414px) { .daysUntilTileBottomText { font-size: 8.0vw; }}   /* purple */
@media only screen and (max-width:  375px) { .daysUntilTileBottomText { font-size: 7.0vw; }}   /* violet */





div.aboutTextLinksList {
   font-weight: 400;
   text-align: left; 
   padding-left: 24px; 
   color: #333333;
   margin-bottom: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 80vw;
}

.aboutTextLinksList a          { font-family: Arial; font-size: 18px;  color:#333333; }
.aboutTextLinksList a:hover    { font-family: Arial;                   color:#999999; }

.aboutTextLinksCitation        { font-size: 0.5em; }  /*  font-style: italic;  */

/***** END tile TITLE and TEXT Stylings *****/





/***** START Share Tile ******/

.shareButtonInStandardTile         {  }
.shareButtonInStandardTile:hover   {  }

i.shareButton      ,   i.shareButtonSTD                             { transform: scale(1.0); transition: all 0.8s ease-in-out;  color: #9AA22B;    }
i.shareButton:hover,   i.shareButtonSTD:hover                       { transform: scale(1.05);                                   color: #9AA22Bd5;  }

@media only screen and (min-width:  800px) { i.shareButton { padding:   15px 15px;  font-size: 38px;  }}
@media only screen and (max-width:  799px) { i.shareButton { padding: 1.4vw 1.5vw;  font-size: 6.0vw;  line-height: 10vw; }}
@media only screen and (max-width:  568px) { i.shareButton { padding: 1.7vw 1.8vw;  font-size: 7.0vw;  line-height: 10vw; }}
@media only screen and (max-width:  440px) { i.shareButton { padding: 2.4vw 2.4vw;  font-size: 9.0vw;  line-height: 12vw; }}
@media only screen and (max-width:  360px) { i.shareButton { padding: 2.1vw 2.4vw;  font-size: 8.5vw;  line-height: 10vw; }}

@media only screen and (min-width: 1601px) { i.shareButtonInStandardTile4x { padding: 12px   25px; font-size:  50px; }}   /* red    */
@media only screen and (max-width: 1600px) { i.shareButtonInStandardTile4x { padding: 1.0vw 1.2vw; font-size: 3.0vw; }}   /* orange */
@media only screen and (max-width: 1440px) { i.shareButtonInStandardTile4x { padding: 1.0vw 1.2vw; font-size: 3.0vw; }}   /* yellow */
@media only screen and (max-width: 1024px) { i.shareButtonInStandardTile4x { padding: 1.0vw 2.1vw; font-size: 4.5vw; }}   /* green  */
@media only screen and (max-width:  800px) { i.shareButtonInStandardTile4x { padding: 3.6vw 5.0vw; font-size: 8.0vw; }}   /* cyan   */
@media only screen and (max-width:  600px) { i.shareButtonInStandardTile4x { padding: 2.4vw 4.5vw; font-size: 8.5vw; }}   /* blue   */
@media only screen and (max-width:  414px) { i.shareButtonInStandardTile4x { padding: 2.1vw 4.0vw; font-size: 8.0vw; }}   /* purple */
@media only screen and (max-width:  375px) { i.shareButtonInStandardTile4x { padding: 2.1vw 4.0vw; font-size: 7.0vw; }}   /* violet */

/***** END Share Tile ******/





/***** BEGIN Navigation Tile ******/

i.navButtonInStandardTile3,       i.navButtonInStandardTile4       { transform: scale(1.0); transition: all 0.8s ease-in-out; }
i.navButtonInStandardTile3:hover, i.navButtonInStandardTile4:hover { transform: scale(1.05); }

i.navButtonInStandardTile { transform: scale(1.0); transition: all 0.8s ease-in-out; }

.navButtonInStandardTile       p { font-size: 1.1em; transform: scale(1.0); transition: all 0.8s ease-in-out; }
.navButtonInStandardTile:hover p { font-size: 1.1em; transform: scale(1.05); }

@media only screen and (min-width: 1601px) { i.navButtonInStandardTile3 { padding:  18px  25px; font-size:  50px; }} 
@media only screen and (max-width: 1600px) { i.navButtonInStandardTile3 { padding: 0.7vw 2.0vw; font-size: 3.0vw; }} /* orange */
@media only screen and (max-width: 1440px) { i.navButtonInStandardTile3 { padding: 0.7vw 2.0vw; font-size: 3.0vw; }} /* yellow */
@media only screen and (max-width: 1024px) { i.navButtonInStandardTile3 { padding: 1.2vw 2.6vw; font-size: 4.5vw; }} /* green  */ 
@media only screen and (max-width:  800px) { i.navButtonInStandardTile3 { padding: 4.8vw 5.3vw; font-size: 8.0vw; }} 
@media only screen and (max-width:  600px) { i.navButtonInStandardTile3 { padding: 3.1vw 5.3vw; font-size: 8.0vw; }} 
@media only screen and (max-width:  414px) { i.navButtonInStandardTile3 { padding: 2.2vw 5.3vw; font-size: 8.0vw; }} 
@media only screen and (max-width:  375px) { i.navButtonInStandardTile3 { padding: 0.8vw 4.7vw; font-size: 7.0vw; }} /* violet */

@media only screen and (min-width: 1601px) { i.navButtonInStandardTile4 { padding:  18px  15px; font-size:  50px; }} 
@media only screen and (max-width: 1600px) { i.navButtonInStandardTile4 { padding: 0.7vw 1.0vw; font-size: 3.0vw; }} /* orange */
@media only screen and (max-width: 1440px) { i.navButtonInStandardTile4 { padding: 0.7vw 0.8vw; font-size: 3.0vw; }} /* yellow */
@media only screen and (max-width: 1024px) { i.navButtonInStandardTile4 { padding: 1.2vw 1.6vw; font-size: 4.5vw; }} /* green  */ 
@media only screen and (max-width:  800px) { i.navButtonInStandardTile4 { padding: 4.8vw 4.9vw; font-size: 8.0vw; }} /* cyan   */
@media only screen and (max-width:  600px) { i.navButtonInStandardTile4 { padding: 3.1px 4.9vw; font-size: 8.0vw; }} /* blue   */
@media only screen and (max-width:  414px) { i.navButtonInStandardTile4 { padding: 1.8vw 3.9vw; font-size: 8.0vw; }} /* purple */
@media only screen and (max-width:  375px) { i.navButtonInStandardTile4 { padding: 0.4vw 1.3vw; font-size: 7.0vw; }} /* violet */

div.navButton-with-text {
   float: left;
   margin-right: 0.5vw;
   text-align: center;
}

/***** END Navigation Tile ******/





/***** BEGIN Donations Tile ******/

.donationTileButton {
   display:block;
   filter: drop-shadow(3px 3px 1.5px #bbb);
}

.donationTileButton img       { margin: auto; }
.donationTileButton img:hover { opacity: 0.9; filter: drop-shadow(3px 3px 1.5px #aaa); }

@media only screen and (min-width:  1601px) { .donationTileButton img { width: 62%;  border-radius:  15px; margin-top:3.2%; }}  /* red    */
@media only screen and (max-width:  1600px) { .donationTileButton img { width: 60%;  border-radius: 0.8vw; margin-top:3.2%; }}  /* orange */
@media only screen and (max-width:  1440px) { .donationTileButton img { width: 58%;  border-radius: 0.8vw; margin-top:3.0%; }}  /* yellow */
@media only screen and (max-width:  1024px) { .donationTileButton img { width: 60%;  border-radius: 1.0vw; margin-top:3.0%; }}  /* green  */
@media only screen and (max-width:  800px)  { .donationTileButton img { width: 58%;  border-radius: 2.0vw; margin-top:3.2%; }}  /* cyan   */
@media only screen and (max-width:  600px)  { .donationTileButton img { width: 58%;  border-radius: 2.2vw; margin-top:3.2%; }}  /* blue   */
@media only screen and (max-width:  414px)  { .donationTileButton img { width: 58%;  border-radius: 2.2vw; margin-top:3.2%; }}  /* purple */
@media only screen and (max-width:  375px)  { .donationTileButton img { width: 58%;  border-radius: 2.2vw; margin-top:2.5%; }}  /* violet */

.donationTileTitle {
   font-family: Arial; 
   font-weight: 700; 
   text-align: center;
   color: #006A92; 
   display: block;
   margin-bottom: 4.5%;
}

a.donationTileTitle       { color: #9AA22B; }
a.donationTileTitle:hover { opacity: 0.7; }

@media only screen and (min-width:  1601px) { .donationTileTitle { font-size:  24px; }}  /* red    */
@media only screen and (max-width:  1600px) { .donationTileTitle { font-size: 1.5vw; }}  /* orange */
@media only screen and (max-width:  1440px) { .donationTileTitle { font-size: 1.4vw; }}  /* yellow */
@media only screen and (max-width:  1024px) { .donationTileTitle { font-size: 2.0vw; }}  /* green  */
@media only screen and (max-width:  800px)  { .donationTileTitle { font-size: 4.3vw; }}  /* cyan   */
@media only screen and (max-width:  600px)  { .donationTileTitle { font-size: 4.3vw; }}  /* blue   */
@media only screen and (max-width:  414px)  { .donationTileTitle { font-size: 4.3vw; }}  /* purple */
@media only screen and (max-width:  375px)  { .donationTileTitle { font-size: 4.1vw; }}  /* violet */


.donationTileSubtitle {
   font-family: Arial; 
   font-weight: normal; 
   text-align: center;
   color: #9AA22B; 
   display: block;
   margin-bottom: 4.5%;
}

@media only screen and (min-width:  1601px) { .donationTileSubtitle { font-size:  24px; margin-top: 5.2%; }}  /* red    */
@media only screen and (max-width:  1600px) { .donationTileSubtitle { font-size: 1.5vw; margin-top: 5.2%; }}  /* orange */
@media only screen and (max-width:  1440px) { .donationTileSubtitle { font-size: 1.4vw; margin-top: 5.2%; }}  /* yellow */
@media only screen and (max-width:  1024px) { .donationTileSubtitle { font-size: 2.0vw; margin-top: 4.7%; }}  /* green  */
@media only screen and (max-width:  800px)  { .donationTileSubtitle { font-size: 4.3vw; margin-top: 4.4%; }}  /* cyan   */
@media only screen and (max-width:  600px)  { .donationTileSubtitle { font-size: 4.3vw; margin-top: 4.4%; }}  /* blue   */
@media only screen and (max-width:  414px)  { .donationTileSubtitle { font-size: 4.3vw; margin-top: 4.0%; }}  /* purple */
@media only screen and (max-width:  375px)  { .donationTileSubtitle { font-size: 4.1vw; margin-top: 3.5%; }}  /* violet */

.donationTileBulletPoints {
   font-family: Arial; 
   color:#333333; 
   text-align: left;
   padding-left: 1%;
   padding-right: 1%;
   list-style-type: disc;
}

a.donationTileBulletPoints       { display: block; width: 100%; }
a.donationTileBulletPoints:hover { color:#999999; }


@media only screen and (min-width:  1601px) { .donationTileBulletPoints { font-size:  24px; margin-bottom:  1.1%; }}  /* red    */
@media only screen and (max-width:  1600px) { .donationTileBulletPoints { font-size: 1.5vw; margin-bottom:  1.0%; }}  /* orange */
@media only screen and (max-width:  1440px) { .donationTileBulletPoints { font-size: 1.4vw; margin-bottom:  0.8%; }}  /* yellow */
@media only screen and (max-width:  1024px) { .donationTileBulletPoints { font-size: 2.0vw; margin-bottom:  1.0%; }}  /* green  */
@media only screen and (max-width:   800px) { .donationTileBulletPoints { font-size: 4.3vw; margin-bottom:  0.8%; }}  /* cyan   */
@media only screen and (max-width:   600px) { .donationTileBulletPoints { font-size: 4.3vw; margin-bottom:  0.8%; }}  /* blue   */
@media only screen and (max-width:   414px) { .donationTileBulletPoints { font-size: 4.3vw; margin-bottom:  0.7%; }}  /* purple */
@media only screen and (max-width:   375px) { .donationTileBulletPoints { font-size: 4.1vw; margin-bottom:  0.5%; }}  /* violet */

.donationButtonNew {
   /* background-color: #9AA22B; /* Green */
   background-image: linear-gradient(to right, #868e0d 0%, #9AA22B  51%, #afb64e  100%);
   border: none;
   color: white;
   padding-right: 40px;
   padding-left: 40px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   border-radius: 20px;
   filter: drop-shadow(3px 3px 1.5px #bbb);
   transform: scale(1.0); transition: all 0.8s ease-in-out;
 }

.donationButtonNew:hover { transform: scale(1.03); opacity: 0.9; }

@media only screen and (min-width:  1601px) { .donationButtonNew { font-size:  24px; margin-top: 5px; margin-bottom: 25px; }}  /* red    */
@media only screen and (max-width:  1600px) { .donationButtonNew { font-size: 1.5vw; margin-top: 3px; margin-bottom: 20px; }}  /* orange */
@media only screen and (max-width:  1440px) { .donationButtonNew { font-size: 1.4vw; margin-top: 3px; margin-bottom: 15px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .donationButtonNew { font-size: 2.0vw; margin-top: 0px; margin-bottom: 15px; }}  /* green  */
@media only screen and (max-width:   800px) { .donationButtonNew { font-size: 4.3vw; margin-top: 5px; margin-bottom: 25px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .donationButtonNew { font-size: 4.3vw; margin-top: 2px; margin-bottom: 18px; }}  /* blue   */
@media only screen and (max-width:   414px) { .donationButtonNew { font-size: 4.3vw; margin-top: 0px; margin-bottom: 15px; }}  /* purple */
@media only screen and (max-width:   375px) { .donationButtonNew { font-size: 4.1vw; margin-top: 0px; margin-bottom: 10px; }}  /* violet */


/***** END Donations Tile ******/




/****  START Overlay Text on Charts  *****/

.tileWithOverlay{
   position: relative;
   width: 98%;
}


.tileTitleOverlay {
   top: 0px;   /* was top: 25px as of 2/3/2024 */
   width: 100%;
   height: 1%;
   position: absolute;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;
   color: #333333;    
   font-family: 'Arial';
   font-weight: 700; 
   animation: fadeIn 2s;
}


.whiteFont {
   color: #F8F8F8;
}


@media only screen and (min-width:  1601px) { .tileTitleCommonAttributes { font-size:  34px; margin-top: 15px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileTitleCommonAttributes { font-size: 2.1vw; margin-top: 15px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileTitleCommonAttributes { font-size: 2.1vw; margin-top: 10px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileTitleCommonAttributes { font-size: 2.9vw; margin-top: 10px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileTitleCommonAttributes { font-size: 4.4vw; margin-top: 15px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileTitleCommonAttributes { font-size: 4.6vw; margin-top: 11px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileTitleCommonAttributes { font-size: 5.5vw; margin-top:  9px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileTitleCommonAttributes { font-size: 6.0vw; margin-top:  8px; }}  /* violet */

@media only screen and (min-width:  1601px) { .tileTitleBigTileOverrides { font-size:  39px; margin-top: 10px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileTitleBigTileOverrides { font-size: 2.5vw; margin-top: 10px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileTitleBigTileOverrides { font-size: 3.2vw; margin-top: 10px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileTitleBigTileOverrides { font-size: 3.5vw; margin-top: 10px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileTitleBigTileOverrides { font-size: 4.4vw; margin-top: 15px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileTitleBigTileOverrides { font-size: 4.6vw; margin-top: 10px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileTitleBigTileOverrides { font-size: 5.5vw; margin-top:  0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileTitleBigTileOverrides { font-size: 6.0vw; margin-top:  0px; }}  /* violet */

p.tileTitleCommonAttributes { margin-left: 12px; margin-right: 12px; border-radius: 12px; }    /* To ensure that tile title doesn't crowd the left/right borders */

p.tileSubTitleOverlay {
   width: 98%;
   height: 1%;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;
   margin-top: 8px;
   color: #666;   
   font-family: 'Arial';
   font-weight: 400; 
   animation: fadeIn 2s;
}

@media only screen and (min-width:  1601px) { p.tileSubTitleCommonAttributes  { font-size:  19px; }}  /* red    */
@media only screen and (max-width:  1600px) { p.tileSubTitleCommonAttributes  { font-size: 1.3vw; }}  /* orange */
@media only screen and (max-width:  1440px) { p.tileSubTitleCommonAttributes  { font-size: 1.4vw; }}  /* yellow */
@media only screen and (max-width:  1024px) { p.tileSubTitleCommonAttributes  { font-size: 2.0vw; }}  /* green  */
@media only screen and (max-width:   800px) { p.tileSubTitleCommonAttributes  { font-size: 2.5vw; }}  /* cyan   */
@media only screen and (max-width:   600px) { p.tileSubTitleCommonAttributes  { font-size: 3.6vw; }}  /* blue   */
@media only screen and (max-width:   414px) { p.tileSubTitleCommonAttributes  { font-size: 3.9vw; }}  /* purple */
@media only screen and (max-width:   375px) { p.tileSubTitleCommonAttributes  { font-size: 4.0vw; }}  /* violet */

@media only screen and (min-width:  1601px) { p.tileSubTitleBigTileOverrides  { font-size:  23px; }}  /* red    */
@media only screen and (max-width:  1600px) { p.tileSubTitleBigTileOverrides  { font-size: 1.5vw; }}  /* orange */
@media only screen and (max-width:  1440px) { p.tileSubTitleBigTileOverrides  { font-size: 1.8vw; }}  /* yellow */
@media only screen and (max-width:  1024px) { p.tileSubTitleBigTileOverrides  { font-size: 2.0vw; }}  /* green  */
@media only screen and (max-width:   800px) { p.tileSubTitleBigTileOverrides  { font-size: 2.5vw; }}  /* cyan   */
@media only screen and (max-width:   600px) { p.tileSubTitleBigTileOverrides  { font-size: 3.6vw; }}  /* blue   */
@media only screen and (max-width:   414px) { p.tileSubTitleBigTileOverrides  { font-size: 3.9vw; }}  /* purple */
@media only screen and (max-width:   375px) { p.tileSubTitleBigTileOverrides  { font-size: 4.0vw; }}  /* violet */



.ytTileTitleOverlay {
   top: 0px;   /* was top: 25px as of 2/3/2024 */
   width: 100%;
   height: 1%;
   position: absolute;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;
   color: #333333;    
   font-family: 'Arial';
   font-weight: 700; 
   animation: fadeIn 2s;
}

@media only screen and (min-width:  1601px) { .ytTileTitleCommonAttributes { font-size:  34px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .ytTileTitleCommonAttributes { font-size: 2.1vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .ytTileTitleCommonAttributes { font-size: 2.1vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .ytTileTitleCommonAttributes { font-size: 2.9vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .ytTileTitleCommonAttributes { font-size: 4.4vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .ytTileTitleCommonAttributes { font-size: 4.6vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .ytTileTitleCommonAttributes { font-size: 5.5vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .ytTileTitleCommonAttributes { font-size: 6.0vw; margin-top: 0px; }}  /* violet */

p.ytTileTitleCommonAttributes { padding-top: 10px; padding-bottom: 9px; margin-left: 0px; margin-right: 0px; border-top-left-radius: 25px; border-top-right-radius: 25px; } 



/* ACTUAL TILE NAME DISPLAYED (for development only) as glowing overlay */

.tileNameOverlay {
   bottom: 20%;  
   width: 98%;
   height: 1%;
   position: absolute;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;
   animation: fadeIn 10s;
   color: #000;    
   text-shadow: 0px 0px 12px #fff, 0px 0px 12px #fff, 0px 0px 12px #fff, 0px 0px 12px #fff, 0px 0px 12px #fff, 0px 0px 12px #fff, 0px 0px 12px #000, 0px 0px 12px #000, 0px 0px 12px #000, 0px 0px 12px #000;
   font-family: 'Arial';
   font-weight: 400; 
}

@media only screen and (min-width:  1601px) { .tileNameOverlay { font-size: 20px;  }}    /* red    */
@media only screen and (max-width:  1600px) { .tileNameOverlay { font-size: 1.2vw; }}    /* orange */
@media only screen and (max-width:  1440px) { .tileNameOverlay { font-size: 1.3vw; }}    /* yellow */
@media only screen and (max-width:  1024px) { .tileNameOverlay { font-size: 1.8vw; }}    /* green  */
@media only screen and (max-width:   800px) { .tileNameOverlay { font-size: 4.0vw; }}    /* cyan   */
@media only screen and (max-width:   600px) { .tileNameOverlay { font-size: 4.1vw; }}    /* blue   */
@media only screen and (max-width:   414px) { .tileNameOverlay { font-size: 4.2vw; }}    /* purple */
@media only screen and (max-width:   375px) { .tileNameOverlay { font-size: 4.3vw; }}    /* violet */


/* MIMIC imgflip.com WHITE BLOCK letters with black highlighting/aura */

.tileMemeTextOverlay {
   color: #f0f0f0;    
   /* text-shadow: 0px 0px 3px #c8c8c8, 0px 0px 3px #c8c8c8, 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 6px #000; */
   text-shadow: 0px 0px 3px #c8c8c8, 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 6px #000, 0px 0px 5px #000, 0px 0px 7px #000;
   text-transform: uppercase;
   font-family: 'Impact';
   font-weight: 400; 
   letter-spacing: 0.05em;   
}

@media only screen and (min-width:  1601px) { .tileMemeTextFS1 { font-size:  34px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileMemeTextFS1 { font-size: 2.1vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileMemeTextFS1 { font-size: 2.1vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileMemeTextFS1 { font-size: 2.9vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileMemeTextFS1 { font-size: 4.4vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileMemeTextFS1 { font-size: 4.6vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileMemeTextFS1 { font-size: 5.5vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileMemeTextFS1 { font-size: 6.0vw; margin-top: 0px; }}  /* violet */

@media only screen and (min-width:  1601px) { .tileMemeTextFS2 { font-size:  30px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileMemeTextFS2 { font-size: 1.9vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileMemeTextFS2 { font-size: 1.9vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileMemeTextFS2 { font-size: 2.5vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileMemeTextFS2 { font-size: 3.8vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileMemeTextFS2 { font-size: 4.0vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileMemeTextFS2 { font-size: 4.7vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileMemeTextFS2 { font-size: 5.5vw; margin-top: 0px; }}  /* violet */

@media only screen and (min-width:  1601px) { .tileMemeTextFS3 { font-size:  28px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileMemeTextFS3 { font-size: 1.8vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileMemeTextFS3 { font-size: 1.7vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileMemeTextFS3 { font-size: 2.0vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileMemeTextFS3 { font-size: 3.1vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileMemeTextFS3 { font-size: 3.4vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileMemeTextFS3 { font-size: 4.0vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileMemeTextFS3 { font-size: 4.8vw; margin-top: 0px; }}  /* violet */

@media only screen and (min-width:  1601px) { .tileMemeTextFS4 { font-size:  26px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileMemeTextFS4 { font-size: 1.6vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileMemeTextFS4 { font-size: 1.6vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileMemeTextFS4 { font-size: 2.1vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileMemeTextFS4 { font-size: 3.3vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileMemeTextFS4 { font-size: 3.6vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileMemeTextFS4 { font-size: 4.2vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileMemeTextFS4 { font-size: 5.0vw; margin-top: 0px; }}  /* violet */

@media only screen and (min-width:  1601px) { .tileMemeTextFS5 { font-size:  26px; margin-top: 0px; }}  /* red    */
@media only screen and (max-width:  1600px) { .tileMemeTextFS5 { font-size: 1.6vw; margin-top: 0px; }}  /* orange */
@media only screen and (max-width:  1440px) { .tileMemeTextFS5 { font-size: 1.6vw; margin-top: 0px; }}  /* yellow */
@media only screen and (max-width:  1024px) { .tileMemeTextFS5 { font-size: 2.1vw; margin-top: 0px; }}  /* green  */
@media only screen and (max-width:   800px) { .tileMemeTextFS5 { font-size: 3.3vw; margin-top: 0px; }}  /* cyan   */
@media only screen and (max-width:   600px) { .tileMemeTextFS5 { font-size: 3.6vw; margin-top: 0px; }}  /* blue   */
@media only screen and (max-width:   414px) { .tileMemeTextFS5 { font-size: 4.2vw; margin-top: 0px; }}  /* purple */
@media only screen and (max-width:   375px) { .tileMemeTextFS5 { font-size: 5.0vw; margin-top: 0px; }}  /* violet */

.tileMemeTextOverlayTop {
   top: 5%;  
   width: 98%;
   height: 1%;
   position: absolute;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;   
   color: #f0f0f0;  
   font-family: 'Impact';
   font-weight: 500; 
   animation: fadeIn 2s;
}

.tileMemeTextOverlayBottom {
   bottom: 13%;  
   width: 98%;
   height: 1%;
   position: absolute;
   right: auto;
   left:  auto;
   text-align: center;
   margin: auto;
   color: #f0f0f0;  
   font-family: 'Impact';
   font-weight: 500; 
   animation: fadeIn 2s;
}





/* tile footnote overlay */

.tileFootnoteOverlay  {
   position: absolute;
   top: 99%;
   left: 5%;
   right: 5%;
   transform: translate(0%, -99%);
   font-size: 0.6vw;
   font-family: 'Arial';
   font-weight: 400; 
}

.tileFootnoteOverlay a          { color: #000; }
.tileFootnoteOverlay a:hover    { color: #666; }  

@media only screen and (min-width:  1601px) { .tileFootnoteOverlay { font-size:   12px; }}    /* red    */
@media only screen and (max-width:  1600px) { .tileFootnoteOverlay { font-size: 0.80vw; }}    /* orange */
@media only screen and (max-width:  1440px) { .tileFootnoteOverlay { font-size: 0.90vw; }}    /* yellow */
@media only screen and (max-width:  1024px) { .tileFootnoteOverlay { font-size: 1.10vw; }}    /* green  */
@media only screen and (max-width:   800px) { .tileFootnoteOverlay { font-size: 2.00vw; }}    /* cyan   */
@media only screen and (max-width:   600px) { .tileFootnoteOverlay { font-size: 2.20vw; }}    /* blue   */
@media only screen and (max-width:   414px) { .tileFootnoteOverlay { font-size: 2.40vw; }}    /* purple */
@media only screen and (max-width:   375px) { .tileFootnoteOverlay { font-size: 2.60vw; }}    /* violet */

p.tileFootnoteOverlay {
   padding: 2px 15px;
   margin: 0px 0px;
   text-align: center;
   border-radius: 15px;
   background-color: rgba(204, 204, 204, 0.5);
 }



 /* chart actions overlay */

div.tileActionsOverlayBigTile  {
   top: 30px;
   width: 98%;
   height: 1%;
   position: absolute;
   text-align: right;
   margin: auto;
   margin-left: -10px;
   font-size: 24px;
   animation: fadeIn 4s; 
}

a.tileActionsOverlayBigTile:link     { color: #ccc; }
a.tileActionsOverlayBigTile:hover    { color: #ccc; }
a.tileActionsOverlayBigTile:active   { color: #ccc; }
a.tileActionsOverlayBigTile:visited  { color: #ccc; }



@keyframes fadeIn {
     0% { opacity: 0; }
   100% { opacity: 1; }
 }

 /****  END Overlay Text on Charts  *****/




/* YouTube Play Image overlay */

div.tileImageOverlayYouTubePlay {
   top: 27%;
   width: 50%;
   height: 50%;
   position: absolute;
   margin: auto;
}



 /****  START Page Footer  *****/

.pageFooter{
   width: 100%;
   height: auto;
}

.copyRightFooter {
   text-align: center;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 3vh;
   font-family: 'Arial';
   color: #999;
   animation: fadeIn 2s;
}

@media only screen and (min-width:  1601px) { .copyRightFooter { font-size: 16px; }}    /* red    */
@media only screen and (max-width:  1600px) { .copyRightFooter { font-size: 15px; }}    /* orange */
@media only screen and (max-width:  1440px) { .copyRightFooter { font-size: 15px; }}    /* yellow */
@media only screen and (max-width:  1024px) { .copyRightFooter { font-size: 14px; }}    /* green  */
@media only screen and (max-width:   800px) { .copyRightFooter { font-size: 13px; }}    /* cyan   */
@media only screen and (max-width:   600px) { .copyRightFooter { font-size: 12px; }}    /* blue   */
@media only screen and (max-width:   414px) { .copyRightFooter { font-size: 11px; }}    /* purple */
@media only screen and (max-width:   375px) { .copyRightFooter { font-size: 10px; }}    /* violet */

 /****  END Page Footer  *****/





/*** START SEASON HQ BANNER  ******/

.seasonHqBannerDiv  {
   position: relative;
   background-color: #F4F5F2;
   #border: 2px solid #ccc;
   #border-radius: 25px;
   height: auto;  /* 40%;  */
   margin: auto;
   margin-top: 20px;
}

@media only screen and (min-width: 1601px) { .seasonHqBannerDiv { width:  96%; }}  
@media only screen and (max-width: 1600px) { .seasonHqBannerDiv { width:  95%; }} 
@media only screen and (max-width: 1280px) { .seasonHqBannerDiv { width:  93%; }}
@media only screen and (max-width:  440px) { .seasonHqBannerDiv { width:  90%; }}
@media only screen and (max-width:  360px) { .seasonHqBannerDiv { width:  89%; }}

span.seasonHqBannerIcon a {
   font-family: Arial;
   font-size: 16px;
   color: #9AA22B;
}

span.seasonHqBannerIcon a:hover {
   font-family: Arial;
   font-size: 16px;
   color: #959b49;
}

/*** END SEASON HQ BANNER  ***/






/***  BEGIN DONATION BANNER  ***/

.donationBannerDiv  {
   position: relative;
   background-color: #F4F5F2;
   border-radius: 25px;
   height: auto;  /* 40%;  */
   margin: auto;
   margin-top: 20px;
}

@media only screen and (min-width: 1601px) { .donationBannerDiv { width:  96%; }}  
@media only screen and (max-width: 1600px) { .donationBannerDiv { width:  95%; }} 
@media only screen and (max-width: 1280px) { .donationBannerDiv { width:  93%; }}
@media only screen and (max-width:  440px) { .donationBannerDiv { width:  90%; }}
@media only screen and (max-width:  360px) { .donationBannerDiv { width:  89%; }}

.donationBannerDiv, .blankDiv           { display: none;  }
.donationBannerDiv.hide, .blankDiv.hide { display: block; }

span.donationBannerTitleCentered {
   font-family: Arial; 
   font-weight: bold; 
   text-align: center;
   color: #333333; 
   display: block;
}

span.donationBannerTitleCentered a       { color: #333333; }
span.donationBannerTitleCentered a:hover { color: #666666; }

@media only screen and (min-width: 1601px) { span.donationBannerTitleCentered { font-size: 56px; margin-top: 2.8%; }}  
@media only screen and (max-width: 1600px) { span.donationBannerTitleCentered { font-size: 42px; margin-top: 4.5%; }} 
@media only screen and (max-width: 1280px) { span.donationBannerTitleCentered { font-size: 35px; margin-top: 6.0%; }}
@media only screen and (max-width:  440px) { span.donationBannerTitleCentered { font-size: 24px; margin-top: 8.0%; }}
@media only screen and (max-width:  360px) { span.donationBannerTitleCentered { font-size: 20px; margin-top: 9.0%; }}

span.donationBannerSubTitleCentered {
   font-family: Arial; 
   font-weight: normal; 
   text-align: center;
   color: #333333; 
   display: block;
}

span.donationBannerSubTitleCentered a       { color: #333333; }
span.donationBannerSubTitleCentered a:hover { color: #666666; }

@media only screen and (min-width: 1601px) { span.donationBannerSubTitleCentered { font-size: 40px; margin-top: 1%; }}
@media only screen and (max-width: 1600px) { span.donationBannerSubTitleCentered { font-size: 30px; margin-top: 1%; }}
@media only screen and (max-width: 1280px) { span.donationBannerSubTitleCentered { font-size: 23px; margin-top: 1.1%; }}
@media only screen and (max-width:  440px) { span.donationBannerSubTitleCentered { font-size: 18px; margin-top: 1.3%; }}
@media only screen and (max-width:  360px) { span.donationBannerSubTitleCentered { font-size: 16px; margin-top: 1.7%; }}

span.donationBannerFooterTitleCentered {
   font-family: Arial; 
   font-weight: normal; 
   text-align: center;
   color: #333333; 
   display: block;
}

span.donationBannerFooterTitleCentered a       { color: #333333; }
span.donationBannerFooterTitleCentered a:hover { color: #666666; }

@media only screen and (min-width: 1601px) { span.donationBannerFooterTitleCentered { font-size: 32px; margin-top: 1%; }}
@media only screen and (max-width: 1600px) { span.donationBannerFooterTitleCentered { font-size: 25px; margin-top: 1%; }}
@media only screen and (max-width: 1280px) { span.donationBannerFooterTitleCentered { font-size: 20px; margin-top: 1.1%; }}
@media only screen and (max-width:  440px) { span.donationBannerFooterTitleCentered { font-size: 16px; margin-top: 2.0%; }}
@media only screen and (max-width:  360px) { span.donationBannerFooterTitleCentered { font-size: 12px; margin-top: 3.5%; }}

span.donationBannerIconRow {
   font-family: Arial;
   font-size: 18px;
   line-height: 42px;
}

.donationBannerIconNoFormatting a {
   text-decoration: none;
   background-color: none;
   border: none;
   padding: 0px;
   margin: 0px;
}

.donationBannerIconPaypal {
   vertical-align: -0.4em; 
   padding-left: 0.5em;
}

@media only screen and (min-width: 1601px) { .donationBannerIconPaypal { width: 16%; }}
@media only screen and (max-width: 1600px) { .donationBannerIconPaypal { width: 18%; }}
@media only screen and (max-width: 1280px) { .donationBannerIconPaypal { width: 20%; }}
@media only screen and (max-width:  440px) { .donationBannerIconPaypal { width: 25%; }}
@media only screen and (max-width:  360px) { .donationBannerIconPaypal { width: 25%; }}

.donationBannerIconCards {
   vertical-align: -0.2em; 
   padding-left: 0.5em;
}

@media only screen and (min-width: 1601px) { .donationBannerIconCards { width: 5%; }}
@media only screen and (max-width: 1600px) { .donationBannerIconCards { width: 6%; }}
@media only screen and (max-width: 1280px) { .donationBannerIconCards { width: 7%; }}
@media only screen and (max-width:  440px) { .donationBannerIconCards { width: 10%; }}
@media only screen and (max-width:  360px) { .donationBannerIconCards { width: 10%; }}

span.donationBannerButton {
   font-family: Arial;
   line-height: 55px;
   font-size: 2.5em;  /* 26px; */
}

@media only screen and (min-width: 1601px) { span.donationBannerButton { font-size: 3.0em; }}  
@media only screen and (max-width: 1600px) { span.donationBannerButton { font-size: 3.0em; }}  
@media only screen and (max-width: 1280px) { span.donationBannerButton { font-size: 4.0em; }}  
@media only screen and (max-width:  440px) { span.donationBannerButton { font-size: 5.0em; }}  
@media only screen and (max-width:  360px) { span.donationBannerButton { font-size: 5.5em; }}

.donationBannerButton a {
   color: #F8F8F8;
   background-color: #9AA22B ;
   text-decoration: none;
   padding: 6px 20px;
   margin-right: 5%;
   border: 1px solid #ccc;
   border-radius: 25px;
 }

@media only screen and (min-width: 1601px) { .donationBannerButton a { padding: 10px 40px; border-radius: 50px; }} 
@media only screen and (max-width: 1600px) { .donationBannerButton a { padding:  8px 32px; border-radius: 30px; }}  
@media only screen and (max-width: 1280px) { .donationBannerButton a { padding:  6px 20px; }} 
@media only screen and (max-width:  440px) { .donationBannerButton a { padding:  6px 15px; }}   

.donationBannerButton a:hover {
   color: #C9C9C9;
   background-color: #9AA22B c4;
}

/***  END DONATION BANNER  ***/





/***  BEGIN Data Sources Table  ***/

#datasourcescounts {
   width: 100%;
}

#datasourcescounts td {
   width: auto;
   padding: 3px 2px; 
}

div.google_chart_datasourcescounts {
   height: 35vh; 
   max-height: 600px; 
   max-width: 80vw;
   padding: 0% 2% 0% 1%; 
}

.google-visualization-table-table th {
   font-family: Arial;
   color: #333333;
}

.google-visualization-table-table th:nth-child(n+2):nth-child(-n+4) {
   text-align: left;
}

.google-visualization-table-table th:nth-child(n+5):nth-child(-n+7){
   font-family: Arial;
   font-style: italic;
   font-size: 0.9em;
   color: #333333;
}

.google-visualization-table-table th:nth-child(n+8):nth-child(-n+99){
   font-family: Arial;
   font-size: 0.8em;
   color: #333333;
}

.google-visualization-table-table td  {
   font-size: 1.0em;
   white-space: pre-line;
 }

.google-visualization-table-table td:nth-child(1), td:nth-child(n+5):nth-child(-n+99)  {
   text-align: center;
}

.google-visualization-table-table td:nth-child(n+5):nth-child(-n+7)  {
   font-style: italic;
}

.google-visualization-table-table td:nth-child(n+3):nth-child(-n+4)  {
   font-size: 0.9em;
 }

.google-visualization-table-table td:nth-child(n+5):nth-child(-n+100)  {
  font-size: 0.8em;
}

table.google-visualization-table-table {
   font-size: 0.8vw;
}

@media screen and (max-width: 1440px) {
	table.google-visualization-table-table { 
      font-size: 10px;
   }
}

/***  BEGIN Data Sources Table  ***/









/* HACK fix to prevent toolitp from flickering */

svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }




/******  START ToolTip CSS  *********/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/******  STOP ToolTip CSS  *********/



/***  Next section is for the 'dashboard' partial donut charts  ***/

.donutCell {
   position: relative;
}

.donutDiv {
   width: 256px;
   /* height: 256px; */
   height: 200px;
}

.centerLabel {
   position: absolute;
   left: 2px;
   /* top: 2px; */
   top: 0px;
   width: 256px;
   line-height: 256px;
   /* line-height: 125px; */
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 42px;
   color: #333333;
}