/* custom component css goes here in */
.icon-column-group {
	display: block;
}

.icon-column {
	display: block;
	text-align: left;
	margin: 3rem 0;
}

.icon-column .image-block {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.icon-column .image-block img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3D(1, 1, 1);
	transform-origin: center;
	transition: transform 250ms ease, -webkit-transform 250ms ease;
}

.icon-column .image-block img:hover {
	-webkit-transform: scale3D(1.25, 1.25, 1);
	transform: scale3d(1.25, 1.25, 1);
}

.icon-column h2 {
	margin: 1rem 0;
	text-align: left;
}

.icon-column h2 a:hover {
	text-decoration: underline;
}

.icon-column p {
	margin: 1rem 0;
	text-align: left;
}

.icon-column .category {
	background-color: gray;
	text-align: center;
	color: white;
	padding: 0.1rem 0.5rem;
}

/* matches medium media query from app.css */
@media only screen and (min-width: 768px) {
	.icon-column-group {
		display: block;
		display: -webkit-flex;
		display: flex;

		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	@supports not (-ms-ime-align: auto) {
		.icon-column-group {
			-webkit-justify-content: space-evenly;
			justify-content: space-evenly;
		}
	}

	.icon-column {
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;

		-webkit-flex-basis: 45%;
		flex-basis: 45%;

		-webkit-flex-grow: 0;
		flex-grow: 0;

		max-width: 45%;

		text-align: center;

		margin: 1rem 0;
	}

	.icon-column .category {
		text-align: right;
	}
}

/* matches large media query from app.css */
@media only screen and (min-width: 1024px) {
	.icon-column {
		-webit-flex-basis: 23%;
		flex-basis: 23%;
		max-width: 23%;
	}
}

	/* Two Columns */
.two-columns .container {
	display: grid;
	gap: 20px;
}

.side-col {
	background-color: #EEEDED;
}

.main-col blockquote, .main-col p.colattrib {
	padding-left: 65px;
}

.main-col blockquote p {
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	font-size: 27px;
}

.main-col p.colattrib {
	font-size: 1.6em;
}

.embed-container {
		position: relative;
		padding-bottom: 56.25%;
		overflow: hidden;
		max-width: 100%;
		height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

/* matches medium media query from app.css */
@media only screen and (min-width: 768px) {
	.two-columns .container {
		grid-template-columns: 220px auto;
	}
	.side-col {
		align-self: start;
		grid-column-start: 1;
		grid-row-start: 2
	}
	.two-columns h2 {
		grid-column-start: 2;
	}
	.main-col {
		grid-column-start: 2;
		grid-row-start: 2;
	}
}

/* Hero Primary Photo */
.title-area {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 30px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	line-height: 1.2;
}

.title-area h2 {
	color: #fc0;
	color: rgba(255, 204, 0, 1);
}

/* matches medium media query from app.css */
@media only screen and (min-width: 768px) {
	.title-area {
		bottom: 50px;
		left: 50px;
		width: initial;
		max-width: 700px;
	}
}

/* Full Width Two Column */

.text-12.content-wysiwyg p {
	font-size: .75rem
}

.text-16.content-wysiwyg p {
	font-size: 1rem
}

.flex-rev {
	flex-direction: row-reverse
}

.align-self-stretch {
	align-self: stretch;
}

/* matches medium media query from app.css */
@media only screen and (min-width: 768px) {
		.md\:w-8 {
				width: 2rem;
		}
		.md\:w-16 {
				width: 4rem;
		}
		.md\:w-320 {
				width: 20rem;
		}
		.md\:text-24 {
		    font-size: 1.4rem
		}
		.md\:text-32 {
			font-size: 2rem
		}
		.md\:text-16.content-wysiwyg p {
			font-size: 1rem
		}
		.md\:.h-36 {
		  height: 9rem
		}
}

/* matches large media query from app.css */
@media only screen and (min-width: 1024px) {
	.lg\:pl-1\/6 {
		padding-left: 16.666667%;
	}
	.lg\:pr-1\/6 {
		padding-right: 16.666667%;
	}
}

/* custom cards-image */

.text-left {
	text-align: left
}

.hover\:border-b-5:hover {
	border-bottom-width: 5px
}

.hover\:underline-yellow:hover {
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-decoration-color: #fc0;
	text-decoration-color: rgba(255, 204, 0, 1);
}

/* matches medium media query from app.css */
@media only screen and (min-width: 768px) {
	.md\:w-3\/4 {
		width: 75%
	}
	.md\:w-full {
			width: 100%
	}
	.md\:w-1\/4 {
        width: 25%
    }
	.md\:py-6 {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem
	}	
	.md\:py-8 {
		padding-top: 2rem;
		padding-bottom: 2rem
	}
}

/* matches small media query from app.css */
@media only screen and (min-width: 640px) {
	.sm\:h-40 {
			height: 10rem
	}
}

/** story items */
.story-items {
    max-width: 50rem;
}

.story-item {
    border-bottom: solid 1px rgba(0,0,0,.15);
    padding:1rem 0;
    margin: 1rem 0;
}

.story-item:last-of-type {
    border-bottom: none;
}

.story-item .story-content {
    margin: 1.5rem 0;
    position: relative;
    top: 0;
}

.story-item .headline span:first-child {
    font-size: .85rem;
}


.story-itemm .headline span:last-child {
    font-size: .9rem;
}

.story-item .story-content a {
    position:relative;
    top: 0;
}
.story-item .story-content a::after {
    display:block;
    border-bottom: solid .25rem rgba(255, 204, 0, 1);
    content: ' ';
    width: auto;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 250ms linear;
    position: absolute;
    left: 0;
    right: 0;
}

.story-item .story-content a:hover::after {
    transform: scaleX(1);

}

.story-item p.date-published {
    font-style: italic;
    font-style: .85rem;
}

/* Carousel Text */

.carousel-text__list {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 320px;
}
@media (min-width:640px) {
    .carousel-text__list {
        height: 300px
    }
}
@media (min-width:768px) {
    .carousel-text__list {
        height: 250px
    }
}
@media (min-width:1024px) {
    .carousel-text__list {
        height: 200px
    }
}

/* does this get pushes */