/* custom additions used with Bootstrap 5.1.3 */
/*
  custom colors from imagesnippets logo:
    purple: #9258ff
    blue: #52a3fe
    blue-purple: #747aff              
*/

body {
  font-family: 'Rubik', sans-serif !important;
}

/* skip to content - accessibility link */
.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

/* custom conatiner size */
.container {
  max-width: 1200px;
}

/* gradient same is imagesnippets logo */
.is-gradient {
  background: rgb(146,88,255);
  background: linear-gradient(180deg, rgba(146,88,255,1) 0%, rgba(82,163,254,1) 100%);
}
/* light shadow */
.shadow-custom {
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/******************************************
footer - social media icon color - 
this is a font and can be colored/sized 
as a font 
******************************************/
.bi-twitter, .bi-facebook{
  color: #747aff;
  font-size:2em;
}
.bi:hover{
  color: #9258ff;
}

.bi {
  padding:10px;
}

/******************************************
Custom site header
******************************************/
/* navigation link and hover colors/behavior */
nav a:hover{
  background-color: rgba(0, 0, 0, 0.1);
  color:rgba(255, 255, 255, .1) !important;
  color: grey !important;
}
nav a:focus{
  background-color: rgba(0, 0, 0, 0.1);
  color:rgba(255, 255, 255, .1) !important;
  color: grey !important;
}
nav a:active{
  background-color: rgba(0, 0, 0, 0.2);
  color:rgba(255, 255, 255, .5) !important;
  color: #2b2b2b !important;
}
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e3e3e3;
  overflow: auto;
}
.site-header-text {
  color: grey;
  transition: color .15s ease-in-out;
  padding: 15px !important;
}

#header-menu {
  display: inline-block;
}

.site-header-text a:hover {
  color: #fff;
  text-decoration: none;
  padding: 23px !important;
}
.site-header-img {
  padding: 0 !important;
}
.site-header-img:hover {
  padding: 0 !important;
}

#main {
  float: left;
  width: 75%;
}

#sidebar {
  float:right;
  width: 25%;
}


/* display full-screen menu with large screen. show small drop-down menu on small screen - icon relocated to the right on small */
@media screen and (max-width: 900px) {
  div.full-screen-nav {
    display: none;
  }
  div.collapsed-nav {
    display: block;
  }
  #main {
    float: none;
    width: 100%;
  }
  #sidebar {
    float: none;
    width: 100%;
  }
}
@media screen and (min-width: 901px) {
  div.full-screen-nav {
    display: block;
  }
  div.collapsed-nav {
    display: none;
  }
}
/* center top slogan text when it's above the image */
@media screen and (max-width: 990px) {
  .slogan{
    text-align: center;
  }
}

/******************************************
Team Section
******************************************/

.meet-our-team-grid figure {
  display: inline-block
}
.meet-our-team-grid figure img{
  width: 200px;
  height:200px;
  margin: 4px 2px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.meet-row img{
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
figcaption { padding:10px;
  text-align: center;
}

/******************************************
Affiliations Section
******************************************/
.affiliations-grid {
  padding:22px;
  flex-direction: column;
  align-items: center;
}
.affiliations-grid img{
  width:100%;
  padding:5px;
  margin:3px;
  background-color: #ffffff;
  transition: box-shadow 0.3s ease-in-out;
}
.affiliations-grid img:hover{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}
.affiliations-grid img:focus{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}
.smaller-image {
  width: 65% !important;
}

/* adjusting width of affiliation logos for smaller screens */
@media screen and (max-width: 767px) {
  .smaller-image {
    width: 25% !important;
  }
  .affiliations-grid img{
    width: 50%;
  }
}
/******************************************
Custom Buttons - based on Bootstrap buttons
******************************************/
/* purple button */
.btn-purple {
  color: #fff;
  background-color: #9258ff;
  border-color: #0d6efd;
}
.btn-purple:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-check:focus + .btn-purple, .btn-purple:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-purple, .btn-check:active + .btn-purple, .btn-purple:active, .btn-purple.active, .show > .btn-purple.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.btn-check:checked + .btn-purple:focus, .btn-check:active + .btn-purple:focus, .btn-purple:active:focus, .btn-purple.active:focus, .show > .btn-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-purple:disabled, .btn-purple.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* white button with purple outline */
.btn-outline-purple {
  color: #9258ff;
  border-color: #9258ff;
}
.btn-outline-purple:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:focus + .btn-outline-purple, .btn-outline-purple:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-purple, .btn-check:active + .btn-outline-purple, .btn-outline-purple:active, .btn-outline-purple.active, .btn-outline-purple.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:checked + .btn-outline-purple:focus, .btn-check:active + .btn-outline-purple:focus, .btn-outline-purple:active:focus, .btn-outline-purple.active:focus, .btn-outline-purple.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-purple:disabled, .btn-outline-purple.disabled {
  color: #0d6efd;
  background-color: transparent;
}

/* blue-purple button */
.btn-blue-purple {
  color: #fff;
  background-color: #747aff;
  border-color: #747aff;
}
.btn-blue-purple:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-check:focus + .btn-blue-purple, .btn-blue-purple:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-blue-purple, .btn-check:active + .btn-blue-purple, .btn-blue-purple:active, .btn-blue-purple.active, .show > .btn-blue-purple.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.btn-check:checked + .btn-blue-purple:focus, .btn-check:active + .btn-blue-purple:focus, .btn-blue-purple:active:focus, .btn-blue-purple.active:focus, .show > .btn-blue-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-blue-purple:disabled, .btn-blue-purple.disabled {
  color: #fff;
  background-color: #747aff;
  border-color: #747aff;
}

/* white button with blue-purple outline */
.btn-outline-blue-purple {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-blue-purple:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:focus + .btn-outline-blue-purple, .btn-outline-blue-purple:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-blue-purple, .btn-check:active + .btn-outline-blue-purple, .btn-outline-blue-purple:active, .btn-outline-blue-purple.active, .btn-outline-blue-purple.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:checked + .btn-outline-blue-purple:focus, .btn-check:active + .btn-outline-blue-purple:focus, .btn-outline-blue-purple:active:focus, .btn-outline-blue-purple.active:focus, .btn-outline-blue-purple.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-blue-purple:disabled, .btn-outline-blue-purple.disabled {
  color: #0d6efd;
  background-color: transparent;
}

/* blue button */
.btn-blue {
  color: #fff;
  background-color: #52a3fe;
  border-color: #0d6efd;
}
.btn-blue:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-check:focus + .btn-blue, .btn-blue:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-blue, .btn-check:active + .btn-blue, .btn-blue:active, .btn-blue.active, .show > .btn-blue.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.btn-check:checked + .btn-blue:focus, .btn-check:active + .btn-blue:focus, .btn-blue:active:focus, .btn-blue.active:focus, .show > .btn-blue.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-blue:disabled, .btn-blue.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* white button with blue outline */
.btn-outline-blue {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-blue:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:focus + .btn-outline-blue, .btn-outline-blue:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-blue, .btn-check:active + .btn-outline-blue, .btn-outline-blue:active, .btn-outline-blue.active, .btn-outline-blue.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:checked + .btn-outline-blue:focus, .btn-check:active + .btn-outline-blue:focus, .btn-outline-blue:active:focus, .btn-outline-blue.active:focus, .btn-outline-blue.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-blue:disabled, .btn-outline-blue.disabled {
  color: #0d6efd;
  background-color: transparent;
}

header.site-header {
  z-index: 0;
}

#sidebar li {
  border-bottom: 1px solid #eeeeee;  
  padding: 10px;
}
#sidebar input[style] {
  width: 100% !important;
}
footer {
  width:100%;
  float:left;
}
.advancedSearchField {
  padding-right: 5px;
}

.donateBtnFull {
  float:right;
}
.donateBtnSmall {
  margin-top:5px;
}

.header {
  overflow:auto;
}