body {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}

.primary { background: #003580; color: #ffffff; }
.secondary { background: #BA33CC }
.third { background: #6E33CC }
.bad { background: #CC3345 }
.good { background: #87BD30 }
.info { background: #8be7dd }
.primary-text { color: #003580 }
.secondary-text { color: #BA33CC }
.third-text { color: #6E33CC }
.bad-text { color: #CC3345 }
.good-text { color: #87BD30 }
.info-text { color: #8be7dd }

#navigation { max-width: 100% !important; }
h1.logo { margin: 10px; padding: 0; font-size: 25px; font-family: 'Pacifico', cursive; color: #ffc934de; }
h1.logo a { color: #ffc934de; text-decoration: none; }


.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li { float: left; font-size: 10px; }
.tag { list-style: none; background: #eee; border-radius: 3px 0 0 3px; color: #333; display: inline-block; height: 26px; line-height: 26px; padding: 0 20px 0 23px; position: relative; margin: 0 10px 10px 0; text-decoration: none; -webkit-transition: color 0.2s; }
.tag::before { background: #fff; border-radius: 10px; /* box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);  */ content: ''; height: 6px; left: 10px; position: absolute; width: 6px; top: 10px; }
.tag::after { background: #fff; border-bottom: 13px solid transparent; border-left: 10px solid #eee; border-top: 13px solid transparent; content: ''; position: absolute; right: 0; top: 0; }
.tag:hover { background-color: #ffc934de; color: 0; text-decoration: none;}
.tag:hover::after { border-left-color: #ffc934de; }


#filter { width: 40px; max-width: 200px; margin: 15px 10px 20px 0; position: fixed; z-index: 200; transition: width 0.5s ease-in-out; }
#filter.active { width: 400px; height: 612px; background: #fff; box-shadow: #00000066 0px 0px 20px; }
#filter #filtertoggle { border-radius: 20px; text-align: right; padding: 8px 13px 8px 5px; transition: border-radius 0.05s ease-in-out;}
#filter.active #filtertoggle { border-radius: 0px; }
#filter #filtercontent { width: 10%; overflow: hidden; height: 20px; transition: width 0.5s ease-in-out, height 0.5s ease-in-out, border-radius 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.1s ease-in-out; opacity: 0.1; margin: 10px 10px 10px 10px;  }
#filter.active #filtercontent { opacity: 1.0; width: 90%; margin: 10px 10px 10px 10px; height: auto; }

#eventlist {  }
#eventlist:after { }
#eventlist .event { position: relative; max-width: 400px; margin: 30px auto 0 auto; height: 267px; }
.xs #eventlist .event { height: 360px; }
.sm #eventlist .event { height: 350px; }
.xl #eventlist .event { height: 313px; }
.md #eventlist .event { height: 298px; }
#eventlist .event .eventhead { z-index: 100; position: relative; background: #eee; height: 50px; overflow: hidden; }
#eventlist .event img { max-width: 100%; }
#eventlist .event .favorite  { width: 50px; height: 50px; float: left; text-align: center; font-size: 2rem; animation-duration: 1s; padding: 7px 0;}
#eventlist .event .favorite  { color: #eeeeee; background: #cccccc;  animation-name: favoritedeselect-outer; }
#eventlist .event .favorite.active { color: #d9ff9d; background: #87BD30;  animation-name: favoriteselect-outer; }
#eventlist .event .favorite i { animation-name: favoritedeselect-inner; animation-duration: 1s; display: block; }
#eventlist .event .favorite.active i { animation-name: favoriteselect-inner; animation-duration: 1s;}
#eventlist .event  h2 { max-width: 290px; margin: 0; padding: 2px 5px 0 0; float: right; font-size: 1.3rem; text-shadow: #ffffff 1px 1px 2px; white-space: nowrap; overflow: hidden; }
.sm #eventlist .event h2 { max-width: 342px; font-size: 1.1rem;}
.md #eventlist .event h2 { max-width: 275px; font-size: 1.1rem;}
.lg #eventlist .event h2 { max-width: 230px; font-size: 1.1rem;}
#eventlist .event .date { max-width: 300px; margin: 0; padding: 0 5px 0 0; float: right; clear: right; }
#eventlist .event .eventinfo { z-index: 80; position: absolute; overflow: auto; padding: 10px; background: #eeeeeebb; background: linear-gradient(0deg, rgba(195,195,195,1) 0%, rgba(238,238,238,0.9023984593837535) 10%, rgba(238,238,238,0.8995973389355743) 100%); top: 0; height: 300px; width: 400px; max-width: 100%; }
.xl #eventlist .event .eventinfo { height: 262.5px; width: 350px; }
.lg #eventlist .event .eventinfo { height: 217px; width: 290px; }
.md #eventlist .event .eventinfo { height: 248px; width: 330px; }
#eventlist .event .eventinfo:after { clear: both; }

@keyframes favoriteselect-outer {
  0%   { background-color: #cccccc; padding: 7px 0;}
  25%  { background-color: #BcccAc; padding: 12px 0 0 0; font-size: 1.6rem;}
  50%  { background-color: #AcBc9c; padding: 16px 0 0 0; font-size: 1.2rem;}
  75%  { background-color: #9cBc6c; padding: 12px 0 0 0; font-size: 1.6rem;}
  100% { background-color: #87BD30; padding: 7px 0;}
}

@keyframes favoriteselect-inner {
  0%   { color: #eeeeee; transform: rotate(5deg); }
  25%  { color: #ffffff; transform: rotate(45deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25); }
  35%  { color: #eeffce; transform: rotate(90deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  45%  { color: #eeffce; transform: rotate(120deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  50%  { color: #eeffce; transform: rotate(180deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  55%  { color: #eeffce; transform: rotate(270deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  60%  { color: #eeffce; transform: rotate(300deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  65%  { color: #eeffce; transform: rotate(340deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75); }
  75%  { color: #ddffad; transform: rotate(-5deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25); }
  100% { color: #d9ff9d; transform: rotate(-2deg); }
}

@keyframes favoritesdeselect-outer {
  0%   { background-color: #cccccc; padding: 7px 0;}
  25%  { background-color: #BcccAc; padding: 8px 0; font-size: 1.6rem;}
  50%  { background-color: #AcBc9c; padding: 10px 0; font-size: 1.2rem;}
  75%  { background-color: #9cBc6c; padding: 8px 0; font-size: 1.6rem;}
  100% { background-color: #87BD30; padding: 7px 0;}
}

@keyframes favoritedeselect-inner-disabled {
  0%   { color: #d9ffcd; transform: rotate(-5deg);}
  25%  { color: #BcccAc; transform: rotate(-45deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25);}
  50%  { color: #AcBc9c; transform: rotate(-90deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25); }
  75%  { color: #cccccc; transform: rotate(2deg); text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25); }
  100% { color: #eeeeee; transform: rotate(5deg); }
}

#me { max-width: 200px; overflow: hidden; float: right; margin-top: 5px; }
#me:after { clear: both; }
#me img { width: 30px; height: 30px; margin: 5px; border-radius: 15px; float: left; border: 1px solid #febb02; }
#me .name { color: #fff; float: left; margin: 10px 10px 10px 5px; white-space: nowrap; max-width: 130px; overflow: hidden; }

#map {     min-height: 300px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    width: 100%; }


.sm #me .name { display: none; }
.xs #me .name { display: none; }
.xs .xs-hidden { display: none; }