﻿.epgPsFeaturedEvents { margin-left: 0; }
.epgPsFeaturedEvents .events { display: inline-block; width: 100%; }
.epgPsFeaturedEvents .events .event { margin-bottom: 24px; }
.epgPsFeaturedEvents h3 { text-transform: capitalize; font-size: 2em; font-family: 'Segoe UI Light', 'Segoe UI', Arial, Tahoma, sans-serif; margin-bottom: 18px; min-height: 32px; }

.epgPsFeaturedEvents .heroWrap { position: relative; }
.epgPsFeaturedEvents .hero { display: block; background-position: center; background-repeat: no-repeat; background-size: 100%; height: 180px; position: relative; margin-bottom: 14px; }
.epgPsFeaturedEvents .overlay { position: absolute; bottom: 0; width: 100%; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.epgPsFeaturedEvents .overlayInner { padding: 4px 0px 4px 10px; overflow: hidden; }
.epgPsFeaturedEvents .overlayInner > * { float: left; }

/* Icon in overlay */
.epgPsFeaturedEvents .overlay .icon { width: 16px; height: 20px; background-size: 100%; margin-right: 10px; background-repeat: no-repeat; background-position: left center; }
/* TODO: Update event icon to a font icon */
.epgPsFeaturedEvents .overlay .eventIcon { background-image: url('/global/enterprise/publishingimages/homepage/calendar_icon.png'); width: 22px; }

.epgPsFeaturedEvents .overlay .overlayText { margin-top: 5px; }
.epgPsFeaturedEvents a { color: #008cf2; }
.epgPsFeaturedEvents a:hover { text-decoration: underline; }

.epgPsFeaturedEvents .title { font: 1.5em "Segoe UI",Arial,Tahoma,sans-serif; line-height: 1.16em; display: block; }
.epgPsFeaturedEvents .description { margin-bottom: 22px; }
.epgPsFeaturedEvents .dateAuthor { font-size: .7em; }
.epgPsFeaturedEvents .date { margin-right: 10px; }

.epgPsFeaturedEvents .additionalStory { font-size: 1.125em; line-height: 2em; border-top: 1px solid #dcdcdc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #008cf2; }
.epgPsFeaturedEvents .additionalStory:last-of-type, .epgPsFeaturedEvents .additionalStory.lastStory { border-bottom: 1px solid #dcdcdc; }

/* CTA links (View All) */
.epgPsFeaturedEvents .ctas { font-size: .9em; margin-top: 15px; }
html[dir="ltr"] .epgPsFeaturedEvents .ctas { text-align: right; }
html[dir="rtl"] .epgPsFeaturedEvents .ctas { text-align: left; }
.epgPsFeaturedEvents .ctas a { display: inline-block; }
.epgPsFeaturedEvents .ctas a:hover { text-decoration: none; }
html[dir="ltr"] .epgPsFeaturedEvents .ctas .viewAll:after { font-family: "Enterprise Icons" !important; content: 'm'; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; text-decoration: none !important; line-height: .4; vertical-align: bottom; font-size: 24px; margin-left: 4px; text-align: right; }
html[dir="rtl"] .epgPsFeaturedEvents .ctas .viewAll:before { font-family: "Enterprise Icons" !important; content: 't'; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; text-decoration: none !important; line-height: .4; vertical-align: bottom; font-size: 24px; margin-left: 4px; text-align: right; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    html[dir="ltr"] .epgPsFeaturedEvents .ctas .viewAll:after { line-height: .7; }
    html[dir="rtl"] .epgPsFeaturedEvents .ctas .viewAll:before { line-height: .7; }
}

/* Adjust margins for event containers in a single column */
.epgPsFeaturedEvents .events.singleCol .event { margin-left: 0; margin-right: 0; }

/* ie8 support (no media queries */
.ie8orless .epgPsFeaturedEvents .events .event { float: left; margin-right: 1.5% !important; }
.ie8orless .c-420 .epgPsFeaturedEvents .events .event { float: left; width: 100% !important; margin-right: 1.5% !important; }


/* Mobile Only */
@media screen and (max-width: 479px) {
    .epgPsFeaturedEvents .events .event { float: none; width: 100% !important; }
}

/* Small Tablet and above */
@media screen and (min-width: 480px) {
    .epgPsFeaturedEvents .events .event { float: left; margin: 0 1.5% 34px; }
    .epgPsFeaturedEvents .events .event:first-of-type, .epgPsFeaturedEvents .events .event.first { margin-left: 0; }
    .epgPsFeaturedEvents .events .event:last-of-type, .epgPsFeaturedEvents .events .event.last { margin-right: 0; }
    .epgPsFeaturedEvents .hero { background-size: 100%; }
    .epgPsFeaturedEvents .overlay { bottom: 10%; }
    .epgPsFeaturedEvents .title { margin-top: -1em; }
}

/* Larger tablet and above */
@media screen and (min-width: 691px) {
    .epgPsFeaturedEvents { margin-left: 3%; }
}

@media screen and (max-width: 890px), only screen and (max-device-width: 890px) {
    .row > .col.lastCol { margin-left: 0; }
}

@media screen and (min-width: 900px) {
    .epgPsFeaturedEvents .overlay { bottom: 0; }
    .epgPsFeaturedEvents .title { margin-top: 0; }
}
