/* bootstrap 5 grid system: 
    xs < 576    
    sm >= 576    
    md >= 768    
    lg >= 992    
    xl >= 1200   
    xxl >= 1400 */

/*--------------------------------------------------------
CSS overview: 

  01. REBOOT
	01. CUSTOM OBJECTS
  02. GLOBAL
  03. OVERRIDE DEFAULT OBJECTS
	04. TOP HEADER
	05. FOOTER MENU
  06. BREADCRUMBS
  07. ABOUT PAGE
  08. ABOUT-US PAGE
  09. CONTACT-US PAGE
  10. NEWS PAGE
  11. RESPONSIVE DESIGN
--------------------------------------------------------*/

/*--------------------------------------------------------
			REBOOT 
--------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

* { 
    margin: 0; 
    padding: 0; 
    font:inherit; 
}

html { color-scheme: dark light; }
body { min-height: 100vh; }

img, picture, svg, video { 
    display: block; 
    max-width: 100%; 
}

/*--------------------------------------------------------
			CUSTOM OBJECTS 
--------------------------------------------------------*/
:root {
    /* colors */
    --clr-light-100: rgb(255,255,255);
    --clr-light-150: rgb(245,245,245);
    --clr-light-200: rgb(220,220,220);
    --clr-light-300: rgb(180,180,180);
    --clr-medium-400: rgb(160,160,160);
    --clr-medium-500: rgb(120,120,120);
    --clr-medium-600: rgb(100,100,100);
    --clr-dark-700: rgb(80,80,80);
    --clr-dark-800: rgb(45,50,65);
    --clr-dark-900: rgb(36,40,49);
    --clr-heading: #174366;
    --clr-icon: #00B6FD;
    /* font families */
    --ff-p1: 'Open Sans', sans-serif;
    --ff-h1: 'Lato', Arial, sans-serif;
    --ff-h2: 'Roboto Condensed', sans-serif;
}
/*--------------------------------------------------------
			GLOBAL STUFF 
--------------------------------------------------------*/
/* font sizes */ 
.fsize-1 { font-size: 0.8rem; }
.fsize-2 { font-size: 1.0rem; }
.fsize-3 { font-size: 1.3rem; }
.fsize-4 { font-size: 1.5rem; }
.fsize-5 { font-size: 1.8rem; }
.fsize-6 { font-size: 2.0rem; }
/* font colors */
.fcolor-1 { color: #fff; }
.fcolor-2 { color: #f1f1f1;}
.fcolor-3 { color: #ddd;}
.fcolor-4 { color: #ccc;}
.fcolor-5 { color: #aaa;}
.fcolor-6 { color: #999;}
.fcolor-7 { color: #777;}
.fcolor-8 { color: #555;}
.fcolor-9 { color: #333;}
.fcolor-10 { color: #252525;}
.fcolor-blue { color: #00B6FD;}
.fcolor-blue2 { color: #99e5ff;}
.fcolor-red { color: #aa0000;}
/* font weight */
.fnormal { font-weight: 400;}
.fbold { font-weight: 700;}
/* font families */
.ftype-1 { font-family: "Open Sans", Arial, sans-serif;}
.ftype-2 { font-family: "Lato", Arial, sans-serif;}
/* background colors */
.bcolor-1 { background-color: #2D333F;}
.bcolor-2 { background-color: #2D333F;}
.bcolor-3 { background-color: #2E3440;}
.bcolor-4 { background-color: #343A48;}
.bcolor-5 { background-color: #363E4B;}
.bcolor-6 { background-color: #636C70;}
.bcolor-7 { background-color: #f1f1f1;}
.b-black { background-color: #252525;}
/* borders */
.border-a1 { border: 1px solid #ccc;}
.border-a2 { border: 1px solid #aaa;}
.border-a3 { border: 1px solid #777;}
.border-a4 { border: 1px solid #555;}
.border-b1 { border-bottom: 1px solid #ccc;}
.border-b2 { border-bottom: 1px solid #aaa;}
.border-b3 { border-bottom: 1px solid #777;}
.border-b4 { border-bottom: 1px solid #555;}
.border-lr1 { border-right: 1px solid #ccc;}
.border-lr2 { border-right: 1px solid #aaa;}
.border-lr3 { border-right: 1px solid #777;}
/* padding */
.pt-5  { padding-top: 5px; }
.pt-15 { padding-top: 15px; }
.pt-25 { padding-top: 25px; }
.pt-50 { padding-top: 50px; }

.pr-5  { padding-right: 5px; }
.pr-15 { padding-right: 15px; }
.pr-25 { padding-right: 25px; }
.pr-50 { padding-right: 50px; }

.pb-5  { padding-bottom: 5px; }
.pb-15 { padding-bottom: 15px; }
.pb-25 { padding-bottom: 25px; }
.pb-50 { padding-bottom: 50px; }

.pl-5  { padding-left: 5px; }
.pl-15 { padding-left: 15px; }
.pl-25 { padding-left: 25px; }
.pl-50 { padding-left: 50px; }
/* spacers */
.spacer-25 { height: 25px; }
.spacer-50 { height: 50px; }
/* dividers */
.divider-1 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; }
.divider-2 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; padding-top: 15px;}
/* remove text decoration on base links */
.nolinks { color: #B21E27; text-decoration: none !important;}
.nolinks:hover {color:#B21E27; }
.nolinkLogo { color: #99e5ff; text-decoration: none !important;}
.nolinkLogo:hover { color: #99e5ff; text-decoration: none !important;}
/* height */
.min-height-20 { min-height: 20px; }
.min-height-30 { min-height: 30px; }
.min-height-40 { min-height: 40px; }
.min-height-50 { min-height: 50px; }
.min-height-75 { min-height: 75px; }
.min-height-100 { min-height: 100px; }
.min-height-125 { min-height: 125px; }
.min-height-150 { min-height: 150px; }
/* line height */
.lh-1 { line-height: 2.8;}

/*--------------------------------------------------------
			OVERRIDE DEFAULT OBJECTS 
--------------------------------------------------------*/
body {
    font-family: var(--ff-p1);
    font-size: 0.9rem;
	  padding-top: 150px;
    background-color: #fff;
    background-image: radial-gradient(#fff, #eee);
}

h1, h2, h3, h4, h5, h6 { font-family:var(--ff-h2); color: var(--clr-heading); }
h5.card-title { font-family: var(--ff-h1); }
h5.card-text { font-family: var(--ff-p1); }

/*--------------------------------------------------------
			TOP HEADER 
--------------------------------------------------------*/
/* search input */
.form-control-xs {
    height: calc(1.3em + .25rem + 2px);
    padding: .25rem .25rem;
    font-size: .875rem;
    line-height: 1.4;
    border: 1px solid #777;
    background-color: #242831;
    /* color: #f1f1f1 !important; */
}

/* search button */
.form-btn-control-sm {
    height: calc(1.3em + .25rem + 2px);
    padding-top: .1em;
    padding-left: .5em;
    padding-right: .5em;
    font-size: .875rem;
    line-height: 1.4;
    /* color: #f1f1f1; */
    border-radius: 0;
}

input::placeholder {
  color: #000000 !important;
  opacity: 1;
}

/* hamburger button for responsive site */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus { color: #aaa; outline:none; box-shadow:none; }

.brand { font-family: 'Open Sans', sans-serif; }


/* links in nav bar */
ul.nav a:link {color: #ccc;}
ul.nav a:hover { color: #fff; font-weight: 700; }

/*--------------------------------------------------------
			FOOTER MENU
--------------------------------------------------------*/
#myFooter { 
  background-color: #252B2F; 
  color:var(--clr-light-200); 
}

#myFooter .row { 
  margin-bottom: 0px; 
  padding-bottom: 15px; 
  padding-top: 15px;
}

#myFooter table { border:none; color:var(--clr-light-200); border-collapse: collapse; font-size: 100%; width: 100%; }
#myFooter td { border:none; color:var(--clr-light-200); border-collapse: collapse; font-size: 100%; }
#myFooter .info { text-align: left; color: #afb0b1; border-right:none; line-height: 1.3rem; }
#myFooter ul { list-style-type: none; padding-left: 0; line-height: 1.3rem; color:var(--clr-light-200); }
#myFooter h5 { font-size: 14px; color:var(--clr-light-100); margin-top: 30px; font-family: arial, sans-serif;font-weight: 700;}
#myFooter a { color:var(--clr-light-200); text-decoration: none; }
#myFooter a:hover, #myFooter a:focus { text-decoration: none; color: #d2d1d1; }
#myFooter .second-bar { text-align: center; background-color: #33373e; text-align: center; }
#myFooter .second-bar a { font-size: 22px; color:var(--clr-light-200); padding: 10px; transition: 0.2s; line-height: 68px; }
#myFooter .second-bar a:hover { text-decoration: none; }
.myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:200; color:var(--clr-light-200) !important; }

/*--------------------------------------------------------
			BREADCRUMB 
--------------------------------------------------------*/
#fa-last { color:var(--clr-light-100) !important; }
#fa-house { color:var(--clr-dark-900) !important; }
.first {  margin-top: 3px;}
/* .first ol {  } */
.first a:hover { color:var(--clr-dark-900) !important; font-weight:700; }
.active-1 { color:var(--clr-light-100) !important; }
.fa, i { color: rgb(0, 183, 255) !important; }
.breadcrumb>li+li:before { content: "" !important; }
.breadcrumb { padding: 0px; font-size: 14px; color: #777 !important; letter-spacing: 0px; }
.breadcrumb-item a { text-decoration: none !important; color: #252525 !important; }
.breadcrumb-item a:focus,
.breadcrumb-item a:active { outline: none !important; box-shadow: none !important; }
.fa-caret-right { padding-left: 7px; font-size: 20px; vertical-align:middle; }
.fa-chevron-right { vertical-align:middle; color: #2D333F !important; }
.breadcrumb-item+.breadcrumb-item::before { padding-right: 0px; float:none;}

/*--------------------------------------------------------
			ABOUT PAGE 
--------------------------------------------------------*/
/* Links on the about page */
.card-body a:link { color:var(--clr-light-100); text-decoration:none;}
.card-body a:visited, a:hover { color:var(--clr-light-100); font-weight: 700; }
.card-body a:active, a:focus { text-decoration:none;}

/*--------------------------------------------------------
			ABOUT US PAGE 
--------------------------------------------------------*/
#building { width: 100%; }

/*--------------------------------------------------------
			FAQ-ACCORDIAN ITEMS
--------------------------------------------------------*/
.accordion {
    /*max-width: 400px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    background: #e5e5e5;
    border: 1px solid #aaa;
  }
  
  .accordion__label,
  .accordion__content {
    padding: 14px 20px;
  }
  
  .accordion__label {
    display: block;
    color: #2D333F;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
  }
  
  .accordion__label:hover {
    background: rgba(45, 50, 60, 0.1);
    font-weight: 700;
  }
  
  .accordion__label::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 12px;
    height: 6px;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%2325252599;" /></svg>');
    background-size: contain;
    transition: transform 1.4s;
  }
  
  .accordion__content {
    background: aliceblue;
    display: none;
  }
  
  .accordion__input {
    display: none;
  }
  
  .accordion__input:checked ~ .accordion__content {
    display: block;
  }
  
  .accordion__input:checked ~ .accordion__label::after {
    transform: translateY(-50%) rotate(0.5turn);
  }
  
/*--------------------------------------------------------
			CONTACT US PAGE 
--------------------------------------------------------*/
.form, .contact-success { padding: 5%; background-color: #fff; overflow: hidden; border: 1px solid #ccc;}
.contact-success { padding: 20px; color: #fff; font-size:11px; }
.form ul { margin: 0; padding: 0; list-style-type: none; }
.form  li { position: relative; }
.form input, .form textarea { width: 85%; margin-bottom: 12px; position: relative; background-color: aliceblue; border: 1px solid #ccc;}
.form textarea { width: 96%; height: 150px; }
.form input.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray;}
.form  li p, .form input.submit { margin-bottom: 0; }
.form input.submit:hover { color: #252525; font-weight: 700; margin-bottom: 0; background-color: #cacaca; }
.form em { color:#555555; display: inline; font-size: 11px; font-style: normal; font-weight: bold; }
.form .contact-error { color: #f96e5b; font-size: 11px; font-weight: bold; position: absolute; top: 0; right: 60px; }
.form button.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray; color: #353535;}
.contact-info { list-style-type: none; padding: 0; margin: 0; }
.thanos { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1 };

/*--------------------------------------------------------
			NEWS iITEMS
--------------------------------------------------------*/
.news-Pic { width: 100%; }
.news-Container { border: 1px solid var(--clr-light-300) !important; background-color: var(--clr-light-100) !important; }
.newsDate { font-size: 0.8rem; color: #777777; font-family: var(--ff-h2);}

/*--------------------------------------------------------
			GENERAL ITEMS
--------------------------------------------------------*/
.boxHeading { background-color: AliceBlue !important; border: 1px solid rgb(200,200,200); padding: 5px 0 5px 5px; font-family: var(--ff-h1); }
.boxHeadingChild { padding: 5px 0 5px 0px; }

/* table padding */
.table-sm>:not(caption)>*>* { padding: 0 5px; font-size: .8rem;}
#oralHistoryTD { width: 125px; font-family:'Roboto Mono', Courier, monospace; font-weight: 400; padding:3px; }
#oralHistoryFilename { font-family:'Roboto Mono', Courier, monospace; font-weight: 400; padding: 3px; }
#programTD { font-family:'Roboto Mono', Courier, monospace; font-weight: 400;}
.boardMinutesTD { width: 100px; font-family:'Roboto Mono', Courier, monospace; font-weight: 400; padding: 3px;}
.boardMinutesFilename { font-family:'Roboto Mono', Courier, monospace; font-weight: 400; }

/*--------------------------------------------------------
			STAFF PAGE 
--------------------------------------------------------*/
#staffCardTitle a:link {text-decoration:none;}

/*--------------------------------------------------------
			CARDS 
--------------------------------------------------------*/
.card img:hover {opacity: 0.75;}


/*--------------------------------------------------------
			RESPONSIVE MODE 
--------------------------------------------------------*/
/* When the screen is 250px wide or higher */
@media screen and (min-width: 300px) {
    #myFooter .info { text-align: center; color: #afb0b1; border-right:none; line-height: 1.1rem; }
    body { padding-top: 135px; }
    .accordion__label,
    .accordion__content {
      padding: 14px 40px;
    }
  
}
/* min width of 345px */
@media screen and (min-width: 345px) {
    body { padding-top: 95px; }
  }

/* max width of 575px */
@media screen and (max-width: 575px) {
    .search-container { margin-top: 5px;}
}

/* max width of 767px */
@media screen and (max-width: 767px) {
    #myFooter { text-align: center; }
    #myFooter .col-sm-3 { display: block; width: 100%; }
    #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem; color:blue; }
    #myFooter .info { text-align: center; display: block; width: 100%; }
    #bottomHeader img { margin-top: 15px; }
}

/* min width of 768px */
@media screen and (min-width: 768px) {
    #myFooter .col-sm-3 { border-right: 1px solid #555; }
    #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem; color:red; }
    #myFooter .info { text-align: left; border-right:none; }
    .accordion__label,
    .accordion__content {
      padding: 14px 20px;
    }
}

/* When the screen is 992px wide or higher */
@media screen and (min-width: 992px) {
    body { padding-top: 95px; }
    #myFooter .img { margin-top: 5px; }
}

/* When the screen is 1200px wide or higher 
@media (min-width: 1200px) {
}*/