/*GRID Common Styles*/
#ect-grid-wrapper {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 10px auto;
  padding: 0;
  box-sizing: border-box;
  max-width: 100% !important;
}
#ect-grid-wrapper * {
  box-sizing: border-box;
}
.ect-grid-event-area {
    word-break: break-all;
}
#ect-grid-wrapper .row {
  display: flex;
  width: calc(100% + 30px);
  margin: 0 -15px 0 -15px;
  flex-wrap: wrap;
}
#no-image-events .ect-grid-image {
  display: none !IMPORTANT;
}


.ect-grid-event {
  display:inline-block;
  padding-bottom: 30px;
  position: relative;
  box-sizing: border-box;
}
.ect-grid-event.col-md-3:nth-of-type(4n+5),
.ect-grid-event.col-md-4:nth-of-type(3n+4),
.ect-grid-event.col-md-6:nth-of-type(2n+3) {
  clear:both;
}
.ect-grid-event-area {
  background: #f4fcff;
  box-shadow: inset 0 0 25px -5px #d1e6ed;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-bottom:10px;
}


.ect-grid-image,
.ect-grid-image a {
  display: inline-block;
  height: 250px;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.ect-grid-image img {
  object-fit: cover;
  width: 100%;
  height: 250px;
  object-position: center;
}
.col-md-3 .ect-grid-image,
.col-md-3 .ect-grid-image a,
.col-md-3 .ect-grid-image img {
  height: 200px;
}


#ect-grid-wrapper .ect-share-wrapper {
  position: absolute;
  right: 7px;
  bottom: 8px;
  z-index: 11;
}
#ect-grid-wrapper .style-2 .ect-share-wrapper {
  right: 16px;
}
#ect-grid-wrapper .ect-share-wrapper .ect-social-share-list {
  left:inherit;
  right:0;
}
#ect-grid-wrapper .ect-share-wrapper .ect-social-share-list:before {
  left:inherit;
  right: 6px;
}
#ect-grid-wrapper .ect-share-wrapper .ect-social-share-list a {
  height:auto;
  width:auto;
}


.ect-grid-date {
  display: inline-block;
  width: calc(100% - 20px);
  padding: 20px 10px;
  background: #dbf5ff;
  margin: 0 10px;
  box-sizing: border-box;
  position: relative;
  margin-top: -45px;
  vertical-align: top;
  font-size:28px;
}
.ect-grid-date .ev-day {
  display: inline-block;
  font-size:1em;
  vertical-align: middle;
}
.ect-grid-date .ev-mo, .ect-grid-date .ev-yr {
  display: inline-block;
  font-size:0.9em;
  line-height:1.1em;
  vertical-align: middle;
}
.ect-grid-date .ev-time {
  display: inline-block;
  font-size:0.45em;
  width:100%;
  margin-top:2px;
}
.ect-grid-date .ev-time span {
  display:inline-block;
}
.ect-grid-date span[class^="ev-"]:nth-of-type(1) {
  font-size: 1em;
}


.ect-grid-title, .ect-grid-venue, .ect-grid-cost, .ect-grid-readmore, .ect-grid-description {
  padding: 0 10px;
  display: inline-block;
  width:100%;
}

.ect-grid-categories {
  position: absolute;
  padding: 0 10px;
  left: 8px;
  top: 4px;
}


.ect-grid-title h4 {
  margin:15px 0;
  padding:0;
  white-space: unset;
  word-break: break-word;
}
.ect-grid-title h4 a:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
}


.grid-view-venue,
.masonry-view-venue {
  display: inline-block;
  width: 100%;
  margin-bottom:15px;
}
.grid-view-venue span.ect-venue-details,
.masonry-view-venue span.ect-venue-details {
  display: inline-block;
  width: calc(100% - 42px);
  box-sizing: border-box;
  vertical-align: top;
}
.grid-view-venue span.ect-venue-details span.ect-google,
.masonry-view-venue span.ect-venue-details span.ect-google {
  display: inline-block;
  width: 100%;
}
.grid-view-venue span.ect-icon,
.ect-grid-cost span.ect-rate-icon,
.masonry-view-venue span.ect-icon {
  display: inline-block;
  width: 32px;
  height: auto;
  font-size: 24px;
  vertical-align: top;
  text-align: center;
  margin-right:4px;
  font-weight:bold;
}


.ect-grid-cost, .ect-grid-readmore {
  width: 49%;
}
.ect-grid-readmore.full-view {
  width: 100%;
}
.ect-grid-readmore a {
  width: 100%;
  border: 1px solid;
  padding: 4px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  font-size: 15px;
  white-space: unset;
  word-break: break-word;
}
.ect-grid-readmore a:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
}



/*Style-2*/
.style-2 .ect-grid-date {
  margin-top: 10px;
  border-radius: 2px;
}
.style-2 .ect-grid-image {
  padding:10px;
  background:none !Important;
}
.style-2 .ect-grid-image,
.style-2 .ect-grid-image a {
  height: 200px;
}
.style-2 .ect-grid-image img {
  height: 200px;
}
.style-2 .ect-grid-categories {
  top: 0;
  left: 0;
  position: relative;
}
.ect-grid-border {
  display: inline-block;
  width: calc(100% - 20px);
  padding: 0;
  margin: 0 10px;
}
.ect-grid-border:before {
  content: " ";
  width: 100%;
  display: inline-block;
  height: 3px;
  background: #222;
  margin: 15px 0;
}



/*Style-3*/
.style-3 .ect-grid-event-area {
  border-radius: 5px;
  overflow: hidden;
  border-bottom:5px solid;
}
.style-3 .ect-grid-date {
  width: 100%;
  padding: 15px 10px 5px;
  background: none !IMPORTANT;
  margin: 0;
  margin-top: 0;
}
.style-3 .ect-grid-title h4:before {
  content: '\e804';
  font-family: ecticons;
  display: inline-block;
  width: 32px;
  height: auto;
  font-size: 24px;
  vertical-align: top;
  text-align: center;
  margin-right:4px;
  font-weight:bold;
}
.style-3 .ect-grid-title h4 a {
  display: inline-block;
  width: calc(100% - 42px);
  box-sizing: border-box;
  vertical-align: top;
}
.style-3 .ect-grid-date i.ect-icon-clock {
  display: inline-block;
  width: 32px;
  height: auto;
  font-size: 24px;
  vertical-align: top;
  text-align: center;
  margin-right: 4px;
  font-weight: bold;
}
#ect-grid-wrapper .ect-load-more.style-3  .ect-load-more-btn {
  border-radius:5px;
}


/* If the browser window is smaller than 860px, make the columns stack on top of each other */
@media only screen and (max-width: 860px) {
  
}
/**
*Masonry layout
*/
button.ect-masnory-filter-btn {
  display: inline-block;
  padding: .75em .8em;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #34495e;
  color: #34495e;
  font-size: 1rem;
  background-color: rgba(52, 73, 94, 0);
  border-radius: 0;
  margin-bottom: 10px;
  margin-left: -1px;
  cursor: pointer;
  text-transform: capitalize;
}
button.ect-masnory-filter-btn.active {
 color: #fff;
  background-color: #34495e;
}
button.ect-masnory-filter-btn:hover {
  color: #fff;
  text-decoration: none;
  background-color: #34495e;
}

ul.ect-categories {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: calc(100% - 24px);
  margin-left: 12px;
  margin-bottom: 10px;
}
ul.ect-categories li {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid;
  cursor: pointer;
  margin-left: 0;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 3px;
}

div#ect-cat-load-more {
  text-align: center;
  opacity: 0.7;
  display: inline-block;
  width: 100%;
  margin: 30px 0;
}
.ect-masonay-load-more {
  display: inline-block;
  width: calc(100% - 20px);
  clear: both;
  margin: 0 0 40px 10px;
}
.ect-masonay-load-more a.ect-load-more-btn {
  border: 1px solid;
  display:inline-block;
  width:100%;
  padding: 5px 10px;
  list-style:none;
  text-align:center;
}
.ect-masonay-load-more a.ect-load-more-btn img.ect-preloader {
  width: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 4px;
  opacity: 0.6;
}
.ect-btn-text{
  margin-right:5px;
}
.ect-grid-description a.ect-events-read-more {
  display: none;
}
.ect-grid-description .ect-event-content p {
  display: inline-block;
  width: 100%;
  word-break: break-word;
  padding:0;
  margin:5px 0 10px;
}
/**
* Style 4 Css
*/
.ect-date-schedule {
  background: white;
  border: 1px solid #C5C5C5;
  padding: 2px;
  position: absolute;
   bottom: -1rem; 
  right: 1rem;
}
.ect-date-schedule-wrap {
  padding: 6px;
  align-items: center;
  border: 1px solid #C5C5C5;
  display: flex;
  flex-direction: column;
  /* height: 3.063rem; */
  justify-content: center;
  /* width: 3.063rem; */
}
.ect-date-schedule .ev-mo {
  color: #FA5A41;
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  line-height: 0.9;
}
.ect-date-schedule .ev-day {
  font-size: 1.5rem;
  line-height: 1;
}
.ect-grid-image-style4{
  display: inline-block;
  /* height: 250px;
  overflow: hidden; */
  width: 100%;
  position: relative;
} 
.ect-date-schedule span {
  display: block;
  text-align: center;
}
#ect-grid-wrapper .ect-share-wrapper-style-4 .ect-share-wrapper {
 
  left: 10px;
}

/* masonry template max width*/

.ect-masonry-template-cont{
  max-width: 100%!important;
}