.split50,
.split50left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.snippetrow img {
    /* max-width: 100%;
    height: auto !important COMMENTED OUT BY PENTERA */
}

.break-word {
    word-wrap: break-word
}

.clear {
    clear: both
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

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

.snippetrow:after,
.snippetrow:before {
    content: "";
    display: table;
    clear: both
}

.snippetrow {
    width: 100%
}

.split50 {
    width: 50%;
    box-sizing: border-box
}

.split50left {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding-right: 2%
}

.split50right,
.split60left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split50right {
    width: 50%;
    padding-left: 2%;
    float: right;
    box-sizing: border-box
}

.split40left,
.split60left {
    padding-right: 2%;
    float: left
}

.split60left {
    width: 60%;
    box-sizing: border-box
}

.split40left,
.split60right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split40left {
    width: 40%;
    box-sizing: border-box
}

.split40right,
.split60right {
    padding-left: 2%;
    float: right
}

.split60right {
    width: 60%;
    box-sizing: border-box
}

.split40right,
.split65left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split40right {
    width: 40%;
    box-sizing: border-box
}

.split35left,
.split65left {
    padding-right: 2%;
    float: left
}

.split65left {
    width: 65%;
    box-sizing: border-box
}

.split35left,
.split65right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split35left {
    width: 35%;
    box-sizing: border-box
}

.split35right,
.split65right {
    padding-left: 2%;
    float: right
}

.split65right {
    width: 65%;
    box-sizing: border-box
}

.split35right,
.split70left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split35right {
    width: 35%;
    box-sizing: border-box
}

.split30left,
.split70left {
    padding-right: 2%;
    float: left
}

.split70left {
    width: 70%;
    box-sizing: border-box
}

.split30left,
.split70right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split30left {
    width: 30%;
    box-sizing: border-box
}

.split30right,
.split70right {
    padding-left: 2%;
    float: right
}

.split70right {
    width: 70%;
    box-sizing: border-box
}

.split30right,
.split80left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split30right {
    width: 30%;
    box-sizing: border-box
}

.split20left,
.split80left {
    padding-right: 2%;
    float: left
}

.split80left {
    width: 80%;
    box-sizing: border-box
}

.split20left,
.split80right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split20left {
    width: 20%;
    box-sizing: border-box
}

.split20right,
.split80right {
    padding-left: 2%;
    float: right
}

.split80right {
    width: 80%;
    box-sizing: border-box
}

.split20right,
.split90left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split20right {
    width: 20%;
    box-sizing: border-box
}

.split10left,
.split33left,
.split90left {
    padding-right: 2%;
    float: left
}

.split90left {
    width: 90%;
    box-sizing: border-box
}

.split10left,
.split90right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split10left {
    width: 10%;
    box-sizing: border-box
}

.split10right,
.split90right {
    padding-left: 2%;
    float: right
}

.split90right {
    width: 90%;
    box-sizing: border-box
}

.split10right,
.split33left {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split10right {
    width: 10%;
    box-sizing: border-box
}

.split33left {
    width: 33.3%;
    box-sizing: border-box
}

.split33middle,
.split33right {
    width: 33.3%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split33middle {
    padding-left: 1%;
    padding-right: 1%;
    box-sizing: border-box
}

.split33right {
    padding-left: 2%;
    box-sizing: border-box
}

.split25colA,
.split25colB {
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: left
}

.split25colA {
    padding-right: 1%;
    box-sizing: border-box
}

.split25colB {
    padding-right: 1%;
    box-sizing: border-box
}

.split25colC,
.split25colD {
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.split25colC {
    padding-left: 0%;
    padding-right: 1%;
    float: left;
    box-sizing: border-box
}

.split25colD {
    padding-left: 0%;
    padding-right: 1%;
    float: right;
    box-sizing: border-box
}

.split20colA,
.split20colB,
.split20colC,
.split20colD,
.split20colE {
    width: 20%;
    padding-right: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 0
}

.split20colA,
.split20colB,
.split20colC,
.split20colD {
    float: left;
    box-sizing: border-box
}

.split20colE {
    float: right;
    box-sizing: border-box
}

.split16colA,
.split16colB,
.split16colC,
.split16colD,
.split16colE {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 16.6%;
    padding-right: 2%;
    float: left
}

.split16colA,
.split16colB,
.split16colC,
.split16colD {
    padding-left: 0;
    box-sizing: border-box
}

.split16colE {
    ppadding-left: 0;
    box-sizing: border-box
}

.split16colF {
    width: 16.6%;
    padding-left: 0;
    padding-right: 2%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.paddingtop10 {
    padding-top: .625em
}

.paddingtop20 {
    padding-top: 1.25em
}

.paddingtop30 {
    padding-top: 1.875em
}

.paddingtop40 {
    padding-top: 2.5em
}

.paddingtop50 {
    padding-top: 3.125em
}

.paddingbottom10 {
    padding-bottom: .625em
}

.paddingbottom20 {
    padding-bottom: 1.25em
}

.paddingbottom30 {
    padding-bottom: 1.875em
}

.paddingbottom40 {
    padding-bottom: 2.5em
}

.paddingbottom50 {
    padding-bottom: 3.125em
}

.margintop10 {
    margin-top: .625em
}

.margintop20 {
    margin-top: 1.25em
}

.margintop30 {
    margin-top: 1.875em
}

.margintop40 {
    margin-top: 2.5em
}

.margintop50 {
    margin-top: 3.125em
}

.marginbottom10 {
    margin-top: .625em
}

.marginbottom20 {
    margin-top: 1.25em
}

.marginbottom30 {
    margin-top: 1.875em
}

.marginbottom40 {
    margin-top: 2.5em
}

.marginbottom50 {
    margin-top: 3.125em
}

.paddingleft10 {
    padding-left: .625em
}

.paddingleft20 {
    padding-left: 1.25em
}

.paddingleft30 {
    padding-left: 1.875em
}

.paddingleft40 {
    padding-left: 2.5em
}

.paddingleft50 {
    padding-left: 3.125em
}

.paddingright10 {
    padding-right: .625em
}

.paddingright20 {
    padding-right: 1.25em
}

.paddingright30 {
    padding-right: 1.875em
}

.paddingright40 {
    padding-right: 2.5em
}

.paddingright50 {
    padding-right: 3.125em
}

@media only screen and (max-width:767px) {
    .split50 {
        width: 100%
    }

    .split50left {
        width: 100%;
        padding: 0
    }

    .split50right {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split40,
    .split60 {
        width: 100%
    }

    .split40left,
    .split60left {
        width: 100%;
        padding: 0
    }

    .split40right,
    .split60right {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split35,
    .split65 {
        width: 100%
    }

    .split35left,
    .split65left {
        width: 100%;
        padding: 0
    }

    .split35right,
    .split65right {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split30,
    .split70 {
        width: 100%
    }

    .split30left,
    .split70left {
        width: 100%;
        padding: 0
    }

    .split30right,
    .split70right {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split20,
    .split80 {
        width: 100%
    }

    .split20left,
    .split80left {
        width: 100%;
        padding: 0
    }

    .split20right,
    .split80right {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split10,
    .split90 {
        width: 100%
    }

    .split10left,
    .split90left {
        width: 100%;
        padding: 0
    }

    .split33left,
    .split10right,
    .split33middle,
    .split33right,
    .split90right {
        padding: 1.125em 0 0;
        width: 100%
    }

    .split33left {
        width: 100%
    }

    .split25colA {
        width: 100%;
        padding: 0
    }

    .split25colB,
    .split25colC,
    .split25colD {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split20colA {
        width: 100%;
        padding: 0
    }

    .split20colB,
    .split20colC,
    .split20colD,
    .split20colE {
        width: 100%;
        padding: 1.125em 0 0
    }

    .split16colA {
        width: 100%;
        padding: 0
    }

    .split16colB,
    .split16colC,
    .split16colD,
    .split16colE,
    .split16colF {
        width: 100%;
        padding: 1.125em 0 0
    }

    .marginLeftAuto {
        margin-left: auto
    }

    .marginRightAuto {
        margin-right: auto
    }
}

/* NEW EVENT DETAIL LAYOUTS */
/* Layout 1 */
.imod_eventDetails_layout1--box {
    background: #eee;
    padding: 2em 2em 4em;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 3em
}

.imod_eventDetails_layout1--buttons {
    position: absolute;
    bottom: -1.5em;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 2em
}

.imod_eventDetails_layout1--dateTimeLoc,
.imod_eventDetails_layout1--directions {
    flex: 1 0 50%
}

.imod_eventDetails_layout1--dateTimeLoc {
    padding-right: 1em
}

.imod_eventDetails_layout1--directions {
    padding-left: 1em
}

.imod_eventDetails_layout1--directions .directions {
    border: 5px solid #fff
}

.imod_eventDetails_layout1--dateTimeLoc .date,
.imod_eventDetails_layout1--dateTimeLoc .time {
    display: block
}

.imod_eventDetails_layout1--dateTime .date,
.imod_eventDetails_layout1--dateTime .time {
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.3
}

.imod_eventDetails_layout1--dateTimeLoc h2 {
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: inherit;
    margin: 0 0 .25em
}

.imod_eventDetails_layout1--location {
    margin-top: 1em
}

.imod_eventDetails_layout1--description {
    margin: 2em 0
}

@media screen and (max-width:950px) {
    .imod_eventDetails_layout1--box {
        display: block;
        padding: 1.5em 1.5em 0
    }

    .imod_eventDetails_layout1--dateTimeLoc {
        padding: 0
    }

    .imod_eventDetails_layout1--directions {
        padding-left: 0;
        padding-top: 1em
    }

    .imod_eventDetails_layout1--buttons {
        position: relative
    }

    .imod_eventDetails_layout1--buttons input+input {
        margin: .5em
    }
}

/* Layout 2 */
.imod_eventDetails_layout2--mobile {
    display: none
}

.imod_eventDetails_layout2--date--mobile span {
    display: block;
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 700
}

.imod_eventDetails_layout2--buttons--mobile input {
    margin: 5px 0
}

.imod_eventDetails_layout2 {
    display: flex
}

.imod_eventDetails_layout2--leftCol {
    float: left;
    width: 65%;
    padding-right: 3em;
    border-right: 2px solid #eee
}

.imod_eventDetails_layout2--rightCol {
    padding-left: 3em;
    float: left;
    width: 35%
}

.imod_eventDetails_layout2--buttons {
    margin-bottom: 0em
}

.imod_eventDetails_layout2--buttons input {
    display: block;
    width: 100%
}

.imod_eventDetails_layout2--buttons input+input {
    margin-top: 10px
}

.imod_eventDetails_layout2--buttons input:last-child {
    margin-bottom: 2rem;
}

.imod_eventDetails_layout2--dateTime>span {
    display: block;
}

.imod_eventDetails_layout2 .ev-heading {
    font-size: .85em;
    margin: 0 0 .5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: inherit;
    opacity: .75
}

.imod_eventDetails_layout2--location {
    margin-top: 2em
}

.imod_eventDetails_layout2--contact {
    margin-top: 2em
}

@media screen and (max-width:950px) {
    .imod_eventDetails_layout2--mobile {
        display: block;
        margin: 0 0 2em
    }

    .imod_eventDetails_layout2--buttons {
        display: none
    }

    .imod_eventDetails_layout2--buttons--mobile {
        margin-top: 1.5em
    }

    .imod_eventDetails_layout2 {
        display: block
    }

    .imod_eventDetails_layout2--leftCol,
    .imod_eventDetails_layout2--rightCol {
        float: none;
        width: 100%;
        padding: 0
    }

    .imod_eventDetails_layout2--leftCol {
        border-right: none;
        border-bottom: 2px solid #eee;
        padding-bottom: 2em;
        margin-bottom: 2em
    }

    .imod_eventDetails_layout2--dateTime {
        display: none
    }
}

/* Layout 3 */
.imod_eventDetails_layout3 .imod_eventDetails_layout3--details {
    float: right;
    width: 35%;
    min-width: 300px;
    background: #eee;
    padding: 2rem;
    border-bottom: 8px solid #ccc;
    margin: 0 0 2rem 3rem
}

.imod_eventDetails_layout3 .sr-only {
    position: absolute;
    left: -9999999em
}

.imod_eventDetails_layout3 .imod_eventDetails_layout3--details ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.imod_eventDetails_layout3 .imod_eventDetails_layout3--details ul li+li {
    margin-top: 1.5rem
}

.imod_eventDetails_layout3 .imod_eventDetails_layout3--details ul li h3 {
    text-transform: uppercase;
    font-size: 1rem;
    display: block;
    margin: 0 0 5px;
    font-weight: 700;
    letter-spacing: 1px
}

.imod_eventDetails_layout3 .imod_eventDetails_layout3--details .imod_eventDetails_layout3 .imod_eventDetails_layout3--detail {
    display: block
}

.imod_eventDetails_layout3 .imod_eventDetails_layout3--details ul li span,
.imod_eventDetails_layout3--detail>span {
    display: block
}

@media screen and (max-width:699px) {
    .imod_eventDetails_layout3 .imod_eventDetails_layout3--buttons input+input {
        margin-top: 1rem
    }

    .imod_eventDetails_layout3 .imod_eventDetails_layout3--details {
        width: 100%;
        float: none;
        margin: 0 0 2rem 0;
        min-width: unset;
        padding: 1.5rem
    }
}

/* iMod Header Alert Banner */
.imodAlert {
    background: #222;
    display: block;
    clear: both;
    color: #fff;
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    z-index: 99999;
    top: 0;
    left: 0
}

.imodAlert a {
    color: #fff !important;
    text-decoration: underline !important;
}

.imodAlert .alertInner {
    display: block;
    max-width: 1170px;
    padding: 20px 75px 20px 15px;
    margin: 0 auto
}

.imodAlert button {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: 0 0;
    color: #fff;
    border: none;
    padding: 10px
}

.imodAlert button svg {
    width: 30px;
    height: 30px
}

.imodAlert button:focus {
    outline: 2px solid #ccc
}

.imodAlert h1 {
    color: #fff;
    font-size: 1.25rem;
    margin: 0 0 10px
}

.imodAlert p {
    margin: 0
}

@media screen and (max-width:699px) {
    .imodAlert .alertInner {
        padding: 15px
    }

    .imodAlert button {
        right: 0;
        top: 0
    }
}

/* iMod Header Alert Banner Sits at bottom */
.imodAlert.bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    top: unset;
    left: 0
}

/* adding new CPI css - two col */
.imod-progWidget.twoCol .leftCol {
    width: 65%;
    float: left;
    padding-right: 5%
}

.imod-progWidget.twoCol .rightCol {
    width: 35%;
    float: left
}

.imod-progWidget.twoCol .rightCol .giveBtn {
    padding: 0
}

.imod-progWidget.twoCol .rightCol .giveBtn .expand {
    display: block !important;
    border-radius: 0
}

.imod-progWidget.twoCol .statsWrap {
    background: #eee;
    padding: 20px 30px
}

.imod-progWidget.twoCol .statsWrap .widgetStat {
    padding: 10px 0
}

.imod-progWidget.twoCol .statsWrap .widgetStat+.widgetStat {
    border-top: 1px solid #ccc
}

.imod-progWidget.twoCol .statsWrap .widgetStat .label {
    display: inline-block
}

.imod-progWidget.twoCol .statsWrap .widgetStat .value {
    display: inline-block;
    margin-right: 10px
}

.imod-progWidget.twoCol .vizWrapper .bar {
    height: 20px
}

.imod-progWidget.twoCol .title {
    padding: 0;
    margin: 1em 0 .5em
}

@media screen and (max-width:599px) {
    .imod-progWidget.twoCol .leftCol {
        width: 100%;
        float: none;
        padding: 0
    }

    .imod-progWidget.twoCol .rightCol {
        width: 100%;
        float: none;
        margin-top: 30px
    }
}

/* adding new CPI css - overlay circle */
.imod-progWidget.defaultW2.overlayCircle {
    margin-bottom: 30px
}

.imod-progWidget.defaultW2.overlayCircle .thumb {
    position: relative;
    background: #111;
    color: #fff;
    min-height: 225px
}

.imod-progWidget.defaultW2.overlayCircle .thumb .title {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75em
}

.imod-progWidget.defaultW2.overlayCircle .statsPanel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 45px 30px 30px 230px;
    min-height: 170px
}

.imod-progWidget.defaultW2.overlayCircle .statsPanel div {
    display: block;
    width: auto;
}

.imod-progWidget.defaultW2.overlayCircle .statsPanel .value {
    line-height: 1;
}

.imod-progWidget.defaultW2.overlayCircle .statsPanel .data-viz {
    left: 20px;
    display: block;
    position: absolute;
    width: 200px;
    top: -60px;
    height: 100%
}

.imod-progWidget.defaultW2.overlayCircle .statsPanel .data-viz .bar {
    top: 0
}

.imod-progWidget.defaultW2.overlayCircle .thumb .giveBtn {
    position: absolute;
    z-index: 100;
    bottom: 0;
    right: 30px;
    width: auto;
    padding: 0;
    transform: translateY(50%);
    line-height: 1
}

.imod-progWidget.defaultW2.overlayCircle .statsRight {
    border: none
}

@media screen and (max-width:599px) {
    .imod-progWidget.defaultW2.overlayCircle .thumb .title {
        position: static;
        padding: 15px
    }

    .imod-progWidget.defaultW2.overlayCircle .thumb .giveBtn {
        transform: none;
        position: static
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel {
        display: block;
        padding: 15px
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel .data-viz {
        position: static;
        margin: 0 auto 20px
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel .data-viz .bar {
        position: relative
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel div {
        width: 100%;
        text-align: center
    }

    .imod-progWidget.defaultW2 .statsPanel .statLeft,
    .imod-progWidget.defaultW2 .statsPanel .statMid,
    .imod-progWidget.defaultW2 .statsPanel .statsRight {
        padding: 5px 15px
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel .widgetStat {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .imod-progWidget.defaultW2.overlayCircle .statsPanel .widgetStat .label {
        margin-right: 10px;
        padding: 0
    }

    .imod-progWidget.defaultW2.overlayCircle .thumb .giveBtn a {
        display: block !important;
        border-radius: 0;
    }
}

/* hiding broken LinkedIn share button */
#divSocialButtons ul li {
    padding-right: 4px !important;
}

#divSocialButtons ul li.in-share-button {
    display: none;
}

/* event pattern 1: feature */
.ev-feature {
    background: #ececec
}

.ev-feature+.ev-feature {
    margin-top: 30px
}

.ev-feature * {
    box-sizing: border-box
}

.ev-feature .thumbWrap {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    order: 1;
    position: relative;
    min-height: 100px;
    background-color: #ccc;
    overflow: hidden;
}

.ev-feature .thumbWrap .thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 275px
}

.ev-feature .thumbWrap img {
    max-width: 100%;
    visibility: hidden
}

.ev-feature .thumbWrap .date {
    position: absolute;
    left: 0;
    top: 0;
    background: #474747;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.ev-feature .thumbWrap .date .month {
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 5px
}

.ev-feature .thumbWrap .date .day {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 700
}

.ev-feature .text {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    order: 2;
    padding: 25px 30px
}

.ev-feature .text .title {
    font-size: 1.5rem;
    line-height: 1.05;
    font-weight: 700
}

.ev-feature .text .title a {
    color: inherit;
    text-decoration: none
}

.ev-feature .text .title a:focus,
.ev-feature .text .title a:hover {
    text-decoration: underline
}

.ev-feature .text .details {
    margin-top: 15px;
    line-height: 1.5
}

.ev-feature .text .details>div+div:before {
    content: "/";
    display: inline;
    margin: 0 10px 0 6px;
    font-weight: 400
}

.ev-feature .text .details .time {
    display: inline
}

.ev-feature .text .details .location {
    display: inline;
    font-weight: 700
}

.ev-feature .sr {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

@media screen and (min-width:700px) {
    .ev-feature {
        display: flex;
        flex-direction: row
    }

    .ev-feature .text {
        padding: 30px
    }

    .ev-feature .text .title {
        font-size: 1.75rem
    }

    .ev-feature:nth-child(even) .thumbWrap {
        order: 2
    }

    .ev-feature:nth-child(even) .thumbWrap .date {
        left: auto;
        right: 0
    }

    .ev-feature:nth-child(even) .text {
        order: 1
    }
}

/* event pattern 2: wide */
.ev-wide {
    border-bottom: 2px solid #ccc;
    padding-bottom: 30px
}

.ev-wide+.ev-wide {
    margin-top: 30px
}

.ev-wide * {
    box-sizing: border-box
}

.ev-wide .thumbWrap {
    position: relative;
    min-height: 100px;
    padding-bottom: 25px;
    width: 100%
}

.ev-wide .thumbWrap .thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    background-color: #ccc;
    border-bottom: 2px solid #ccc
}

.ev-wide .thumbWrap img {
    max-width: 100%;
    visibility: hidden
}

.ev-wide .thumbWrap .date {
    position: absolute;
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
    background: #474747;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 85px;
    height: 85px;
    overflow: hidden;
}

.ev-wide .thumbWrap .date .month {
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 5px
}

.ev-wide .thumbWrap .date .day {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 700
}

.ev-wide .text {
    padding: 25px 15px 0
}

.ev-wide .text .title {
    font-size: 1.25rem;
    line-height: 1.05;
    font-weight: 700
}

.ev-wide .text .title a {
    color: inherit;
    text-decoration: none
}

.ev-wide .text .title a:focus,
.ev-wide .text .title a:hover {
    text-decoration: underline
}

.ev-wide .text .details {
    margin-top: 15px;
    line-height: 1.5
}

.ev-wide .text .details>div+div:before {
    content: "/";
    display: inline;
    margin: 0 10px 0 6px;
    font-weight: 400
}

.ev-wide .text .details .time {
    display: inline
}

.ev-wide .text .details .location {
    display: inline;
    font-weight: 700
}

.ev-wide .text .cta .button {
    display: none
}

.ev-wide .text .cta a .button {
    display: inline-block;
    background: #ccc;
    color: #222;
    font-weight: 700;
    padding: 10px 20px;
    margin-top: 15px;
    transiton: all .2s ease
}

.ev-wide .text .cta a .button:focus,
.ev-wide .text .cta a .button:hover {
    background: #222;
    color: #fff
}

.ev-wide .text .cta .button .sr {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

@media screen and (min-width:700px) {
    .ev-wide {
        display: flex;
        flex-direction: row;
        padding: 0;
        border-top: 2px solid #ccc
    }

    .ev-wide .thumbWrap {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 343px;
        padding: 0;
        margin-top: -2px;
        margin-bottom: -2px
    }

    .ev-wide .thumbWrap .thumb {
        border: none
    }

    .ev-wide .thumbWrap .date {
        right: 0;
        transform: translateY(50%);
        bottom: 50%
    }

    .ev-wide .thumbWrap .thumb {
        width: 300px
    }

    .ev-wide .text {
        padding: 30px;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center
    }

    .ev-wide .text .title {
        font-size: 1.25rem
    }
}

@media screen and (min-width:1025px) {
    .ev-wide .thumbWrap {
        flex-basis: 350px
    }

    .ev-wide .thumbWrap .date {
        width: 100px;
        height: 100px
    }

    .ev-wide .text {
        padding: 30px 30px 30px 45px
    }
}

/* event pattern 3: simple */
.ev-simple {
    position: relative
}

.ev-simple+.ev-simple {
    margin-top: 30px
}

.ev-simple * {
    box-sizing: border-box
}

.ev-simple .thumb {
    width: 120px;
    display: none
}

.ev-simple .thumb img {
    max-width: 100%
}

.ev-simple .date {
    position: static;
    flex-grow: 0;
    flex-shrink: 0;
    left: 0;
    top: 0;
    background: #474747;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 85px;
    height: 85px;
    overflow: hidden;
}

.ev-simple .date .month {
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 5px
}

.ev-simple .date .day {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 700
}

.ev-simple .text {
    padding-left: 0px;
    padding-top: 15px;
    flex-grow: 1;
}

.ev-simple .text .title {
    font-size: 1.25rem;
    line-height: 1.05;
    font-weight: 700
}

.ev-simple .text .title a {
    color: inherit;
    text-decoration: none
}

.ev-simple .text .title a:focus,
.ev-simple .text .title a:hover {
    text-decoration: underline
}

.ev-simple .text .details {
    margin-top: 8px;
    font-size: .8125rem;
    line-height: 1.25
}

.ev-simple .text .details>div+div:before {
    content: "/";
    display: inline;
    margin: 0 10px 0 6px;
    font-weight: 400
}

.ev-simple .text .details .time {
    display: inline
}

.ev-simple .text .details .location {
    display: inline;
    font-weight: 700
}

.ev-simple .sr {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ev-simple .text .preview {
    margin-top: 8px
}

@media screen and (min-width:700px) {
    .ev-simple {
        display: flex;
        flex-direction: row;
        padding: 0
    }

    .ev-simple .thumbWrap .thumb {
        border: none
    }

    .ev-simple .thumb {
        display: block;
        flex-shrink: 0;
        margin-left: 35px
    }

    .ev-simple .text .title {
        font-size: 1.25rem
    }

    .ev-simple .text {
        padding-left: 30px;
    }
}