#events-container {
  width:100%;
  display: flex;
  position: relative;
  flex-flow: column;
}

#events-container > ul {
  display: flex;
  flex-flow: wrap;
  list-style: none;
  padding:0;
  margin:0 auto;
  width: 100%;
  max-width: 1400px;
}

#events-container > ul > li {
  width: 25%;
  padding:16px;
  box-sizing: border-box;
  display: flex;
  transition: all .2s fade-in;
  cursor: pointer;
}

#events-container > ul > li .quick-view-only {
  display: none;
}

#events-container > ul > li.hide {
  display: none;
}

#events-container > ul > li .card {
  position: relative;
  box-shadow: 0 16px 64px -16px rgba(46,55,77,.1);
}

#events-container > ul > li.quick-view .card {
  width: 100%;
  box-shadow: none;
}
#events-container > ul > li .card:hover {
	-webkit-box-shadow: 0 16px 64px -16px rgba(46,55,77,.29);
	box-shadow: 0 16px 64px -16px rgba(46,55,77,.29);
}

#events-container > ul > li.quick-view .card:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

#events-container > ul > li .card {
	background-color: transparent;
	-webkit-transition: background-color .24s cubic-bezier(.4,0,.3,1),-webkit-box-shadow .24s cubic-bezier(.4,0,.3,1);
	transition: background-color .24s cubic-bezier(.4,0,.3,1),-webkit-box-shadow .24s cubic-bezier(.4,0,.3,1);
	transition: box-shadow .24s cubic-bezier(.4,0,.3,1),background-color .24s cubic-bezier(.4,0,.3,1);
	transition: box-shadow .24s cubic-bezier(.4,0,.3,1),background-color .24s cubic-bezier(.4,0,.3,1),-webkit-box-shadow .24s cubic-bezier(.4,0,.3,1);
}

#events-container > ul > li .card-info {
	padding: 24px 16px 48px 16px;
	display: flex;
	width: 100%;
	flex-flow: column;
}

#events-container > ul > li.quick-view .card-info {
	padding: 24px 16px 16px 16px;
}

#events-container > ul > li .item-attributes {
  position: absolute;
  left:0;
  bottom:0;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
}

#events-container > ul > li.quick-view .item-attributes {
  display: none;
}

#events-container > ul > li .item-attributes .item-price {
  color: #2f3787;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  padding:0 0 24px 16px;
}
#events-container > ul > li .item-attributes .item-status {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  padding:0 16px 24px 0px;
}

#events-container > ul > li .item-attributes .item-view {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  padding:0 16px 24px 0px;
  display: none;
}

#events-container > ul > li:hover .item-attributes .item-view {
  display: block;
}

#events-container > ul > li.quick-view .item-attributes .item-view {
  display:none;
}

#events-container > ul > li .item-attributes .item-view::before {
  content:"\f06e";
  font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

#events-container > ul > li .item-status span {
  padding: 2px 7px;
	font-size: .8rem;
	border-radius: 4px;
  color: #ededed;
}
#events-container > ul > li .item-status.available span {
  background-color: #0CCE6B;
}
#events-container > ul > li .item-status.limited span {
  background-color: #ed7d3a;
}
#events-container > ul > li .item-status.soldout span {
  background-color: #ef2d56;
}
#events-container > ul > li .item-status.cancelled span {
  background-color: #363537;
}
#events-container > ul > li .item-status.blocked span {
  background-color: #fff;
  color: #363537;
}

#events-container > ul > li .item-name h3 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: #363537;
}

#events-container > ul > li.quick-view .item-name h3 {
  font-size: 1.9rem;
  line-height: 1.9rem;
  font-weight: 700;
  color: #363537;
}

#events-container > ul > li .item-image img {
  border:1px solid #ededed;
}

#events-container > ul > li.quick-view .item-image img {
  border:0px solid #ededed;
}

#events-container > ul > li .item-date {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #2f3787;
}


#events-container > ul > li.quick-view {
  position: fixed;
  z-index:10001;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border:1px solid #ededed;
  width: 900px;
  cursor: default;
  padding:10px;
  display: flex;
  flex-flow: row wrap;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#events-container > ul > li.quick-view::-webkit-scrollbar {
  display:none;
}

#events-container > ul > li.quick-view a.close-quick-view {
	text-align: right;
	font-size: 4rem;
	margin: 0 0 20px auto;
	line-height: 2rem;
}

#events-container > ul > li.quick-view .quick-view-only {
  display:block;
}

#events-container > ul > li.quick-view .quick-view-hide {
  display:none;
}

#events-container > ul > li.quick-view .item-date.quick-view-only {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  align-content: flex-start;
  padding: 24px 16px 48px 16px;
  margin-top: 20px;
  padding-bottom: 50px;
}

#events-container > ul > li.quick-view .item-date.quick-view-only a {
  text-decoration: underline;
  font-size: 1rem;
}

#events-container > ul > li.quick-view .item-date.quick-view-only > div {
	width: 100%;
	border-top: 1px solid #ededed;
	margin-top: 16px;
  padding:16px 16px 0 16px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#events-container > ul > li.quick-view .item-date.quick-view-only > div:last-of-type {
  border-bottom: 1px solid #ededed;
	margin-bottom: 16px;
	padding-bottom: 16px;
}
#events-container > ul > li.quick-view .item-date.quick-view-only {
  color:#363537;
}
#events-container > ul > li.quick-view .item-date.quick-view-only h4 {
  margin-bottom: .1rem;
}
#events-container > ul > li.quick-view .item-date.quick-view-only > span {
  width: 50%;
  margin-top:10px;
  color:#363537;
  font-size: 100%;
}
#events-container > ul > li.quick-view .item-date.quick-view-only .location-row {
	width: 100%;
	margin-bottom: 0;
	line-height: 1.2rem;
  font-weight: 400;
}

#events-container > ul > li.quick-view .item-name {
  order:1;
}
#events-container > ul > li.quick-view .item-desc {
  order:2;
}
#events-container > ul > li.quick-view .item-date {
  order:3;
}

#events-container #quick-view-overlay {
  z-index:10000;
  position: fixed;
  background-color: #000;
  opacity: .8;
  top:0;
  left:0;
  height: 100vh;
  width:100vw;
  display: none;
}

#events-container #quick-view-overlay.show {
  display: block;
}

html.body.event-quick-view,
body.event-quick-view {
  overflow:hidden;
}

#events-container .view-options {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  align-items: flex-end;
  padding:0 24px;
}

#events-container .view-options .view-option {
  margin-left: 16px;
}
#events-container .view-options .view-option::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  color: #a19ca6;
  font-size: 1.1rem;
}

#events-container .view-options .view-option.active::before,
#events-container .view-options .view-option:hover::before {
  color: #363537;
}

#events-container .view-options .view-option.active:hover {
  cursor: default;
}

#events-container .view-options .view-option.grid::before {
  content:"\f00a";
}

#events-container .view-options .view-option.calendar::before {
  content:"\f073";
}

@media only screen and (max-width: 1480px) {
  #events-container > ul > li {
    width: 25%;
    padding:16px;
  }
}

/* View options */
#events-container > ul.items.hide {
  display:none;
}

#events-container #calendar-view-elm.hide {
  display:none;
}

#events-container #calendar-view-elm {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

#events-container #calendar-view-elm .calendar-result {
  flex-grow: 1;
  margin-left: 5%;
  margin-top: 71px;
}

#events-container #calendar-view-elm .calendar-result ul {
  list-style: none;
  padding:0;
  margin:0;
}

#events-container #calendar-view-elm .calendar-result ul li {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  border-top: 1px solid #ededed;
  padding:10px;
}


#events-container #calendar-view-elm .calendar-result ul li.hide {
  display:none;
}

#events-container #calendar-view-elm .calendar-result ul li > div:nth-child(1) {
  width: 28%;
  margin-right: 2%;
}

#events-container #calendar-view-elm .calendar-result ul li > div:nth-child(1) a {
  text-decoration: underline;
}

#events-container #calendar-view-elm .calendar-result ul li > div:nth-child(2) {
  width: 40%;
  align-self: flex-start;
  margin-right: 2%;
  font-weight: 700;
}

#events-container #calendar-view-elm .calendar-result ul li > div:nth-child(3) {
  width: 28%;
  align-self: flex-start;
  text-align: right;
}

#events-container #calendar-view-elm .calendar-result ul li > div:nth-child(3) span {
  padding: 2px 7px;
	font-size: .8rem;
	border-radius: 4px;
  color: #ededed;
}
#events-container #calendar-view-elm .calendar-result ul li > div.available span {
  background-color: #0CCE6B;
}
#events-container #calendar-view-elm .calendar-result ul li > div.limited span {
  background-color: #ed7d3a;
}
#events-container #calendar-view-elm .calendar-result ul li > div.soldout span {
  background-color: #ef2d56;
}
#events-container #calendar-view-elm .calendar-result ul li > div.cancelled span {
  background-color: #363537;
}
#events-container #calendar-view-elm .calendar-result ul li > div.blocked span {
  background-color: #ededed;
  color: #363537;
}

@media only screen and (max-width: 1200px) {
  #events-container #calendar-view-elm .calendar-result ul li > div:nth-child(1) {
    width: 40%;
    margin-right: 3%;
  }
  #events-container #calendar-view-elm .calendar-result ul li > div:nth-child(2) {
    width: 57%;
    margin-right: 0%;
  }
  #events-container #calendar-view-elm .calendar-result ul li > div:nth-child(3) {
    width: 100%;
    text-align: left;
    margin-top: 10px;
  }
}

@media only screen and (max-width: 1050px) {
  #events-container #calendar-view-elm > .calendar {
    margin:40px auto 0 auto;
  }
  #events-container #calendar-view-elm .calendar-result {
    flex-grow: 1;
    margin-left: 0%;
    margin-top: 71px;
    width: 100%;
  }
}

@media only screen and (max-width: 640px) {
  #events-container #calendar-view-elm .calendar-result ul li > div:nth-child(2) {
    margin-top: 10px;
    width: 100%;
  }
  #events-container #calendar-view-elm .calendar-result {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 1280px) {
  #events-container > ul > li {
    width: 33%;
    padding:16px;
  }
}
@media only screen and (max-width: 880px) {
  #events-container > ul > li {
    width: 50%;
  }
}
@media only screen and (max-width: 640px) {
  #events-container > ul > li {
    width: 100%;
    padding:16px 0;
  }
}

@media only screen and (max-width: 901px) {
  #events-container > ul > li.quick-view {
    width: 95vw;
  }
}
@media only screen and (max-width: 450px) {
  #events-container > ul > li.quick-view {
    width: 100vw;
    max-height: 100vh;
  }
}