/*grant resources page */

.accordion__panel {
	position: relative;
}
.side-area ul {
	padding-inline-start: 0px;
}
.text-rotator {
	padding: 1rem 1rem 0 1rem;
}
.table-width p.center, .head-row p {
	padding: 0;
	margin-bottom: 0;
}
.head-row {
	background-color: #3f78a7;
}
.head-row p {
	background-color: #3f78a7;
	color: white;
}
.pub-note p {
	margin-bottom: .7rem;
}
#awards {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#awards td, #awards th ,#rfga td, #rfga th{
  border: 1px solid #ddd;
  padding: 8px;
}


#awards tr:hover {background-color: #ddd;}



/* close grant resources page */



.info-area{margin-bottom: 1rem;}
.side-area{text-align: center;}
.accordion__panel {
	position: relative;
}
.side-area ul{ padding-inline-start: 0px;
    }
.find{
    text-align: center;
    font-size: 1.3rem;
    border-bottom: medium double #194a6b;
    width:80%;
    margin:auto;
    margin-bottom: 1rem;
    
}
.did-you-know{
    
    padding: 2rem;
    background-image: linear-gradient(to bottom right, rgb(237, 239, 255), rgb(205, 243, 255));
    border-radius: 1rem;
    margin: 1rem;
    border:medium solid #4645CB;
    
}
.did-know{ 
    background-color: azure; 
    padding: .5rem;
    border-radius: .5rem;
    font-size: 1.2rem;
    color: chocolate;
}
    .image-area{
        text-align:center;
    }
@media only screen and (min-width: 700px) {
    .aae-info{
        width: 60%; 
        float:left;
        padding-right: .5rem;
    }
    .side-area{
        width: 38%; float: left;
        background-color: #f2f3ff;
        padding: .5rem;
        border-radius: .5rem;
    }
    
    .image-area{
        width: 38%; float: left;
    }
}
.side-highlt{font-weight: 600;}
.side-area p{margin-bottom: 0;}
.side-area ul{margin-top:0; list-style: none;}
/* line height on contact paragraph in sidebar */
.line-height-2{line-height: 2;}
.banner-image {
	width: 100%;
	margin: auto;
}
.js .accordion__panel {
	text-align: left;
	overflow: hidden;
	padding: 0 1em;
	max-height: 0px;
	transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out;
	visibility: hidden;
}
.js .accordion__panel.is-active {
	max-height: 100vh;
	visibility: visible;
}
.drop-group {
	background-color: #3f78a7;
	height: 4rem;
	border-radius: 1.5rem;
	text-align: center;
	width: auto;
}
.clickable-heading {
	font-size: 1.2rem;
	font-weight: 600;
	color: white;
	text-align: center;
	height: 4rem;
}
    .students{
	height: 4rem;
	padding-top: 1rem;
	display: inline-block;
    }
@media only screen and (max-width: 599px) {
.drop-group{margin:.5rem;}
}
@media only screen and (min-width: 600px) {
    .drop-group {
        margin: 3%;
        width: 25%;
        float: left;
        position: relative;
    }
    .accordion__panel{
    width:100%;
    position: absolute;
    left: 20px;
    }
}

.text-rotator {
  width: 80%;
  height: auto;
margin: auto;
    border:3px inset #0C369A;
    border-radius: 2rem;
    padding:0 1rem 0 1rem;
  
}

.slider {
  
  width: 100%;
  margin: 1rem auto 0;
  overflow: visible;
  position: relative;
}
.mask {
  overflow: hidden;
  height: 300px;
}
@media only screen and (min-width: 400px) {
    .mask {
      overflow: hidden;
      height: 270px;
    }
}
@media only screen and (min-width: 500px) {
    .mask {
      overflow: hidden;
      height: 240px;
    }
}
@media only screen and (min-width: 600px) {
    .mask {
      overflow: hidden;
      height: 210px;
    }
}
@media only screen and (min-width: 700px) {
    .mask {
      overflow: hidden;
      height: 180px;
    }
}
@media only screen and (min-width: 800px) {
    .mask {
      overflow: hidden;
      height: 160px;
    }
}
@media only screen and (min-width: 900px) {
    .mask {
      overflow: hidden;
      height: 200px;
    }
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 100%;
  height: auto;
  position: absolute;
  top: -225px;
  list-style: none;
}

.slider .quote {
  font-size: 1.1rem;
  font-style: italic;
}

.slider .source {
  font-size: 1rem;
  text-align: right;
}

.slider li.anim1 {
  -moz-animation: cycle 90s linear infinite;
  -webkit-animation: cycle 90s linear infinite;
  animation: cycle 90s linear infinite;
}

.slider li.anim2 {
  -moz-animation: cycle2 90s linear infinite;
  -webkit-animation: cycle2 90s linear infinite;
  animation: cycle2 90s linear infinite;
}

.slider li.anim3 {
  -moz-animation: cycle3 90s linear infinite;
  -webkit-animation: cycle3 90s linear infinite;
  animation: cycle3 90s linear infinite;
}

.slider li.anim4 {
  -moz-animation: cycle4 90s linear infinite;
  -webkit-animation: cycle4 90s linear infinite;
  animation: cycle4 90s linear infinite;
}


.slider:hover li {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-moz-keyframes cycle {
  0% {
    top: 0px;
  }
  3% {
    top: 0px;
  }
  22% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  25% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  26% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  94% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  97% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@-moz-keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  23% {
    top: -325px;
    opacity: 0;
  }
  25% {
    top: 0px;
    opacity: 1;
  }
  28% {
    top: 0px;
    opacity: 1;
  }
  47% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  50% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  51% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  47% {
    top: -325px;
    opacity: 0;
  }
  50% {
    top: 0px;
    opacity: 1;
  }
  53% {
    top: 0px;
    opacity: 1;
  }
  72% {
    top: 0px;
    opacity: 1;
  }
  75% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-moz-keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  72% {
    top: -325px;
    opacity: 0;
  }
  75% {
    top: 0px;
    opacity: 1;
  }
  78% {
    top: 0px;
    opacity: 1;
  }
  97% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}



 
@-webkit-keyframes cycle {
  0% {
    top: 0px;
  }
  3% {
    top: 0px;
  }
  22% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  25% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  26% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  94% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  97% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  22% {
    top: -325px;
    opacity: 0;
  }
  25% {
    top: 0px;
    opacity: 1;
  }
  28% {
    top: 0px;
    opacity: 1;
  }
  47% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  50% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  51% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  47% {
    top: -325px;
    opacity: 0;
  }
  50% {
    top: 0px;
    opacity: 1;
  }
  53% {
    top: 0px;
    opacity: 1;
  }
  72% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  75% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  72% {
    top: -325px;
    opacity: 0;
  }
  75% {
    top: 0px;
    opacity: 1;
  }
  78% {
    top: 0px;
    opacity: 1;
  }
  97% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}