/* CSS for formerly Cool Blocks and Circles subset in sites-e/science Additional CSS */
/* original system page ID 21  but available for set wide use*/
/* filename = Cool-Blocks_and_Circles.css */
/* file date 01/11/2021 */
/* file version 3.0 */
/* Author:  Jay Madigan, NASA LaRC - SSAI */
/* DO NOT ALTER THIS FILE WITH PERMISSION FROM ORIGINAL AUTHOR */

/*
---------------------------
START
Cool Blocks and Circles CSS
---------------------------
*/
.block100
{
	display: inline-block;
	width: 100px;
	height: auto;
}
.block300
{
	clear: both;
	display: inline-block;
	width: 300px;
	height: auto;
	border-radius:2%;
}
.cool-block-item {
	font-family:'News Cycle','Helvetica Neue',serif;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	position:relative;
	display:block;
	margin-bottom:3%!important;
	box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
	border-radius:2%;
	overflow: hidden;
}
.cool-block-item-image {
	display:block;
	width:100%;
	height:100%;
	border-radius:2%;
	overflow: hidden;
}
.cool-block-item-label {
	position:absolute;
	left:0;
	right:0;
	bottom:10%;
	padding:10px;
	color:#fff;
	font-size:15px;
	font-weight:700;
	text-align:center;
	background-color:rgba(11,61,145,.75);
	overflow: hidden;
}

.cool-block-item-overlay {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0;
	-webkit-transition:.5s ease;
	-o-transition:.5s ease;
	transition:.5s ease;
	background-color:#0b3d91;
	border-radius:2%;
	overflow: hidden;
}

@media screen and (min-width:600px) {.cool-block-item:focus .cool-block-item-overlay,.cool-block-item:hover .cool-block-item-overlay{opacity:1}}
.cool-block-item-text {
	font-weight:700;
	color:#fff;
	font-size:.9em;
	position:absolute;
	top:50%;
	left:50%;
	width:85%;
	max-height:100%;
	text-align: center;
	-webkit-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	overflow: hidden;
 }

.circle300
{
	clear: both;
	display: inline-block;
	width: 300px;
	height: auto;
	border-radius: 50%;
}
.cool-circle-item{
	font-family:'News Cycle','Helvetica Neue',serif;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	position:relative;
	display:block;
	margin-bottom:3%!important;
	/*box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);*/
	border-radius: 50%;
	overflow: hidden;
}
.cool-circle-item-image{
	display:block;
	width:100%;
	height:100%;
	border-radius: 50%;
	overflow: hidden;
 }
.cool-circle-item-label{
	position:absolute;
	left:0;
	right:0;
	bottom:10%;
	padding:10px;
	color:#fff;
	font-size:15px;
	font-weight:700;
	text-align:center;
	background-color:rgba(11,61,145,.75);
	overflow: hidden;
 }

.cool-circle-item-overlay{
	position:absolute;
	top:0;bottom:0;left:0;right:0;
	opacity:0;
	-webkit-transition:.5s ease;
	-o-transition:.5s ease;
	transition:.5s ease;
	background-color:#0b3d91;
	border-radius: 50%;
	overflow: hidden;
}
@media screen and (min-width:300px){.cool-circle-item:focus .cool-circle-item-overlay,.cool-circle-item:hover .cool-circle-item-overlay{opacity:1}}
.cool-circle-item-text {
	font-weight:700;
	color:#fff;
	font-size:14px;
	position:absolute;
	top:50%;
	left:50%;
	width:85%;
	max-height:100%;
	text-align: center;
	-webkit-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	overflow: hidden;
 }

/*
---------------------------
END Cool Blocks and Circles CSS
---------------------------
*/