/* Give the document some structure. */
/* body {
	margin: 0 auto;
	max-width: 948px;
} */

/* Create a responsive, centered, three-column grid. */
.card-container {
	align-items: start;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(3, calc(33.33% - 10px));
	justify-content: center;
  max-width: 1200rem;
  margin: auto;
}

/* --- Optional styles (to make this pen look nice) --- */
body {
	font-family: sans-serif;
}

header,
footer {
  margin: 150px 0px 50px 0px;
	text-align: center;
}

.card-container .card {
  height: 320px;
  text-align: center;
/* 	border-radius: 5px; */
/* 	color: white; */
/* 	padding: 24px 0 16px; */
/* 	text-shadow: 1px 1px 0 #555; */
}

.column_image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#card_sub{
    background-color: #f4f4f4;
    padding: 20px;
}

#card_sub:hover{
  color: white;
  background-color: #063deb;
}

.column_cta{
    color: #FF7F00 !important;
    font-size: 14px;
    font-weight: 600;
}

.column_cta:hover{
  color: #fff !important;
  
}

/* .cta a{
display: none !important;
} */

.content {
    padding: 1em 1em 1em !important;
}

}
p{
  font-size: 17px;
}

.fas {
	font-size: 50px;
}

@media (prefers-color-scheme: dark) {
	html {
		background-color: #111;
		color: #fff;
	}
}

@media (max-width: 1024px) {
	#card_sub {padding: 10px}
}
@media (max-width: 960px) {
	.card-container .card {height: 330px}
}
@media (max-width: 768px) {
	.card-container {grid-template-columns: repeat(2, calc(50% - 7.5px));}
	.card-container .card {height: 300px}
	.card:not([id]) {display:none}
}
@media (max-width: 768px) {
	.card-container {grid-template-columns: repeat(2, calc(50% - 22.5px));}
	.card-container .card {height: 300px; padding: 20px}
	.card:not([id]) {display:none}
}
@media (max-width: 640px) {
	.card-container .card {height: 350px}
}
@media (max-width: 480px) {
	.card-container {display:block; margin: 0 15px}
	.card-container .card {height: auto}
	.card-container .card + .card {margin-top: 15px}
}