:root {
 	--color-header-text: #2CABE2; 
  	--color-info: #006631;
  	--color-info-hover: #A61C2A;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-header-text);
  font-weight: bolder;
}

.btn-info {
 color: #fff;
  background-color: var(--color-info);
  border: var(--color-info);
}

.btn-info:hover {
  background-color: var(--color-info-hover); 
  border: var(--color-info-hover);
}

.navbar .brand { max-width: 560px; padding-left: 0px; }

.sponsor-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sponsor-links a {
    flex: 1 0 0;
    width: 188px;
    margin-bottom: 3px;
}

.sponsor-links a img {
	width: 100%;
	height: auto;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.4;
}

.sponsor-links a img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1.0;
}

.embed-responsive{
    width: 100%;
    display: block;
}

a.btn-grnpwr:visited {
  color: white;
}

.internship__img {
 	margin: 5px auto; 
}

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

.d-flex {
 	display:flex; 
}
.d-flex.column {
 	flex-direction: column; 
}
.justify-content-center {
 	justify-content: center; 
}

.img-link-container:hover {
    background: #eee;
    border-radius: 20px;
}

.img-link-container::after {
    content: '';
    position: absolute;
  color: #eee;
    top: 0;
    right: 0;
}

.img-link-container:hover::after {
	color: yellow;
}

details.inductees-decade-wrapper > summary {
	display: list-item;
	font-size: x-large;
	font-weight: bold;
}

.inductee-showcase {
    max-width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.showcase-header {
	display: flex;
	flex-direction: column;
}

.showcase-name {
    font-size: x-large;
}
.inductees {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.inductee-wrapper {
	flex-grow: 1;
  	text-align: center;
}

.inductee-accomplishments {
 	display: none; 
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.inductee-wrapper {
      width: 33%;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.inductee-wrapper {
      width: 25%;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.inductee-wrapper {
      width: 20%;
  }
} 

.sponsor {
	border: 1px solid #e5e5e5;
}

ol, ul {
 	margin-left: 0px;
  margin-bottom: 0px;
}

.two-column {
  columns: 2 auto;
  column-gap: 10px;
}
.m-1 {
  margin: 5px;
}

ul.outside {
 	list-style: square outside; 
}

ul > li {
 	padding-left: 10px; 
  	word-wrap: break-word;
}

dt {
 word-wrap: break-word; 
}
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}

.softball-tournament--body {
    text-align: center;
}

h5.event-container--header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.softball-tournament--body>a>img:hover, .event-container a>img:hover {
    background-color: lightgrey;
    border-radius: 25%;
    padding: 5px;
}
.event-container a>img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.sponsor {
	max-height: 185px;
	max-width: 100%;
	height: 185px;
	width: 300px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.white-anchor {
 	color: #fff !important; 
  	text-decoration: underline;
}

a.white-anchor::hover, a.white-anchor::visited {
 	background-color: var(--color-info-hover); 
}

.notices-gallery {
  position:relative;
  max-height:281px;
  max-width:450px;
  width: 100%;
  margin:0 auto;
}

.notices-gallery .img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.img.fade-out{    
     animation:fade-out;
    -webkit-animation:fade-out;
    animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 10s;
animation-direction: alternate;
    
} 
.img.fade-in{    
     animation:fade-in;
    -webkit-animation:fade-in;
    
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 10s;
animation-direction: alternate;
    
} 
.img.invite {
    max-height: 450px;
    max-width: 350px;
    width: 100%;
}


@keyframes fade-in {
  0% {
  opacity:0;
}
25% {
opacity:0;
}
35% {
opacity:1;
}
100% {
opacity:1;
}
}
@-webkit-keyframes fade-in {
0% {
  opacity:0;
}
25% {
opacity:0;
}
35% {
opacity:1;
}
100% {
opacity:1;
}
}
@keyframes fade-out {
  0% {
  opacity:1;
}
25% {
opacity:1;
}
35% {
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fade-out {
  0% {
  opacity:1;
}
25% {
opacity:1;
}
35% {
opacity:0;
}
100% {
opacity:0;
}
}

/*!
 * Bootstrap Utilities v5.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-3{
    margin-bottom:1.5em;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.py-0 {
 	padding-top: 0 !important;
  	padding-bottom: 0 !important;
}
.py-1 {
 	padding-top: .25em !important;
  	padding-bottom: .25em !important;
}
.py-2 {
 	padding-top: .5em !important;
  	padding-bottom: .5em !important;
}

.partner-link {
    max-width: 188px;
    max-height: 144px;
    width: 100%;
    height: 100%;
}

.grit-header--text {
    text-align: center;
}

.grit-header--subsection, .grit-header--text {
    font-family: cursive;
}

.grit-header--image {
    max-width: 425px;
    width: 100%;
}
/*https://github.com/twbs/bootstrap/blob/c735b2e196544b3bba25d645f4d725e8667b106c/dist/css/bootstrap.css#L7124*/
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.mw-75 {
    max-width: 75%;
    width: 100%;
}

.navbar-sports-secondary .navbar-nav > li > a 
, .navbar-sports-secondary .navbar-nav > li > a  > strong {
    color:white !important;
}
.navbar-nav > li {
    padding-left: 0px !important;
}


.navbar-sports-secondary .navbar-nav>li>a:focus,  .navbar-sports-secondary .navbar-nav>li>a:hover, .navbar-sports-secondary .navbar-nav>li>a:focus strong, .navbar-sports-secondary .navbar-nav>li>a:hover string {
    color: black !important;
}


.text-bold {
    font-weight: bolder;
}