.hero-box {background: #f0f5ff; border: 1px solid #c6cbd6; }
#resources {border-top: 1px solid #ddd;}
#resources .item {border-bottom: 1px solid #ddd;}
.badge.bg-video {text-transform: uppercase; border-radius: 0; background-color: #953E62; padding: .5rem .75rem; font-size: .875rem; font-weight: normal; margin-bottom: .5rem; }
#resources a.video {position: relative; display: inline-block; background: #000; color: #fff;}
#resources a.video img { opacity: 0.7; filter: alpha(opacity=80); background: #000; }
#resources a.video:hover img { opacity: 0.8; }
#resources .bi-play-circle {position: absolute; top: 25%; left: 40%; font-size: 3rem; opacity: 1;}
.hero-box .hero-icon {text-align: center;}
.hero-box .hero-icon img {max-width: 100%;}
.column-count-2 {column-count: 2}


/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
#resources .bi-play-circle-fill {position: absolute; top: 25%; left: 40%; font-size: 2rem;}
	.hero-box {text-align: center;}
	.hero-box .hero-icon {padding-bottom: 2rem;}
.hero-box .hero-icon img {width: 20%;}	
}

/*X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
#resources .bi-play-circle-fill {position: absolute; top: 25%; left: 40%; font-size: 3rem;}
	.hero-box .btn {display: block; width: 100%; margin-bottom: .5rem;}
	.hero-box .buttons {width: 80%; margin: 0 auto;}
	.hero-box .hero-icon img {width: 30%;}	
}