﻿/* 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 10px 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((100% - (20px * 4)) / 5); /*height: 120px;*/ position: relative;overflow: hidden;background: #fff;margin: 0 20px 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%;}
