#eventcal .header{height:50px;width:100%;text-align:center;position:relative;z-index:100}
#eventcal .header h1{margin:0;padding:0;font-size:20px;line-height:50px;font-weight:100;letter-spacing:1px}
#eventcal .left,#eventcal .right{position:absolute;width:0px;height:0px;border-style:solid;top:50%;margin-top:-7.5px;cursor:pointer}
#eventcal .left{border-width:7.5px 10px 7.5px 0;border-color:transparent rgba(160,159,160,1) transparent transparent;left:20px}
#eventcal .right{border-width:7.5px 0 7.5px 10px;border-color:transparent transparent transparent rgba(160,159,160,1);right:20px}

.month{opacity:0}
.month.new{-webkit-animation:fadeIn .2s ease-out;opacity:1}
.month.out.new{-webkit-animation:fadeOut .2s ease-out;opacity:0}
.month.in.prev{-webkit-animation:moveFromPrevFadeMonth .2s ease-out;-moz-animation:moveFromPrevFadeMonth .2s ease-out;animation:moveFromPrevFadeMonth .2s ease-out;opacity:1}
.month.out.prev{-webkit-animation:moveToPrevFadeMonth .2s ease-in;-moz-animation:moveToPrevFadeMonth .2s ease-in;animation:moveToPrevFadeMonth .2s ease-in;opacity:1}
.month.in.next{-webkit-animation:moveFromNextFadeMonth .2s ease-out;-moz-animation:moveFromNextFadeMonth .2s ease-out;animation:moveFromNextFadeMonth .2s ease-out;opacity:1}
.month.out.next{-webkit-animation:moveToNextFadeMonth .2s ease-in;-moz-animation:moveToNextFadeMonth .2s ease-in;animation:moveToNextFadeMonth .2s ease-in;opacity:1}

.day-names,.week{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:10px}
.day-names{text-transform:uppercase;background:rgba(128,128,128,0.5);color:#fff;padding:5px 10px;margin-bottom:5px;border-radius:2px}
.day-names .day-n{text-align:center;padding-right:5px}
.week .details{grid-column:1 / span 7}

#eventcal .day{padding:5px;vertical-align:top;position:relative;border-right:dotted 1px #ccc;z-index:100;min-height:100px}
#eventcal .day.other{color:rgb(27 20 20 / 39%)}
#eventcal .day.today{color:rgba(156,202,235,1)}
#eventcal .day-name{font-size:9px;text-transform:uppercase;margin-bottom:5px;color:rgb(27 20 20 / 75%);letter-spacing:.7px}
#eventcal .day-number{font-size:18px;letter-spacing:1.5px;float:right}
#eventcal .day .day-events{display:flex;flex-direction:column;overflow:hidden;margin-top:20px}
#eventcal .day .day-events a{width:100%;padding:0px;font-size:12px;line-height:14px;padding-bottom:8px}
#eventcal .day .day-events span{padding:0;margin:0;width:8px;height:8px;background:#2f6fe3;border-radius:50%}

#eventcal .details{position:relative;background:rgba(164,164,164,1);margin-top:5px;border-radius:4px}

.arrow{position:absolute;top:-5px;left:50%;margin-left:-2px;width:0px;height:0px;border-style:solid;border-width:0 5px 5px 5px;border-color:transparent transparent rgba(164,164,164,1) transparent;transition:all 0.7s ease}
.events{height:75px;padding:7px 0;overflow-y:auto;overflow-x:hidden}
.event{font-size:16px;line-height:22px;padding:2px 16px;vertical-align:top}
.event.empty{color:#eee}
.event-category{height:10px;width:10px;display:inline-block;margin:6px 0 0;vertical-align:top}
.event span{display:inline-block;padding:0 0 0 7px}
.entry{position:relative;padding:0 0 0 25px;font-size:13px;display:inline-block;line-height:30px;background:transparent}

/* Animations are cool!  */
@-webkit-keyframes moveToPrevFadeMonth{to{opacity:0;-webkit-transform:translateX(80px) scale(.95)}}
@-moz-keyframes moveToPrevFadeMonth{to{opacity:0;-moz-transform:translateX(80px)}}
@keyframes moveToPrevFadeMonth{to{opacity:0;transform:translateX(80px)}}
@-webkit-keyframes moveFromPrevFadeMonth{from{opacity:0;-webkit-transform:translateX(-80px) scale(.95)}}
@-moz-keyframes moveFromPrevFadeMonth{from{opacity:0;-moz-transform:translateX(-80px)}}
@keyframes moveFromPrevFadeMonth{from{opacity:0;transform:translateX(-80px)}}

@-webkit-keyframes moveToNextFadeMonth{to{opacity:0;-webkit-transform:translateX(-80px) scale(.95)}}
@-moz-keyframes moveToNextFadeMonth{to{opacity:0;-moz-transform:translateX(-80px)}}
@keyframes moveToNextFadeMonth{to{opacity:0;transform:translateX(-80px)}}
@-webkit-keyframes moveFromNextFadeMonth{from{opacity:0;-webkit-transform:translateX(80px) scale(.95)}}
@-moz-keyframes moveFromNextFadeMonth{from{opacity:0;-moz-transform:translateX(80px)}}
@keyframes moveFromNextFadeMonth{from{opacity:0;transform:translateX(80px)}}

@-webkit-keyframes fadeIn{from{opacity:0}}
@-moz-keyframes fadeIn{from{opacity:0}}
@keyframes fadeIn{from{opacity:0}}
@-webkit-keyframes fadeOut{to{opacity:0}}
@-moz-keyframes fadeOut{to{opacity:0}}
@keyframes fadeOut{to{opacity:0}}

@media screen and (max-width:764px){
	.day-names, .day{display:none}
	.day.has-events{display:block}
	.day-names, .week {grid-template-columns:none}
	.month.no-events *{display:none}
	.month.no-events {display:flex;justify-content:center;align-items:center;width:100%;height:80px;text-align:center}
	.month.no-events:before {content:"No Events To Show";font-size:1.1rem;color: #2f2f2f}
	#eventcal .day {border-right:none;min-height:0px;border:1px solid #eee;border-radius:5px;margin-bottom:5px}
	#eventcal .day-number {float:none}
	#eventcal .day .day-events {margin-top:10px}
}