/*///////////////////////////////////////////////////////////////////
PERFORMANCE SHORTCODE STYLES
///////////////////////////////////////////////////////////////////*/

:root{
    --green: #245b44;
    --dark-green: #1c4735;
}

.performance-list{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.performance-card{
    background: #fff;
	/*border: 3px solid #fff;*/
    border-radius: 10px;
    display: grid;
    font-family: "Averia Serif Libre", sans-serif;
    font-weight: 300;
    grid-template-columns: 15% 1fr 20%;
    overflow: hidden;
	box-shadow: 2px 2px 8px #0000003d;
}

.performance-card > div{
    padding: 24px;
}

.performance-card .event-date{
    background: var(--dark-green);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "Aglatia", Sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    justify-content: center;
    line-height: 1.3em;
    text-align: center;
}

.performance-card .event-date .day{
    font-size: 1.7em;
    font-weight: 600;
    margin: 10px 0 4px;
}

.performance-card .event-info h3{
    font-family: "Aglatia", Sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    margin: 0 0 10px;
}

.performance-card .event-info h3 a{
    color: var(--green);
    transition: color ease 0.3s;
}

.performance-card .event-info h3 a:hover{
    color: #444;
}

.performance-card .event-info .event-excerpt{
	font-size: 1.1em;
    font-weight: 300;
    margin-top: 8px;
	padding-left: 22px;
}

.performance-card .event-button{
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 6px;
}

.performance-card .event-button a.button-rounded{
    border: 3px solid var(--green);
    border-radius: 50px;
    color: var(--green);
	font-family: "Averia Serif Libre", Sans-serif;
    font-size: .8em;
	font-weight: 400;
    padding: 12px 20px;
	text-transform: uppercase;
    transition: all ease 0.3s;
}

.performance-card .event-button a.button-rounded.ticket{
	background: var(--green);
	color: #fff;
	font-size: .8em;
	padding: 12px 20px 10px;
}

.performance-card .event-button a.button-rounded:hover,
.performance-card .event-button a.button-rounded.ticket:hover{
    background: var(--dark-green);
    border-color:var(--dark-green);
    color: #fff;
}

.performance-card .event-time,
.performance-card .event-location{
	font-size: 1.1em;
}

.performance-card .event-time i,
.performance-card .event-location i{
	font-size: .8em;
    color: #416c4d;
    width: 18px;
}

.performance-card .event-address{
	opacity: .7;
	padding-left: 22px;
}

.past-performances .performance-card .event-date{
    background: #141414;
}

.past-performances .performance-card .event-info h3 a,
.past-performances .performance-card .event-time i,
.past-performances .performance-card .event-location i{
	color: #363636;
}


@media screen and (max-width: 767px) {
    .performance-card{
        grid-template-columns: 1fr;
    }

    .performance-card > .event-date,
    .performance-card .event-info,
    .performance-card .event-button{
        padding: 18px 20px;
    }

    .performance-card .event-button{
		align-items: center;
        justify-content: center;
    }
}