/*.event{position: relative;}*/
#events .card {
    border-radius: 0px;
}
.event--popup{z-index: 1061}
.event--popup .modal-content {
    color: #000;
    flex-direction: row;
}
.event figure{margin: 0;height: 235px;background-color: #ececec;overflow: hidden;}
.event a{position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 999;}
.event .card {
    border-top: 0;
    background-color: #ffffff;
}
.event .card {
    padding-bottom: 45px;
    overflow: hidden;
}
.event .card {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    height: 180px;
    padding: 15px;
    display: block;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0 19px 38px rgba(0,0,0,0.05), 0 15px 12px rgba(0,0,0,0.05);
}
.event .card {
    -webkit-transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.event .card .ripple {
    display: block;
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 19px;
    top: 16px;
    left: 17px;
    background-color: #ccc;
    transform: scale(1);
    -webkit-transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
}


.event .card .ev-date {
    padding: .1em .5em 0 .5em;
    color: #fff;
    border-radius: 2px;
}

.event .card .ev-date .ev-day {
    margin: 0 .3em 0 0;
}
.event .card .ev-date .ev-month {
}
.event .card .title {
    /* -webkit-transition: all .1s cubic-bezier(0.4, 0.0, 0.2, 1); */
    -moz-transition: all .1s cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: all .1s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.event .card .title {
    font-weight: 500;
    color: #585858;
    font-size: 1rem;
    margin: .6em 0;
}
.event .card .ev-hour {
    color: #848484;
    font-weight: 500;
    font-size: .9rem;
}
.event .card .ev-address {
    position: absolute;
    bottom: 11px;
    left: 15px;
    color: #656565;
    font-size: 1rem;
    max-width: calc(100% - 65px);
}
.event .card .read_more {
    bottom: 10px;
}
.event .card .read_more {
    position: absolute;
    bottom: 5px;
    right: 15px;
}
.arrow-icon {
    position: relative;
    top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
}
.event .card .arrow-icon g {
    -webkit-transition: all .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: all .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: all .25s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.arrow-icon--circle {
    -webkit-transition: stroke-dashoffset .3s ease;
    transition: stroke-dashoffset .3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}
#events .event{margin-bottom: 40px;}
#events .event:nth-child(1n) .ripple, #events .event:nth-child(1n) .ev-date, #events .event:nth-child(1n) .arrow-icon g{background-color: #d76c34}
#events .event:nth-child(2n) .ripple, #events .event:nth-child(2n) .ev-date, #events .event:nth-child(2n) .arrow-icon g{background-color: #829b48}
#events .event:nth-child(3n) .ripple, #events .event:nth-child(3n) .ev-date, #events .event:nth-child(3n) .arrow-icon g{background-color: #cfac44}
#events .event:nth-child(4n) .ripple, #events .event:nth-child(4n) .ev-date, #events .event:nth-child(4n) .arrow-icon g{background-color: #4c97ac}

#events .event:nth-child(1n) .arrow-icon g{stroke: #d76c34}
#events .event:nth-child(2n) .arrow-icon g{stroke: #829b48}
#events .event:nth-child(3n) .arrow-icon g{stroke: #cfac44}
#events .event:nth-child(4n) .arrow-icon g{stroke: #4c97ac}

/*Hover*/
.event:focus, .event:hover {
    text-decoration: none;
    outline: none;
}
.event:hover .card .ripple {
    transform: scale(20);
}
.event:hover .card .ev-date {
    color: #565555;
    background-color: #fff !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.45);
    transition: .5s
}
.event:hover .card .title,.event:hover .card .ev-hour,.event:hover .card .ev-address {
    color: #ffffff;
}
#events .event:hover .arrow-icon g{
    stroke: #ffffff;
}
.event:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

/*Popup*/
.event--popup .modal-body figure{height: 100%;}
.event--popup .modal-content .close {position: absolute;right: 10px;top: 10px;z-index: 1;color: #000;opacity: .8}
.event--popup .modal-body {
    padding: 0;
    min-width: 50%;
    background-color: #c3c3c3;
}
.event--popup .modal-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event--popup .overlay-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 2em;
    min-width: 35%;
}
.event--popup__date,.event--popup__header{margin: 0 0 1em 0}
.event--popup__header{font-size: 1.4rem}
.event--popup__location,.event--popup__time,.event--popup__desc{margin: 0 0 .5em 0;color: #6f6f6f}
.event figure{margin: 0;}
.event figure img{height: 100%; object-fit: cover;width: 100%;}

/*Event Calnder Start*/
.evntCalendar{margin-top: 90px;}
.list-btn{position: absolute; right: 0; top: 40px; z-index: 2;}
.list-btn .btn i{font-size: 1rem; box-shadow: none;    color: #8a8a8a;}
.list-btn .btn:hover{box-shadow: none;}
.list-btn button{box-shadow: none;padding: 2px 10px; margin-left: 5px;    background: #f1f1f1;}
/*Event Calnder End*/

/*Media*/
@media (max-width: 992px){
.event--popup .modal-content {
    flex-direction: column;
}
.event--popup .modal-body,.event--popup .overlay-content{width: 100%}
.event--popup .modal-body figure{margin: 0}

}


@media (max-width:768px){
    .event--popup .overlay-content{width: 100%;}
    .event--popup .modal-body { padding: 0;height: auto;overflow: auto;}
}

@media (max-width: 630px){
.list-btn {
    right: 15px;
    top: 25px;
}

}


@media (max-width: 320px){

}