/*css file*/
/* Hide Guest Artsit Seciton Sitewide */
.sec-guest-artist- {
    display: none;
}
.related-courses {
    margin-top: 35px;
}
/* Hide Guest Artsit Seciton Sitewide */


header ul.site-nav ul.sub-menu {
    display: inline;
    max-height: 0;
    color: #333;
    border: transparent;
}
/*
header ul.site-nav li:hover ul.sub-menu { max-height: 100px; }
*/


header ul.site-nav li:hover ul.sub-menu {
    height: 100%;
    display: inline-table;
}
ul.sub-menu.dropdown-menu a {
    margin: 7px 7px !important;
}
header ul.site-nav li a { border-bottom: 2px solid transparent; }
    header ul.site-nav li a:hover { text-decoration: none; border-bottom: 2px solid #CD202D; }

ul.sub-menu { transition: all .5s ease-in-out; max-height: 0; left: 0; position: absolute; width: 100%; text-align: left; background-color: rgba(255, 255, 255, 0.9); overflow: hidden; z-index: 2; /* margin-top: 25px; */ }

    ul.sub-menu a { margin: 50px 25px !important; }

#s4-titlerow nav.utility-nav ul li a.close-nav { color: #cc0b2a !important; }

#s4-titlerow header { padding-bottom: 0; }

header nav.utility-nav ul li a { margin: 0 5px; color: #2F2F2F; font-weight: 400; }
header nav.utility-nav ul.sub-menu li a { font-weight: 300; padding: 0 10px; }


.sub-nav ul {font-size: 0;}
.event { display: grid; grid-template-columns: 1.5fr 4fr; }

.event-date { text-align: right; border-right: 2px solid #0076A8; padding-right: 25px; }
    .event-date p { margin-top: 0; }
.event-info { padding-left: 25px; }

.summer-arts .event hr { margin: 25px 0; }

.summer-arts .event h4 { text-transform: uppercase; margin-top: 0; color: #2F2F2F; font-size: 24px; }
.summer-arts h4 {
    font-size: 20px;
    font-weight: 400;
    font-family: "Oswald", sans-serif;
}

.grids {
    display: grid;
    grid-column-gap: 15px;
}

.grids.two-items { grid-template-columns: 1fr 1fr;}
.grids .grid {padding-bottom:35px;}
header ul.site-nav li:hover ul.sub-menu li {
    display: block;
}

.csu .btn-primary {
    background-color: #cc0b2a !important;
    color: #fff !important;
    font-size: .9375em;
    border: 2px solid #cc0b2a !important;
}
.btn-primary:hover {
    color: #cc0b2a !important;
    background-color: #fff !important;
    border-color: #cc0b2a !important;
}

@media (max-width: 767px) {
    .grids.two-items { grid-template-columns: 1fr; row-gap: 15px;}
    .event { grid-template-columns: 1fr; }
    .event-date { text-align: left; border-right: none; padding-right: 0; }
    .event-date p { margin-top: 0; }
.event-info { padding-left: 0; }
}