@import url("/-/media/Files/CSS/libraries/libraries.css");



#page {
    background-color: #FFFFFF !important;
    background-image:url(/-/media/Files/CSS/libraries/kidszone-footer.png),  
                                    url(/-/media/Files/CSS/libraries/bg-bears-01.png);
    background-repeat: repeat-x, no-repeat;
    background-position: -2.8em bottom, left bottom 2em;
    padding-bottom: 20em;
}

/*CONTENT CARDS*/
.wall .brick .card-media {
	height: 100%;
	}


.wall .brick .card-media img {
	position: relative;
	top: 0;
	transform: none;
}

.card-media {
    height: 16em !important;
}

.carousel-holder .card-media {
	height: 9em !important;
}

.card .card-content {
    padding: 0 0.3em;
    background-color: #ffffff40 !important;
}


li.brick:nth-child(4n+0) .card {
	background-color: #11B0A9;
	
}
li.brick:nth-child(4n+1) .card {
	background-color: #F46187;
	}

li.brick:nth-child(4n+2) .card {
	background-color: #FFDD12;

}
li.brick:nth-child(4n+3) .card {
	background-color: #74B859;
	
}
li.brick .card a{
	color: #002152;
	border-bottom-color: #002152;	
}
.card-content.row.remove-bottom {
    background-color: #ffffff30;
}

.card h2 {color: #151515 !important; font-size: 1.2rem !important;}
.card-description {color: #151515 !important; font-size:1rem !important;}


/*BUTTONS ON CONTENT CARDS*/

#page .wall .brick a[role="button"] {
	font-family: dosis;
	font-size:1.2em;
	background-color: #1D2548;
	border-color: #1D2548;
	color: #FFF!important;
	text-shadow: none;
}

#page .wall .brick a[role="button"]:hover {
	background-color: #425193;
	border-color: #1D2548;
	color: #FFF !important;
	text-shadow:none;
}




/* OVERLAY IMAGES */

.overlay-image .caption {
	position: absolute;
	left: 1em !important;
	font-size: 1.2em;
	color: #222;
	max-width: 75% !important;
	border-radius: 0.65em 0.65em 0 0 !important;
	padding: 0.5em 1em !important;
    background-color: #1d2548;
}
.columns:nth-child(1) .overlay-image {
	background-color: #11B0A9;
	border-bottom: 5px solid #11B0A9 !important;
}
.columns:nth-child(1) .overlay-image .caption {background-color: #11B0A9;}

.columns:nth-child(2) .overlay-image {
	background-color: #F46187;
	border-bottom: 5px solid #F46187 !important;
}
.columns:nth-child(2) .overlay-image .caption {background-color: #F46187;}

.columns:nth-child(3) .overlay-image {
	background-color: #FFDD12;
	border-bottom: 5px solid #FFDD12 !important;
}
.columns:nth-child(3) .overlay-image .caption {background-color: #FFDD12;}

.columns:nth-child(4) .overlay-image {
	background-color: #74B859;
	border-bottom: 5px solid #74B859 !important;
}
.columns:nth-child(4) .overlay-image .caption {background-color: #74B859;}



.well.src {
	background-color: #2364b4;
	color: #fff;
}
 
@media only screen and (min-width: 48em) {
	.well.src:before {
		content: "";
		position: absolute;
		display: inline-block;
		width: 5em;
		height: 5em;
		top: -1em;
		right: -2em;
		background-image: url(/-/media/files/css/libraries/SRC-Assets-24-7);
		background-repeat: no-repeat;
		background-size: contain;
	}
}

@media only screen and (min-width: 64em) {
	.well.src:before {
		width: 10em;
		height: 10em;
		top: -2em;
		right: -6em;
	}
}
 
.well.src:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 5em;
	height: 5em;
	bottom: -2em;
	left: -1em;
	background-image: url(/-/media/files/css/libraries/SRC-Assets-24-3-resized);
	background-repeat: no-repeat;
	background-size: contain;
}
 
@media only screen and (min-width: 64em) {
	.well.src:after {
		width: 10em;
		height: 7em;
		bottom: -1em;
		left: -5em;
	}
}
 
/* BREAKOUT - SUMMER READING CHALLENGE */
/*
.breakout-bg.bg.primary {
    background-color: transparent;
    background-image: url(/-/media/files/css/libraries/SRC-Assets-24-7), url(/-/media/files/css/libraries/SRC-Assets-24-7);
    padding: 1em;
    background-repeat: no-repeat, no-repeat;
    background-position: 20% 93%, 80% 95%, 100%;
	padding-bottom: 20em;
}*/
 
 
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.primary {
    	background-color: transparent;
    	background-image: url(/-/media/files/css/libraries/SRC-Assets-24-3), url(/-/media/files/css/libraries/SRC-Assets-24-7);
    	padding: 2em;
    	background-repeat: no-repeat, no-repeat;
    	background-position: -20% 65%, 120% 95%, 100%;
		padding-bottom: 2em;
    }

	.breakout-bg.bg.primary:before {
		content: "";
		position: absolute;
		display: inline-block;
		width: 7em;
		height: 7em;
		top: 6em;
		left: -6em;
		background-image: url(/-/media/files/css/libraries/SRC-Assets-24-3);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.breakout-bg.bg.primary:after {
		content: "";
		position: absolute;
		display: inline-block;
		width: 8em;
		height: 8em;
		top: 12em;
		right: -7em;
		background-image: url(/-/media/files/css/libraries/SRC-Assets-24-7);
		background-repeat: no-repeat;
		background-size: contain;
	}
}

/* BUTTONS */
a[role=button]:visited {
    border: 1px solid #1eb2b3;
}

a[role=button]:hover {
    border: 1px solid #a6cdcd;
}


/* When a book might help*/

/* Logo */
@media only screen and (min-width: 64em) {
	img.logo {
		margin-top: -3rem;
	}
}

/* Link around logo */
.content a.logolink {
	border: 0;
}

/* Remove big gap beteen 2 blocks of buttons on mobile */
@media only screen and (max-width: 47em){
	.row.alt {
		margin-bottom: 0;
	}
}