a.btn {
    display: inline-block;
    width: 300px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px 15px;
    text-align: center;
    background-color:rgba(124, 108, 153, 1.0);
    color: white;
    text-decoration: none;
    border-radius:12px;
    font-size: 16px;
}
a.btn:hover {
    background-color:rgba(124, 108, 153, 0.8);
	text-decoration:none;
	color:#fff;
}
.tilted-image {
    width: 300px; /* Adjust as needed */
    display: block;
    margin: 20px auto;
    transform: perspective(500px) rotateY(-20deg);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Adds depth */
    transition: transform 1.0s ease-in-out;
}

.tilted-image:hover {
    transform: perspective(500px) rotateY(0deg); /* Flip the tilt on hover */
}

.container {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Delay each container slightly for a staggered effect */
.container:nth-child(1) { animation-delay: 0.2s; }
.container:nth-child(2) { animation-delay: 0.4s; }
.container:nth-child(3) { animation-delay: 0.6s; }
.container:nth-child(4) { animation-delay: 0.8s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.headerTitleContainer{
	text-align:center;
	margin-bottom:40px;
}
.headerTitleContainer h1{
	font-size:4em !important;
	line-height:1.1em !important;
	font-weight:500 !important;
}
.headerTitleContainer h2{
	font-size:1.5em !important;
	line-height:1.1em !important;
	font-weight:300 !important;
}

.homeGridLayout {
	display:grid;
	grid-template-columns: 2.0fr 1fr;
	margin-top:20px;
}

.gray{
	background-color:#eee;
}


.homeCard{
	border:solid 1px #ccc;
	border-radius:10px;
	padding:10px;
	margin:10px;
	overflow:hidden;
}

/* Ensure last paragraph p tag content is always pushed to the bottom of the DIV */
.homeCard {
    position: relative;
    min-height: 300px; /* Adjust as needed */
}
.homeCard p:last-child {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

/* --- */

.homeCard h2{
	margin-top:10px;
	margin-bottom:20px !important;
	line-height:1.1em !important;
}

.homeRightColumnCard{
	border:solid 1px #ccc;
	border-radius:10px;
	padding:10px;
	margin:10px;
}

.homeRightColumnCard h2{
	margin-bottom:20px;
	margin-top:10px;
	line-height:1.1em;
}

.homeRightColumnCard .event_item{
	margin-top:10px;
	border-bottom:solid 1px #ddd;
}

.homeRightColumnCard .event_date{
	font-weight:500;
	margin-top:20px;
}

.homeRightColumnCard .event_details{
	font-weight:300;
	padding:5px 0 5px 0;
	line-height:1.3em;
	margin-bottom:10px;
}

.img_align_right{
	float:right;
}

/* Calapse home page to single column */
@media only screen and (max-width:928px) {
	.homeGridLayout {
		grid-template-columns: 1.0fr;
	}
}

/* Expand image to 100% width for mobile devices*/
@media only screen and (max-width:540px) {
	.img_540_to_100p{
		width:100%;
	}
}

/* Ensure link / buttons start wrapping around again for mobile devices */
@media only screen and (max-width:550px) {
	.homeCard p:last-child {
	    position: relative;
}