body{ background: linear-gradient(90deg, rgba(248,226,206,1) 0%, rgba(245,229,214,1) 35%, rgba(239,236,231,1) 100%);}
/* The page header of Cassiopeia has the class "header"  */

.header {
/* background: #f2e8bf; 
  background: rgb(248,226,206);*/
background: linear-gradient(90deg, rgba(248,226,206,1) 0%, rgba(245,229,214,1) 35%, rgba(239,236,231,1) 100%);

}
/* cover background of full grid 
.site-grid
{
  background: linear-gradient(90deg, rgba(248,226,206,1) 0%, rgba(245,229,214,1) 35%, rgba(239,236,231,1) 100%);
}*/

/* code to not display selected images/text on small  screens */
.sm_screen_hide {
/*  content: url('learning-tools.png')*/
   
}
/* changed 5/21/23 from 600px to 900px */
@media screen and (max-width: 800px) {
  .sm_screen_hide {
    display: none;
  }
}

/* Color the navigation menu  */

.container-header .container-nav {
  
 /* background: rgb(247,193,243);
background: linear-gradient(90deg, rgba(247,193,243,1) 0%, rgba(208,182,145,1) 35%, rgba(172,101,0,1) 100%);*/
  background: rgb(151,205,226);
background: linear-gradient(90deg, rgba(151,205,226,1) 0%, rgba(177,201,204,1) 35%, rgba(229,200,167,1) 100%);
   padding-bottom: .2em;
  padding-top: .2em;
}
.container-header .mod-menu {
  color: #006666;
  justify-content: right;
}

/*************Smaller banner********/
   .container-banner .banner-overlay {
  height: 45vh;
  padding-top: 0 !important;
	padding-bottom: 0 !important;
   }

.container-banner .banner-overlay .overlay {
  background: linear-gradient(90deg, rgba(248,226,206,1) 0%, rgba(245,229,214,1) 35%, rgba(239,236,231,1) 100%);
}

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */
.metismenu.mod-menu .mm-collapse {
background: #f2e8bf;
}
.container-header .site-description {
  color:#ac6500;
  font-size: 1rem;
  white-space: normal;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
   background: #f0c899; color:#006666;
}
.container-footer {
	
}
.mod-footer {
	margin: 0 auto;
}
/*************Buttons for about us info ************/
.about_button {
  background-color: #006666; 
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}
.about_button:hover {
  background-color: #bdc9c3; 
  color: #006666;}
  
.bb-bkgrd{
	background-color: gray;
	background-image: url('images/colorful-childrens-books-in-library.png');
	padding-top: 100px;
	padding-bottom: 200px;
	background-size:cover;
	color:white;
	background-blend-mode:multiply; /* will blend with background color which is behind image or could use lighten,*/
}

.object-fit img {

    /* top left corner positioned in center of parent */
    position:absolute;
    top:50%;
    left:50%;

    /* shifts image so that center of image is in center of container */
    transform:translateX(-50%) translateY(-50%);

    /* ensures image fully covers the parent element */
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
-ms-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
.bottom-b.card{
	background: linear-gradient(90deg, rgba(248,226,206,1) 0%, rgba(245,229,214,1) 35%, rgba(239,236,231,1) 100%);
}
.bottom-b.card .card-header{
	background:rgba(169,169,152,0.2);
	font-size:1.5em;
	text-align:center;
}
.fresource-container{
	background: rgba(169,169,152,0.2); 
	margin: 0 50px 0 50px;
	font-size: 1.2em;
	}
	/*    card stuff */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.center-text:{ height: 400px;
        line-height: 400px;
        vertical-align: center;
}
/***********Raxo ***************/ 

.raxo-carousel .raxo-text {
 font-size: 1em !important;
 color:#006666 !important;
 }
 .raxo-carousel {
 background:linear-gradient(90deg, rgba(151,205,226,1) 0%, rgba(177,201,204,1) 35%, rgba(229,200,167,1) 100%)
}
.raxo-carousel .raxo-block-name {
 font-size: 1.6em !important;
 color: #006666 !important;
  font-weight: 450 !important;
}
.raxo-carousel .raxo-block-intro {
 	color: #006666 !important;
	font-size: 1.2em !important;
}
.raxo-carousel .slick-slider {
 background: rgb(229, 200, 167) !important;
}
.raxo-carousel a {
 color:  #006666 !important;
 font-style:italic !important;
}
/ **************************************/