/* Gallery */
.event-date {color: #292929;font-size:14px;line-height:14px;}
.event-snapshot {/*text-align: center;*/}
.event-gallery-container {width: 100%;display: flex;flex-wrap: wrap;}
.event-gallery {width: calc((98% - (20px * 4)) / 5); margin: 0 0.5% 10px;}
.event-gallery .event-gallery-image {margin: 0;}
.event-gallery.grid {display: flex;flex-direction: column;}
.event-gallery.grid .event-gallery-image {width: 100%;margin-bottom:5px;}
.event-gallery.list {width: 100%;display: flex;flex-direction: row;margin-right: 0;}
.event-gallery.list .event-gallery-image {width: 200px;margin-bottom: 0;}
.event-gallery-image {width: calc((99% - (1% * 4)) / 5); /*height: 120px;*/ position: relative;overflow: hidden;background: #fff;margin: 0 1% 10px 0; box-sizing: border-box;border: 1px solid #ddd;}
/*.event-gallery:nth-child(5n), .event-gallery-image:nth-child(5n) {margin-right: 0; }*/
.event-gallery-image a {display: block;width: 100%;height: 0;}
.event-gallery-image img, .event-gallery-video img {position: absolute;width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.event-gallery-image img.potrait {width: auto;height: 100%;}
.event-gallery-video {
    width: 100%;
    /*height: 135px;*/
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lazyload {
    opacity: 0;
}
.lazyloading {
    opacity: 1;
    transition: 300ms opacity;
    background: #f7f7f7 url(../img/cmn/loading.gif) no-repeat center;
    min-height: 60px;
}
.divListPaginationTop{display:inline-block;}
.divIndEvtPrev, .divIndEvtNext{display:inline-block;padding-left:20px;float:unset;}
.disabled,.disabled:hover{text-decoration:none;color:unset;}
.divEventTopDescInnerTopRight{float:unset;}

.divBackToListTop {height:auto; width:100%; overflow:hidden; padding:0px 0px 10px; border-bottom:solid 1px #e0e0e0; margin-bottom:30px;}
.divIndEvtBack {/*float:left; padding-top:6px;*/}
.divBackToListInner {height:auto; overflow:hidden; float:right; /*text-align:right;*/ padding-top:5px; padding-bottom:5px;}
.divIndEvtPrevDisabled {float:right; }
.divIndEvtNextDisabled {float:right; }

/*Change border and background color according to project style*/
.divIndEvtCommentLeft {float:left; width:150px; height:100%; padding-right:20px; border-right:dotted 1px #00aff0;}
.divCommentPostedDate { color:#00aff0; font-size:18px; font-weight:400;}
.divIndEvtReply {padding:15px 45px; margin:15px 0 0 15px; color:#fff; background:url(../img/usr/icon-replay.gif) no-repeat 15px 18px, #00aff0;}
/*4 different color type */
.type1:active, .type1.selected {
    /*background-image: linear-gradient(to right, #db0084, #ff3434);*/
    /*left: 0;*/
    color: #fff;
}

.type2:active, .type2.selected {
    /*background-image: linear-gradient(to right, #005bff, #00cbe6);*/
    color: #fff;
    /*left: 243px;*/
}

.type3:active, .type3.selected {
    /*background-image: linear-gradient(to right, #1ce49b, #76c212);*/
    color: #fff;
    /*left: 485px;*/
}

.type4:active, .type4.selected {
    /*background-image: linear-gradient(to right, #6d00d3, #9f2b98);*/
    color: #fff;
    /*left: 725px;*/
}
.divEventList{width:100%;}
.divIndEvent {width:100%;}
.divClickMore, .divEventDetailsMb, .divEventGall4Mb, .divListPaginationMb {display:none;}

/*Responsive*/
@media only screen and (max-width:1199px) {
.divMiddleCtnSubGall, .divMainCtnTopMiddleBtm, .pnlEvent, .pnlIndEvent {width:100% !important;}
.pnlEvent .event-gallery {width:calc(97% / 3) !important;}
.pnlIndEvent .event-gallery {margin:0px 1% 10px 0px;}
.event-snapshot {margin-bottom:10px;}
}

@media only screen and (max-width:900px) {
.divListPaginationTop {width:100%;}
.divEventList .divListTopInner, .divEventList .divListPaginationInner {display:flex; align-items:center; justify-content:space-between; border:1px solid #ccc; box-sizing:border-box; width:100%;}
.event-arrow {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.event-arrow.prev {border-right: solid 1px #ccc;}
.event-arrow.next {border-left: solid 1px #ccc;}
.event-arrow.disabled {color: #858585;cursor: not-allowed;}
.pnlEvent .divDdlSort {display:none;}
.divListPaginationMb, .divEventGall4Mb {display:block;}
.divIndEvtPrev, .divIndEvtNext{padding-left:0px;}
#gridwrapper_jgy {display:none;}
}

@media only screen and (max-width:600px) {
.divClickMore {text-align:center; margin-bottom:15px; display:block;}
.divEventDetails {display:none;}
.divEventDetailsMb, .divEventDetailsSame {display:block;}
.pnlEvent .event-gallery {width:100% !important;}
}