LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
S
M
T
W
T
F
S
<
57°F

Location

12345 Generic Ave., Some City, Some State, 12345

Time

12:00 AM

Attendee

Me, You, and 2+

×

Choose theme color

CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@keyframes flipUp {
  0% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
* {
  box-sizing: border-box;
  outline: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

.salmon, .prev-.salmon {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FB5965;
}
.salmon.salmon, .prev-.salmon.salmon {
  background: #FB5965;
  transition: all 0.2s ease-in-out;
}
.salmon #calendar, .prev-.salmon #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.salmon #calendar .input a, .prev-.salmon #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #FB5965 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.salmon #calendar .input a:hover, .prev-.salmon #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.salmon #calendar .has-event:after, .prev-.salmon #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #FB5965;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.salmon #calendar .has-event.expanded, .prev-.salmon #calendar .has-event.expanded {
  color: #29323F;
}
.salmon #calendar .has-event.expanded:hover, .prev-.salmon #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.salmon #calendar .has-event.expanded:after, .prev-.salmon #calendar .has-event.expanded:after {
  background: #FB5965;
  border-radius: 50%;
  z-index: -1;
}
.salmon #calendar #color-picker, .prev-.salmon #calendar #color-picker {
  background: #FB5965;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.salmon #calendar #color-picker:hover, .prev-.salmon #calendar #color-picker:hover {
  cursor: pointer;
}
.salmon #calendar #dates, .prev-.salmon #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.salmon #calendar #dates #days .day, .prev-.salmon #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.salmon #calendar #dates #days .day:nth-child(0), .prev-.salmon #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.salmon #calendar #dates #days .day:nth-child(1), .prev-.salmon #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.salmon #calendar #dates #days .day:nth-child(2), .prev-.salmon #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.salmon #calendar #dates #days .day:nth-child(3), .prev-.salmon #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.salmon #calendar #dates #days .day:nth-child(4), .prev-.salmon #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.salmon #calendar #dates #days .day:nth-child(5), .prev-.salmon #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.salmon #calendar #dates #days .day:nth-child(6), .prev-.salmon #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.salmon #calendar #dates #days .day:nth-child(7), .prev-.salmon #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.salmon #calendar #dates #days .day:nth-child(8), .prev-.salmon #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.salmon #calendar #dates #days .day:nth-child(9), .prev-.salmon #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.salmon #calendar #dates #days .day:nth-child(10), .prev-.salmon #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.salmon #calendar #dates #days .day:nth-child(11), .prev-.salmon #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.salmon #calendar #dates #days .day:nth-child(12), .prev-.salmon #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.salmon #calendar #dates #days .day:nth-child(13), .prev-.salmon #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.salmon #calendar #dates #days .day:nth-child(14), .prev-.salmon #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.salmon #calendar #dates #days .day:nth-child(15), .prev-.salmon #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.salmon #calendar #dates #days .day:nth-child(16), .prev-.salmon #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.salmon #calendar #dates #days .day:nth-child(17), .prev-.salmon #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.salmon #calendar #dates #days .day:nth-child(18), .prev-.salmon #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.salmon #calendar #dates #days .day:nth-child(19), .prev-.salmon #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.salmon #calendar #dates #days .day:nth-child(20), .prev-.salmon #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.salmon #calendar #dates #days .day:nth-child(21), .prev-.salmon #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.salmon #calendar #dates #days .day:nth-child(22), .prev-.salmon #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.salmon #calendar #dates #days .day:nth-child(23), .prev-.salmon #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.salmon #calendar #dates #days .day:nth-child(24), .prev-.salmon #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.salmon #calendar #dates #days .day:nth-child(25), .prev-.salmon #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.salmon #calendar #dates #days .day:nth-child(26), .prev-.salmon #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.salmon #calendar #dates #days .day:nth-child(27), .prev-.salmon #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.salmon #calendar #dates #days .day:nth-child(28), .prev-.salmon #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.salmon #calendar #dates #days .day:nth-child(29), .prev-.salmon #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.salmon #calendar #dates #days .day:nth-child(30), .prev-.salmon #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.salmon #calendar #dates #days .day:nth-child(31), .prev-.salmon #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.salmon #calendar #dates #days .day:nth-child(32), .prev-.salmon #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.salmon #calendar #dates #days .day:nth-child(33), .prev-.salmon #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.salmon #calendar #dates #days .day:nth-child(34), .prev-.salmon #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.salmon #calendar #dates #days .day:nth-child(35), .prev-.salmon #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.salmon #calendar #dates #days .day:nth-child(36), .prev-.salmon #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.salmon #calendar #dates #days .day:nth-child(37), .prev-.salmon #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.salmon #calendar #dates #days .day:nth-child(38), .prev-.salmon #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.salmon #calendar #dates #days .day:nth-child(39), .prev-.salmon #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.salmon #calendar #dates #days .day:hover, .prev-.salmon #calendar #dates #days .day:hover {
  color: #FB5965;
  cursor: pointer;
}
.salmon #calendar #lastMt, .salmon #calendar #nextMt, .prev-.salmon #calendar #lastMt, .prev-.salmon #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.salmon #calendar #lastMt:hover, .salmon #calendar #nextMt:hover, .prev-.salmon #calendar #lastMt:hover, .prev-.salmon #calendar #nextMt:hover {
  cursor: pointer;
}
.salmon #calendar #lastMt, .prev-.salmon #calendar #lastMt {
  left: 3.25em;
}
.salmon #calendar #nextMt, .prev-.salmon #calendar #nextMt {
  right: 3.25em;
}
.salmon #calendar #months-cont, .prev-.salmon #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.salmon #calendar #months-cont #months, .prev-.salmon #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.salmon #calendar #months-cont #months .month, .prev-.salmon #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #FB5965;
  display: inline-block;
  text-align: center;
}
.salmon #calendar #months-cont #months .month:first-child, .prev-.salmon #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.salmon #calendar #days .day, .salmon #calendar #daysotweek .day, .prev-.salmon #calendar #days .day, .prev-.salmon #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.salmon #calendar #daysotweek, .prev-.salmon #calendar #daysotweek {
  margin-top: 0.75em;
}
.salmon #info #actual-date, .prev-.salmon #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #FB5965;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#salmon {
  background: #FB5965;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#salmon:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#salmon:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#salmon:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#salmon:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#salmon:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#salmon:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#salmon:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#salmon:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#salmon:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#salmon:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#salmon:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#salmon:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#salmon:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#salmon:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#salmon:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#salmon:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#salmon:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#salmon:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#salmon:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#salmon:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.dkpink, .prev-.dkpink {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #E21C71;
}
.dkpink.dkpink, .prev-.dkpink.dkpink {
  background: #E21C71;
  transition: all 0.2s ease-in-out;
}
.dkpink #calendar, .prev-.dkpink #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.dkpink #calendar .input a, .prev-.dkpink #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #E21C71 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.dkpink #calendar .input a:hover, .prev-.dkpink #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.dkpink #calendar .has-event:after, .prev-.dkpink #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #E21C71;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.dkpink #calendar .has-event.expanded, .prev-.dkpink #calendar .has-event.expanded {
  color: #29323F;
}
.dkpink #calendar .has-event.expanded:hover, .prev-.dkpink #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.dkpink #calendar .has-event.expanded:after, .prev-.dkpink #calendar .has-event.expanded:after {
  background: #E21C71;
  border-radius: 50%;
  z-index: -1;
}
.dkpink #calendar #color-picker, .prev-.dkpink #calendar #color-picker {
  background: #E21C71;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.dkpink #calendar #color-picker:hover, .prev-.dkpink #calendar #color-picker:hover {
  cursor: pointer;
}
.dkpink #calendar #dates, .prev-.dkpink #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.dkpink #calendar #dates #days .day, .prev-.dkpink #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.dkpink #calendar #dates #days .day:nth-child(0), .prev-.dkpink #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(1), .prev-.dkpink #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(2), .prev-.dkpink #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(3), .prev-.dkpink #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(4), .prev-.dkpink #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(5), .prev-.dkpink #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(6), .prev-.dkpink #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(7), .prev-.dkpink #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(8), .prev-.dkpink #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(9), .prev-.dkpink #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(10), .prev-.dkpink #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(11), .prev-.dkpink #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(12), .prev-.dkpink #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(13), .prev-.dkpink #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(14), .prev-.dkpink #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(15), .prev-.dkpink #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(16), .prev-.dkpink #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(17), .prev-.dkpink #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(18), .prev-.dkpink #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(19), .prev-.dkpink #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(20), .prev-.dkpink #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(21), .prev-.dkpink #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(22), .prev-.dkpink #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(23), .prev-.dkpink #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(24), .prev-.dkpink #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(25), .prev-.dkpink #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(26), .prev-.dkpink #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(27), .prev-.dkpink #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(28), .prev-.dkpink #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(29), .prev-.dkpink #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(30), .prev-.dkpink #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(31), .prev-.dkpink #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(32), .prev-.dkpink #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(33), .prev-.dkpink #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(34), .prev-.dkpink #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(35), .prev-.dkpink #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(36), .prev-.dkpink #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(37), .prev-.dkpink #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(38), .prev-.dkpink #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.dkpink #calendar #dates #days .day:nth-child(39), .prev-.dkpink #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.dkpink #calendar #dates #days .day:hover, .prev-.dkpink #calendar #dates #days .day:hover {
  color: #E21C71;
  cursor: pointer;
}
.dkpink #calendar #lastMt, .dkpink #calendar #nextMt, .prev-.dkpink #calendar #lastMt, .prev-.dkpink #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.dkpink #calendar #lastMt:hover, .dkpink #calendar #nextMt:hover, .prev-.dkpink #calendar #lastMt:hover, .prev-.dkpink #calendar #nextMt:hover {
  cursor: pointer;
}
.dkpink #calendar #lastMt, .prev-.dkpink #calendar #lastMt {
  left: 3.25em;
}
.dkpink #calendar #nextMt, .prev-.dkpink #calendar #nextMt {
  right: 3.25em;
}
.dkpink #calendar #months-cont, .prev-.dkpink #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.dkpink #calendar #months-cont #months, .prev-.dkpink #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.dkpink #calendar #months-cont #months .month, .prev-.dkpink #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #E21C71;
  display: inline-block;
  text-align: center;
}
.dkpink #calendar #months-cont #months .month:first-child, .prev-.dkpink #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.dkpink #calendar #days .day, .dkpink #calendar #daysotweek .day, .prev-.dkpink #calendar #days .day, .prev-.dkpink #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.dkpink #calendar #daysotweek, .prev-.dkpink #calendar #daysotweek {
  margin-top: 0.75em;
}
.dkpink #info #actual-date, .prev-.dkpink #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #E21C71;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#dkpink {
  background: #E21C71;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#dkpink:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#dkpink:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#dkpink:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#dkpink:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#dkpink:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#dkpink:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#dkpink:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#dkpink:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#dkpink:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#dkpink:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#dkpink:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#dkpink:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#dkpink:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#dkpink:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#dkpink:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#dkpink:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#dkpink:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#dkpink:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#dkpink:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#dkpink:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.red, .prev-.red {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #E21C20;
}
.red.red, .prev-.red.red {
  background: #E21C20;
  transition: all 0.2s ease-in-out;
}
.red #calendar, .prev-.red #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.red #calendar .input a, .prev-.red #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #E21C20 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.red #calendar .input a:hover, .prev-.red #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.red #calendar .has-event:after, .prev-.red #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #E21C20;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.red #calendar .has-event.expanded, .prev-.red #calendar .has-event.expanded {
  color: #29323F;
}
.red #calendar .has-event.expanded:hover, .prev-.red #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.red #calendar .has-event.expanded:after, .prev-.red #calendar .has-event.expanded:after {
  background: #E21C20;
  border-radius: 50%;
  z-index: -1;
}
.red #calendar #color-picker, .prev-.red #calendar #color-picker {
  background: #E21C20;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.red #calendar #color-picker:hover, .prev-.red #calendar #color-picker:hover {
  cursor: pointer;
}
.red #calendar #dates, .prev-.red #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.red #calendar #dates #days .day, .prev-.red #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.red #calendar #dates #days .day:nth-child(0), .prev-.red #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.red #calendar #dates #days .day:nth-child(1), .prev-.red #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.red #calendar #dates #days .day:nth-child(2), .prev-.red #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.red #calendar #dates #days .day:nth-child(3), .prev-.red #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.red #calendar #dates #days .day:nth-child(4), .prev-.red #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.red #calendar #dates #days .day:nth-child(5), .prev-.red #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.red #calendar #dates #days .day:nth-child(6), .prev-.red #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.red #calendar #dates #days .day:nth-child(7), .prev-.red #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.red #calendar #dates #days .day:nth-child(8), .prev-.red #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.red #calendar #dates #days .day:nth-child(9), .prev-.red #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.red #calendar #dates #days .day:nth-child(10), .prev-.red #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.red #calendar #dates #days .day:nth-child(11), .prev-.red #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.red #calendar #dates #days .day:nth-child(12), .prev-.red #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.red #calendar #dates #days .day:nth-child(13), .prev-.red #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.red #calendar #dates #days .day:nth-child(14), .prev-.red #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.red #calendar #dates #days .day:nth-child(15), .prev-.red #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.red #calendar #dates #days .day:nth-child(16), .prev-.red #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.red #calendar #dates #days .day:nth-child(17), .prev-.red #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.red #calendar #dates #days .day:nth-child(18), .prev-.red #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.red #calendar #dates #days .day:nth-child(19), .prev-.red #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.red #calendar #dates #days .day:nth-child(20), .prev-.red #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.red #calendar #dates #days .day:nth-child(21), .prev-.red #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.red #calendar #dates #days .day:nth-child(22), .prev-.red #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.red #calendar #dates #days .day:nth-child(23), .prev-.red #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.red #calendar #dates #days .day:nth-child(24), .prev-.red #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.red #calendar #dates #days .day:nth-child(25), .prev-.red #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.red #calendar #dates #days .day:nth-child(26), .prev-.red #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.red #calendar #dates #days .day:nth-child(27), .prev-.red #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.red #calendar #dates #days .day:nth-child(28), .prev-.red #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.red #calendar #dates #days .day:nth-child(29), .prev-.red #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.red #calendar #dates #days .day:nth-child(30), .prev-.red #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.red #calendar #dates #days .day:nth-child(31), .prev-.red #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.red #calendar #dates #days .day:nth-child(32), .prev-.red #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.red #calendar #dates #days .day:nth-child(33), .prev-.red #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.red #calendar #dates #days .day:nth-child(34), .prev-.red #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.red #calendar #dates #days .day:nth-child(35), .prev-.red #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.red #calendar #dates #days .day:nth-child(36), .prev-.red #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.red #calendar #dates #days .day:nth-child(37), .prev-.red #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.red #calendar #dates #days .day:nth-child(38), .prev-.red #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.red #calendar #dates #days .day:nth-child(39), .prev-.red #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.red #calendar #dates #days .day:hover, .prev-.red #calendar #dates #days .day:hover {
  color: #E21C20;
  cursor: pointer;
}
.red #calendar #lastMt, .red #calendar #nextMt, .prev-.red #calendar #lastMt, .prev-.red #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.red #calendar #lastMt:hover, .red #calendar #nextMt:hover, .prev-.red #calendar #lastMt:hover, .prev-.red #calendar #nextMt:hover {
  cursor: pointer;
}
.red #calendar #lastMt, .prev-.red #calendar #lastMt {
  left: 3.25em;
}
.red #calendar #nextMt, .prev-.red #calendar #nextMt {
  right: 3.25em;
}
.red #calendar #months-cont, .prev-.red #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.red #calendar #months-cont #months, .prev-.red #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.red #calendar #months-cont #months .month, .prev-.red #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #E21C20;
  display: inline-block;
  text-align: center;
}
.red #calendar #months-cont #months .month:first-child, .prev-.red #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.red #calendar #days .day, .red #calendar #daysotweek .day, .prev-.red #calendar #days .day, .prev-.red #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.red #calendar #daysotweek, .prev-.red #calendar #daysotweek {
  margin-top: 0.75em;
}
.red #info #actual-date, .prev-.red #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #E21C20;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#red {
  background: #E21C20;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#red:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#red:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#red:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#red:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#red:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#red:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#red:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#red:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#red:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#red:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#red:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#red:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#red:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#red:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#red:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#red:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#red:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#red:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#red:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#red:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.redorg, .prev-.redorg {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #EF4100;
}
.redorg.redorg, .prev-.redorg.redorg {
  background: #EF4100;
  transition: all 0.2s ease-in-out;
}
.redorg #calendar, .prev-.redorg #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.redorg #calendar .input a, .prev-.redorg #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #EF4100 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.redorg #calendar .input a:hover, .prev-.redorg #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.redorg #calendar .has-event:after, .prev-.redorg #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #EF4100;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.redorg #calendar .has-event.expanded, .prev-.redorg #calendar .has-event.expanded {
  color: #29323F;
}
.redorg #calendar .has-event.expanded:hover, .prev-.redorg #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.redorg #calendar .has-event.expanded:after, .prev-.redorg #calendar .has-event.expanded:after {
  background: #EF4100;
  border-radius: 50%;
  z-index: -1;
}
.redorg #calendar #color-picker, .prev-.redorg #calendar #color-picker {
  background: #EF4100;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.redorg #calendar #color-picker:hover, .prev-.redorg #calendar #color-picker:hover {
  cursor: pointer;
}
.redorg #calendar #dates, .prev-.redorg #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.redorg #calendar #dates #days .day, .prev-.redorg #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.redorg #calendar #dates #days .day:nth-child(0), .prev-.redorg #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.redorg #calendar #dates #days .day:nth-child(1), .prev-.redorg #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.redorg #calendar #dates #days .day:nth-child(2), .prev-.redorg #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.redorg #calendar #dates #days .day:nth-child(3), .prev-.redorg #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.redorg #calendar #dates #days .day:nth-child(4), .prev-.redorg #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.redorg #calendar #dates #days .day:nth-child(5), .prev-.redorg #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.redorg #calendar #dates #days .day:nth-child(6), .prev-.redorg #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.redorg #calendar #dates #days .day:nth-child(7), .prev-.redorg #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.redorg #calendar #dates #days .day:nth-child(8), .prev-.redorg #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.redorg #calendar #dates #days .day:nth-child(9), .prev-.redorg #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.redorg #calendar #dates #days .day:nth-child(10), .prev-.redorg #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.redorg #calendar #dates #days .day:nth-child(11), .prev-.redorg #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.redorg #calendar #dates #days .day:nth-child(12), .prev-.redorg #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.redorg #calendar #dates #days .day:nth-child(13), .prev-.redorg #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.redorg #calendar #dates #days .day:nth-child(14), .prev-.redorg #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.redorg #calendar #dates #days .day:nth-child(15), .prev-.redorg #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.redorg #calendar #dates #days .day:nth-child(16), .prev-.redorg #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.redorg #calendar #dates #days .day:nth-child(17), .prev-.redorg #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.redorg #calendar #dates #days .day:nth-child(18), .prev-.redorg #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.redorg #calendar #dates #days .day:nth-child(19), .prev-.redorg #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.redorg #calendar #dates #days .day:nth-child(20), .prev-.redorg #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.redorg #calendar #dates #days .day:nth-child(21), .prev-.redorg #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.redorg #calendar #dates #days .day:nth-child(22), .prev-.redorg #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.redorg #calendar #dates #days .day:nth-child(23), .prev-.redorg #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.redorg #calendar #dates #days .day:nth-child(24), .prev-.redorg #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.redorg #calendar #dates #days .day:nth-child(25), .prev-.redorg #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.redorg #calendar #dates #days .day:nth-child(26), .prev-.redorg #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.redorg #calendar #dates #days .day:nth-child(27), .prev-.redorg #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.redorg #calendar #dates #days .day:nth-child(28), .prev-.redorg #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.redorg #calendar #dates #days .day:nth-child(29), .prev-.redorg #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.redorg #calendar #dates #days .day:nth-child(30), .prev-.redorg #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.redorg #calendar #dates #days .day:nth-child(31), .prev-.redorg #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.redorg #calendar #dates #days .day:nth-child(32), .prev-.redorg #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.redorg #calendar #dates #days .day:nth-child(33), .prev-.redorg #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.redorg #calendar #dates #days .day:nth-child(34), .prev-.redorg #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.redorg #calendar #dates #days .day:nth-child(35), .prev-.redorg #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.redorg #calendar #dates #days .day:nth-child(36), .prev-.redorg #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.redorg #calendar #dates #days .day:nth-child(37), .prev-.redorg #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.redorg #calendar #dates #days .day:nth-child(38), .prev-.redorg #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.redorg #calendar #dates #days .day:nth-child(39), .prev-.redorg #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.redorg #calendar #dates #days .day:hover, .prev-.redorg #calendar #dates #days .day:hover {
  color: #EF4100;
  cursor: pointer;
}
.redorg #calendar #lastMt, .redorg #calendar #nextMt, .prev-.redorg #calendar #lastMt, .prev-.redorg #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.redorg #calendar #lastMt:hover, .redorg #calendar #nextMt:hover, .prev-.redorg #calendar #lastMt:hover, .prev-.redorg #calendar #nextMt:hover {
  cursor: pointer;
}
.redorg #calendar #lastMt, .prev-.redorg #calendar #lastMt {
  left: 3.25em;
}
.redorg #calendar #nextMt, .prev-.redorg #calendar #nextMt {
  right: 3.25em;
}
.redorg #calendar #months-cont, .prev-.redorg #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.redorg #calendar #months-cont #months, .prev-.redorg #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.redorg #calendar #months-cont #months .month, .prev-.redorg #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #EF4100;
  display: inline-block;
  text-align: center;
}
.redorg #calendar #months-cont #months .month:first-child, .prev-.redorg #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.redorg #calendar #days .day, .redorg #calendar #daysotweek .day, .prev-.redorg #calendar #days .day, .prev-.redorg #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.redorg #calendar #daysotweek, .prev-.redorg #calendar #daysotweek {
  margin-top: 0.75em;
}
.redorg #info #actual-date, .prev-.redorg #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #EF4100;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#redorg {
  background: #EF4100;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#redorg:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#redorg:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#redorg:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#redorg:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#redorg:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#redorg:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#redorg:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#redorg:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#redorg:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#redorg:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#redorg:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#redorg:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#redorg:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#redorg:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#redorg:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#redorg:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#redorg:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#redorg:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#redorg:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#redorg:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.orange, .prev-.orange {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F76500;
}
.orange.orange, .prev-.orange.orange {
  background: #F76500;
  transition: all 0.2s ease-in-out;
}
.orange #calendar, .prev-.orange #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.orange #calendar .input a, .prev-.orange #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #F76500 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.orange #calendar .input a:hover, .prev-.orange #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.orange #calendar .has-event:after, .prev-.orange #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #F76500;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.orange #calendar .has-event.expanded, .prev-.orange #calendar .has-event.expanded {
  color: #29323F;
}
.orange #calendar .has-event.expanded:hover, .prev-.orange #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.orange #calendar .has-event.expanded:after, .prev-.orange #calendar .has-event.expanded:after {
  background: #F76500;
  border-radius: 50%;
  z-index: -1;
}
.orange #calendar #color-picker, .prev-.orange #calendar #color-picker {
  background: #F76500;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.orange #calendar #color-picker:hover, .prev-.orange #calendar #color-picker:hover {
  cursor: pointer;
}
.orange #calendar #dates, .prev-.orange #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.orange #calendar #dates #days .day, .prev-.orange #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.orange #calendar #dates #days .day:nth-child(0), .prev-.orange #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.orange #calendar #dates #days .day:nth-child(1), .prev-.orange #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.orange #calendar #dates #days .day:nth-child(2), .prev-.orange #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.orange #calendar #dates #days .day:nth-child(3), .prev-.orange #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.orange #calendar #dates #days .day:nth-child(4), .prev-.orange #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.orange #calendar #dates #days .day:nth-child(5), .prev-.orange #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.orange #calendar #dates #days .day:nth-child(6), .prev-.orange #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.orange #calendar #dates #days .day:nth-child(7), .prev-.orange #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.orange #calendar #dates #days .day:nth-child(8), .prev-.orange #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.orange #calendar #dates #days .day:nth-child(9), .prev-.orange #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.orange #calendar #dates #days .day:nth-child(10), .prev-.orange #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.orange #calendar #dates #days .day:nth-child(11), .prev-.orange #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.orange #calendar #dates #days .day:nth-child(12), .prev-.orange #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.orange #calendar #dates #days .day:nth-child(13), .prev-.orange #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.orange #calendar #dates #days .day:nth-child(14), .prev-.orange #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.orange #calendar #dates #days .day:nth-child(15), .prev-.orange #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.orange #calendar #dates #days .day:nth-child(16), .prev-.orange #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.orange #calendar #dates #days .day:nth-child(17), .prev-.orange #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.orange #calendar #dates #days .day:nth-child(18), .prev-.orange #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.orange #calendar #dates #days .day:nth-child(19), .prev-.orange #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.orange #calendar #dates #days .day:nth-child(20), .prev-.orange #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.orange #calendar #dates #days .day:nth-child(21), .prev-.orange #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.orange #calendar #dates #days .day:nth-child(22), .prev-.orange #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.orange #calendar #dates #days .day:nth-child(23), .prev-.orange #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.orange #calendar #dates #days .day:nth-child(24), .prev-.orange #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.orange #calendar #dates #days .day:nth-child(25), .prev-.orange #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.orange #calendar #dates #days .day:nth-child(26), .prev-.orange #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.orange #calendar #dates #days .day:nth-child(27), .prev-.orange #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.orange #calendar #dates #days .day:nth-child(28), .prev-.orange #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.orange #calendar #dates #days .day:nth-child(29), .prev-.orange #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.orange #calendar #dates #days .day:nth-child(30), .prev-.orange #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.orange #calendar #dates #days .day:nth-child(31), .prev-.orange #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.orange #calendar #dates #days .day:nth-child(32), .prev-.orange #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.orange #calendar #dates #days .day:nth-child(33), .prev-.orange #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.orange #calendar #dates #days .day:nth-child(34), .prev-.orange #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.orange #calendar #dates #days .day:nth-child(35), .prev-.orange #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.orange #calendar #dates #days .day:nth-child(36), .prev-.orange #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.orange #calendar #dates #days .day:nth-child(37), .prev-.orange #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.orange #calendar #dates #days .day:nth-child(38), .prev-.orange #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.orange #calendar #dates #days .day:nth-child(39), .prev-.orange #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.orange #calendar #dates #days .day:hover, .prev-.orange #calendar #dates #days .day:hover {
  color: #F76500;
  cursor: pointer;
}
.orange #calendar #lastMt, .orange #calendar #nextMt, .prev-.orange #calendar #lastMt, .prev-.orange #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.orange #calendar #lastMt:hover, .orange #calendar #nextMt:hover, .prev-.orange #calendar #lastMt:hover, .prev-.orange #calendar #nextMt:hover {
  cursor: pointer;
}
.orange #calendar #lastMt, .prev-.orange #calendar #lastMt {
  left: 3.25em;
}
.orange #calendar #nextMt, .prev-.orange #calendar #nextMt {
  right: 3.25em;
}
.orange #calendar #months-cont, .prev-.orange #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.orange #calendar #months-cont #months, .prev-.orange #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.orange #calendar #months-cont #months .month, .prev-.orange #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #F76500;
  display: inline-block;
  text-align: center;
}
.orange #calendar #months-cont #months .month:first-child, .prev-.orange #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.orange #calendar #days .day, .orange #calendar #daysotweek .day, .prev-.orange #calendar #days .day, .prev-.orange #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.orange #calendar #daysotweek, .prev-.orange #calendar #daysotweek {
  margin-top: 0.75em;
}
.orange #info #actual-date, .prev-.orange #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #F76500;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#orange {
  background: #F76500;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#orange:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#orange:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#orange:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#orange:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#orange:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#orange:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#orange:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#orange:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#orange:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#orange:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#orange:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#orange:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#orange:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#orange:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#orange:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#orange:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#orange:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#orange:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#orange:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#orange:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.orgylw, .prev-.orgylw {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F77900;
}
.orgylw.orgylw, .prev-.orgylw.orgylw {
  background: #F77900;
  transition: all 0.2s ease-in-out;
}
.orgylw #calendar, .prev-.orgylw #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.orgylw #calendar .input a, .prev-.orgylw #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #F77900 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.orgylw #calendar .input a:hover, .prev-.orgylw #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.orgylw #calendar .has-event:after, .prev-.orgylw #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #F77900;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.orgylw #calendar .has-event.expanded, .prev-.orgylw #calendar .has-event.expanded {
  color: #29323F;
}
.orgylw #calendar .has-event.expanded:hover, .prev-.orgylw #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.orgylw #calendar .has-event.expanded:after, .prev-.orgylw #calendar .has-event.expanded:after {
  background: #F77900;
  border-radius: 50%;
  z-index: -1;
}
.orgylw #calendar #color-picker, .prev-.orgylw #calendar #color-picker {
  background: #F77900;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.orgylw #calendar #color-picker:hover, .prev-.orgylw #calendar #color-picker:hover {
  cursor: pointer;
}
.orgylw #calendar #dates, .prev-.orgylw #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.orgylw #calendar #dates #days .day, .prev-.orgylw #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.orgylw #calendar #dates #days .day:nth-child(0), .prev-.orgylw #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(1), .prev-.orgylw #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(2), .prev-.orgylw #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(3), .prev-.orgylw #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(4), .prev-.orgylw #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(5), .prev-.orgylw #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(6), .prev-.orgylw #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(7), .prev-.orgylw #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(8), .prev-.orgylw #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(9), .prev-.orgylw #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(10), .prev-.orgylw #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(11), .prev-.orgylw #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(12), .prev-.orgylw #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(13), .prev-.orgylw #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(14), .prev-.orgylw #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(15), .prev-.orgylw #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(16), .prev-.orgylw #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(17), .prev-.orgylw #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(18), .prev-.orgylw #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(19), .prev-.orgylw #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(20), .prev-.orgylw #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(21), .prev-.orgylw #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(22), .prev-.orgylw #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(23), .prev-.orgylw #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(24), .prev-.orgylw #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(25), .prev-.orgylw #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(26), .prev-.orgylw #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(27), .prev-.orgylw #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(28), .prev-.orgylw #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(29), .prev-.orgylw #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(30), .prev-.orgylw #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(31), .prev-.orgylw #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(32), .prev-.orgylw #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(33), .prev-.orgylw #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(34), .prev-.orgylw #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(35), .prev-.orgylw #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(36), .prev-.orgylw #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(37), .prev-.orgylw #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(38), .prev-.orgylw #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.orgylw #calendar #dates #days .day:nth-child(39), .prev-.orgylw #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.orgylw #calendar #dates #days .day:hover, .prev-.orgylw #calendar #dates #days .day:hover {
  color: #F77900;
  cursor: pointer;
}
.orgylw #calendar #lastMt, .orgylw #calendar #nextMt, .prev-.orgylw #calendar #lastMt, .prev-.orgylw #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.orgylw #calendar #lastMt:hover, .orgylw #calendar #nextMt:hover, .prev-.orgylw #calendar #lastMt:hover, .prev-.orgylw #calendar #nextMt:hover {
  cursor: pointer;
}
.orgylw #calendar #lastMt, .prev-.orgylw #calendar #lastMt {
  left: 3.25em;
}
.orgylw #calendar #nextMt, .prev-.orgylw #calendar #nextMt {
  right: 3.25em;
}
.orgylw #calendar #months-cont, .prev-.orgylw #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.orgylw #calendar #months-cont #months, .prev-.orgylw #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.orgylw #calendar #months-cont #months .month, .prev-.orgylw #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #F77900;
  display: inline-block;
  text-align: center;
}
.orgylw #calendar #months-cont #months .month:first-child, .prev-.orgylw #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.orgylw #calendar #days .day, .orgylw #calendar #daysotweek .day, .prev-.orgylw #calendar #days .day, .prev-.orgylw #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.orgylw #calendar #daysotweek, .prev-.orgylw #calendar #daysotweek {
  margin-top: 0.75em;
}
.orgylw #info #actual-date, .prev-.orgylw #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #F77900;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#orgylw {
  background: #F77900;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#orgylw:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#orgylw:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#orgylw:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#orgylw:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#orgylw:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#orgylw:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#orgylw:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#orgylw:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#orgylw:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#orgylw:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#orgylw:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#orgylw:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#orgylw:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#orgylw:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#orgylw:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#orgylw:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#orgylw:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#orgylw:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#orgylw:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#orgylw:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.yellow, .prev-.yellow {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FCEE6D;
}
.yellow.yellow, .prev-.yellow.yellow {
  background: #FCEE6D;
  transition: all 0.2s ease-in-out;
}
.yellow #calendar, .prev-.yellow #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.yellow #calendar .input a, .prev-.yellow #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #FCEE6D 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.yellow #calendar .input a:hover, .prev-.yellow #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.yellow #calendar .has-event:after, .prev-.yellow #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #FCEE6D;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.yellow #calendar .has-event.expanded, .prev-.yellow #calendar .has-event.expanded {
  color: #29323F;
}
.yellow #calendar .has-event.expanded:hover, .prev-.yellow #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.yellow #calendar .has-event.expanded:after, .prev-.yellow #calendar .has-event.expanded:after {
  background: #FCEE6D;
  border-radius: 50%;
  z-index: -1;
}
.yellow #calendar #color-picker, .prev-.yellow #calendar #color-picker {
  background: #FCEE6D;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.yellow #calendar #color-picker:hover, .prev-.yellow #calendar #color-picker:hover {
  cursor: pointer;
}
.yellow #calendar #dates, .prev-.yellow #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.yellow #calendar #dates #days .day, .prev-.yellow #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.yellow #calendar #dates #days .day:nth-child(0), .prev-.yellow #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.yellow #calendar #dates #days .day:nth-child(1), .prev-.yellow #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.yellow #calendar #dates #days .day:nth-child(2), .prev-.yellow #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.yellow #calendar #dates #days .day:nth-child(3), .prev-.yellow #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.yellow #calendar #dates #days .day:nth-child(4), .prev-.yellow #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.yellow #calendar #dates #days .day:nth-child(5), .prev-.yellow #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.yellow #calendar #dates #days .day:nth-child(6), .prev-.yellow #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.yellow #calendar #dates #days .day:nth-child(7), .prev-.yellow #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.yellow #calendar #dates #days .day:nth-child(8), .prev-.yellow #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.yellow #calendar #dates #days .day:nth-child(9), .prev-.yellow #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.yellow #calendar #dates #days .day:nth-child(10), .prev-.yellow #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.yellow #calendar #dates #days .day:nth-child(11), .prev-.yellow #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.yellow #calendar #dates #days .day:nth-child(12), .prev-.yellow #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.yellow #calendar #dates #days .day:nth-child(13), .prev-.yellow #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.yellow #calendar #dates #days .day:nth-child(14), .prev-.yellow #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.yellow #calendar #dates #days .day:nth-child(15), .prev-.yellow #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.yellow #calendar #dates #days .day:nth-child(16), .prev-.yellow #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.yellow #calendar #dates #days .day:nth-child(17), .prev-.yellow #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.yellow #calendar #dates #days .day:nth-child(18), .prev-.yellow #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.yellow #calendar #dates #days .day:nth-child(19), .prev-.yellow #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.yellow #calendar #dates #days .day:nth-child(20), .prev-.yellow #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.yellow #calendar #dates #days .day:nth-child(21), .prev-.yellow #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.yellow #calendar #dates #days .day:nth-child(22), .prev-.yellow #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.yellow #calendar #dates #days .day:nth-child(23), .prev-.yellow #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.yellow #calendar #dates #days .day:nth-child(24), .prev-.yellow #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.yellow #calendar #dates #days .day:nth-child(25), .prev-.yellow #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.yellow #calendar #dates #days .day:nth-child(26), .prev-.yellow #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.yellow #calendar #dates #days .day:nth-child(27), .prev-.yellow #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.yellow #calendar #dates #days .day:nth-child(28), .prev-.yellow #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.yellow #calendar #dates #days .day:nth-child(29), .prev-.yellow #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.yellow #calendar #dates #days .day:nth-child(30), .prev-.yellow #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.yellow #calendar #dates #days .day:nth-child(31), .prev-.yellow #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.yellow #calendar #dates #days .day:nth-child(32), .prev-.yellow #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.yellow #calendar #dates #days .day:nth-child(33), .prev-.yellow #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.yellow #calendar #dates #days .day:nth-child(34), .prev-.yellow #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.yellow #calendar #dates #days .day:nth-child(35), .prev-.yellow #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.yellow #calendar #dates #days .day:nth-child(36), .prev-.yellow #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.yellow #calendar #dates #days .day:nth-child(37), .prev-.yellow #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.yellow #calendar #dates #days .day:nth-child(38), .prev-.yellow #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.yellow #calendar #dates #days .day:nth-child(39), .prev-.yellow #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.yellow #calendar #dates #days .day:hover, .prev-.yellow #calendar #dates #days .day:hover {
  color: #FCEE6D;
  cursor: pointer;
}
.yellow #calendar #lastMt, .yellow #calendar #nextMt, .prev-.yellow #calendar #lastMt, .prev-.yellow #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.yellow #calendar #lastMt:hover, .yellow #calendar #nextMt:hover, .prev-.yellow #calendar #lastMt:hover, .prev-.yellow #calendar #nextMt:hover {
  cursor: pointer;
}
.yellow #calendar #lastMt, .prev-.yellow #calendar #lastMt {
  left: 3.25em;
}
.yellow #calendar #nextMt, .prev-.yellow #calendar #nextMt {
  right: 3.25em;
}
.yellow #calendar #months-cont, .prev-.yellow #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.yellow #calendar #months-cont #months, .prev-.yellow #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.yellow #calendar #months-cont #months .month, .prev-.yellow #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #FCEE6D;
  display: inline-block;
  text-align: center;
}
.yellow #calendar #months-cont #months .month:first-child, .prev-.yellow #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.yellow #calendar #days .day, .yellow #calendar #daysotweek .day, .prev-.yellow #calendar #days .day, .prev-.yellow #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.yellow #calendar #daysotweek, .prev-.yellow #calendar #daysotweek {
  margin-top: 0.75em;
}
.yellow #info #actual-date, .prev-.yellow #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #FCEE6D;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#yellow {
  background: #FCEE6D;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#yellow:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#yellow:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#yellow:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#yellow:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#yellow:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#yellow:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#yellow:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#yellow:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#yellow:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#yellow:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#yellow:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#yellow:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#yellow:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#yellow:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#yellow:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#yellow:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#yellow:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#yellow:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#yellow:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#yellow:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.green, .prev-.green {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8ABE30;
}
.green.green, .prev-.green.green {
  background: #8ABE30;
  transition: all 0.2s ease-in-out;
}
.green #calendar, .prev-.green #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.green #calendar .input a, .prev-.green #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #8ABE30 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.green #calendar .input a:hover, .prev-.green #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.green #calendar .has-event:after, .prev-.green #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #8ABE30;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.green #calendar .has-event.expanded, .prev-.green #calendar .has-event.expanded {
  color: #29323F;
}
.green #calendar .has-event.expanded:hover, .prev-.green #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.green #calendar .has-event.expanded:after, .prev-.green #calendar .has-event.expanded:after {
  background: #8ABE30;
  border-radius: 50%;
  z-index: -1;
}
.green #calendar #color-picker, .prev-.green #calendar #color-picker {
  background: #8ABE30;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.green #calendar #color-picker:hover, .prev-.green #calendar #color-picker:hover {
  cursor: pointer;
}
.green #calendar #dates, .prev-.green #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.green #calendar #dates #days .day, .prev-.green #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.green #calendar #dates #days .day:nth-child(0), .prev-.green #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.green #calendar #dates #days .day:nth-child(1), .prev-.green #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.green #calendar #dates #days .day:nth-child(2), .prev-.green #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.green #calendar #dates #days .day:nth-child(3), .prev-.green #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.green #calendar #dates #days .day:nth-child(4), .prev-.green #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.green #calendar #dates #days .day:nth-child(5), .prev-.green #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.green #calendar #dates #days .day:nth-child(6), .prev-.green #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.green #calendar #dates #days .day:nth-child(7), .prev-.green #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.green #calendar #dates #days .day:nth-child(8), .prev-.green #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.green #calendar #dates #days .day:nth-child(9), .prev-.green #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.green #calendar #dates #days .day:nth-child(10), .prev-.green #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.green #calendar #dates #days .day:nth-child(11), .prev-.green #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.green #calendar #dates #days .day:nth-child(12), .prev-.green #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.green #calendar #dates #days .day:nth-child(13), .prev-.green #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.green #calendar #dates #days .day:nth-child(14), .prev-.green #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.green #calendar #dates #days .day:nth-child(15), .prev-.green #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.green #calendar #dates #days .day:nth-child(16), .prev-.green #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.green #calendar #dates #days .day:nth-child(17), .prev-.green #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.green #calendar #dates #days .day:nth-child(18), .prev-.green #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.green #calendar #dates #days .day:nth-child(19), .prev-.green #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.green #calendar #dates #days .day:nth-child(20), .prev-.green #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.green #calendar #dates #days .day:nth-child(21), .prev-.green #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.green #calendar #dates #days .day:nth-child(22), .prev-.green #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.green #calendar #dates #days .day:nth-child(23), .prev-.green #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.green #calendar #dates #days .day:nth-child(24), .prev-.green #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.green #calendar #dates #days .day:nth-child(25), .prev-.green #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.green #calendar #dates #days .day:nth-child(26), .prev-.green #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.green #calendar #dates #days .day:nth-child(27), .prev-.green #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.green #calendar #dates #days .day:nth-child(28), .prev-.green #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.green #calendar #dates #days .day:nth-child(29), .prev-.green #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.green #calendar #dates #days .day:nth-child(30), .prev-.green #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.green #calendar #dates #days .day:nth-child(31), .prev-.green #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.green #calendar #dates #days .day:nth-child(32), .prev-.green #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.green #calendar #dates #days .day:nth-child(33), .prev-.green #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.green #calendar #dates #days .day:nth-child(34), .prev-.green #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.green #calendar #dates #days .day:nth-child(35), .prev-.green #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.green #calendar #dates #days .day:nth-child(36), .prev-.green #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.green #calendar #dates #days .day:nth-child(37), .prev-.green #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.green #calendar #dates #days .day:nth-child(38), .prev-.green #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.green #calendar #dates #days .day:nth-child(39), .prev-.green #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.green #calendar #dates #days .day:hover, .prev-.green #calendar #dates #days .day:hover {
  color: #8ABE30;
  cursor: pointer;
}
.green #calendar #lastMt, .green #calendar #nextMt, .prev-.green #calendar #lastMt, .prev-.green #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.green #calendar #lastMt:hover, .green #calendar #nextMt:hover, .prev-.green #calendar #lastMt:hover, .prev-.green #calendar #nextMt:hover {
  cursor: pointer;
}
.green #calendar #lastMt, .prev-.green #calendar #lastMt {
  left: 3.25em;
}
.green #calendar #nextMt, .prev-.green #calendar #nextMt {
  right: 3.25em;
}
.green #calendar #months-cont, .prev-.green #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.green #calendar #months-cont #months, .prev-.green #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.green #calendar #months-cont #months .month, .prev-.green #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #8ABE30;
  display: inline-block;
  text-align: center;
}
.green #calendar #months-cont #months .month:first-child, .prev-.green #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.green #calendar #days .day, .green #calendar #daysotweek .day, .prev-.green #calendar #days .day, .prev-.green #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.green #calendar #daysotweek, .prev-.green #calendar #daysotweek {
  margin-top: 0.75em;
}
.green #info #actual-date, .prev-.green #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #8ABE30;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#green {
  background: #8ABE30;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#green:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#green:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#green:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#green:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#green:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#green:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#green:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#green:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#green:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#green:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#green:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#green:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#green:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#green:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#green:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#green:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#green:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#green:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#green:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#green:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.aqua, .prev-.aqua {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #49E7D7;
}
.aqua.aqua, .prev-.aqua.aqua {
  background: #49E7D7;
  transition: all 0.2s ease-in-out;
}
.aqua #calendar, .prev-.aqua #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.aqua #calendar .input a, .prev-.aqua #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #49E7D7 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.aqua #calendar .input a:hover, .prev-.aqua #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.aqua #calendar .has-event:after, .prev-.aqua #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #49E7D7;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.aqua #calendar .has-event.expanded, .prev-.aqua #calendar .has-event.expanded {
  color: #29323F;
}
.aqua #calendar .has-event.expanded:hover, .prev-.aqua #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.aqua #calendar .has-event.expanded:after, .prev-.aqua #calendar .has-event.expanded:after {
  background: #49E7D7;
  border-radius: 50%;
  z-index: -1;
}
.aqua #calendar #color-picker, .prev-.aqua #calendar #color-picker {
  background: #49E7D7;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.aqua #calendar #color-picker:hover, .prev-.aqua #calendar #color-picker:hover {
  cursor: pointer;
}
.aqua #calendar #dates, .prev-.aqua #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.aqua #calendar #dates #days .day, .prev-.aqua #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.aqua #calendar #dates #days .day:nth-child(0), .prev-.aqua #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.aqua #calendar #dates #days .day:nth-child(1), .prev-.aqua #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.aqua #calendar #dates #days .day:nth-child(2), .prev-.aqua #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.aqua #calendar #dates #days .day:nth-child(3), .prev-.aqua #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.aqua #calendar #dates #days .day:nth-child(4), .prev-.aqua #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.aqua #calendar #dates #days .day:nth-child(5), .prev-.aqua #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.aqua #calendar #dates #days .day:nth-child(6), .prev-.aqua #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.aqua #calendar #dates #days .day:nth-child(7), .prev-.aqua #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.aqua #calendar #dates #days .day:nth-child(8), .prev-.aqua #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.aqua #calendar #dates #days .day:nth-child(9), .prev-.aqua #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.aqua #calendar #dates #days .day:nth-child(10), .prev-.aqua #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.aqua #calendar #dates #days .day:nth-child(11), .prev-.aqua #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.aqua #calendar #dates #days .day:nth-child(12), .prev-.aqua #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.aqua #calendar #dates #days .day:nth-child(13), .prev-.aqua #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.aqua #calendar #dates #days .day:nth-child(14), .prev-.aqua #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.aqua #calendar #dates #days .day:nth-child(15), .prev-.aqua #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.aqua #calendar #dates #days .day:nth-child(16), .prev-.aqua #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.aqua #calendar #dates #days .day:nth-child(17), .prev-.aqua #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.aqua #calendar #dates #days .day:nth-child(18), .prev-.aqua #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.aqua #calendar #dates #days .day:nth-child(19), .prev-.aqua #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.aqua #calendar #dates #days .day:nth-child(20), .prev-.aqua #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.aqua #calendar #dates #days .day:nth-child(21), .prev-.aqua #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.aqua #calendar #dates #days .day:nth-child(22), .prev-.aqua #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.aqua #calendar #dates #days .day:nth-child(23), .prev-.aqua #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.aqua #calendar #dates #days .day:nth-child(24), .prev-.aqua #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.aqua #calendar #dates #days .day:nth-child(25), .prev-.aqua #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.aqua #calendar #dates #days .day:nth-child(26), .prev-.aqua #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.aqua #calendar #dates #days .day:nth-child(27), .prev-.aqua #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.aqua #calendar #dates #days .day:nth-child(28), .prev-.aqua #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.aqua #calendar #dates #days .day:nth-child(29), .prev-.aqua #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.aqua #calendar #dates #days .day:nth-child(30), .prev-.aqua #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.aqua #calendar #dates #days .day:nth-child(31), .prev-.aqua #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.aqua #calendar #dates #days .day:nth-child(32), .prev-.aqua #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.aqua #calendar #dates #days .day:nth-child(33), .prev-.aqua #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.aqua #calendar #dates #days .day:nth-child(34), .prev-.aqua #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.aqua #calendar #dates #days .day:nth-child(35), .prev-.aqua #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.aqua #calendar #dates #days .day:nth-child(36), .prev-.aqua #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.aqua #calendar #dates #days .day:nth-child(37), .prev-.aqua #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.aqua #calendar #dates #days .day:nth-child(38), .prev-.aqua #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.aqua #calendar #dates #days .day:nth-child(39), .prev-.aqua #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.aqua #calendar #dates #days .day:hover, .prev-.aqua #calendar #dates #days .day:hover {
  color: #49E7D7;
  cursor: pointer;
}
.aqua #calendar #lastMt, .aqua #calendar #nextMt, .prev-.aqua #calendar #lastMt, .prev-.aqua #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.aqua #calendar #lastMt:hover, .aqua #calendar #nextMt:hover, .prev-.aqua #calendar #lastMt:hover, .prev-.aqua #calendar #nextMt:hover {
  cursor: pointer;
}
.aqua #calendar #lastMt, .prev-.aqua #calendar #lastMt {
  left: 3.25em;
}
.aqua #calendar #nextMt, .prev-.aqua #calendar #nextMt {
  right: 3.25em;
}
.aqua #calendar #months-cont, .prev-.aqua #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.aqua #calendar #months-cont #months, .prev-.aqua #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.aqua #calendar #months-cont #months .month, .prev-.aqua #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #49E7D7;
  display: inline-block;
  text-align: center;
}
.aqua #calendar #months-cont #months .month:first-child, .prev-.aqua #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.aqua #calendar #days .day, .aqua #calendar #daysotweek .day, .prev-.aqua #calendar #days .day, .prev-.aqua #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.aqua #calendar #daysotweek, .prev-.aqua #calendar #daysotweek {
  margin-top: 0.75em;
}
.aqua #info #actual-date, .prev-.aqua #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #49E7D7;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#aqua {
  background: #49E7D7;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#aqua:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#aqua:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#aqua:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#aqua:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#aqua:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#aqua:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#aqua:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#aqua:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#aqua:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#aqua:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#aqua:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#aqua:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#aqua:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#aqua:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#aqua:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#aqua:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#aqua:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#aqua:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#aqua:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#aqua:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.teal, .prev-.teal {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #24A69E;
}
.teal.teal, .prev-.teal.teal {
  background: #24A69E;
  transition: all 0.2s ease-in-out;
}
.teal #calendar, .prev-.teal #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.teal #calendar .input a, .prev-.teal #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #24A69E 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.teal #calendar .input a:hover, .prev-.teal #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.teal #calendar .has-event:after, .prev-.teal #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #24A69E;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.teal #calendar .has-event.expanded, .prev-.teal #calendar .has-event.expanded {
  color: #29323F;
}
.teal #calendar .has-event.expanded:hover, .prev-.teal #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.teal #calendar .has-event.expanded:after, .prev-.teal #calendar .has-event.expanded:after {
  background: #24A69E;
  border-radius: 50%;
  z-index: -1;
}
.teal #calendar #color-picker, .prev-.teal #calendar #color-picker {
  background: #24A69E;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.teal #calendar #color-picker:hover, .prev-.teal #calendar #color-picker:hover {
  cursor: pointer;
}
.teal #calendar #dates, .prev-.teal #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.teal #calendar #dates #days .day, .prev-.teal #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.teal #calendar #dates #days .day:nth-child(0), .prev-.teal #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.teal #calendar #dates #days .day:nth-child(1), .prev-.teal #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.teal #calendar #dates #days .day:nth-child(2), .prev-.teal #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.teal #calendar #dates #days .day:nth-child(3), .prev-.teal #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.teal #calendar #dates #days .day:nth-child(4), .prev-.teal #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.teal #calendar #dates #days .day:nth-child(5), .prev-.teal #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.teal #calendar #dates #days .day:nth-child(6), .prev-.teal #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.teal #calendar #dates #days .day:nth-child(7), .prev-.teal #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.teal #calendar #dates #days .day:nth-child(8), .prev-.teal #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.teal #calendar #dates #days .day:nth-child(9), .prev-.teal #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.teal #calendar #dates #days .day:nth-child(10), .prev-.teal #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.teal #calendar #dates #days .day:nth-child(11), .prev-.teal #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.teal #calendar #dates #days .day:nth-child(12), .prev-.teal #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.teal #calendar #dates #days .day:nth-child(13), .prev-.teal #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.teal #calendar #dates #days .day:nth-child(14), .prev-.teal #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.teal #calendar #dates #days .day:nth-child(15), .prev-.teal #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.teal #calendar #dates #days .day:nth-child(16), .prev-.teal #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.teal #calendar #dates #days .day:nth-child(17), .prev-.teal #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.teal #calendar #dates #days .day:nth-child(18), .prev-.teal #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.teal #calendar #dates #days .day:nth-child(19), .prev-.teal #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.teal #calendar #dates #days .day:nth-child(20), .prev-.teal #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.teal #calendar #dates #days .day:nth-child(21), .prev-.teal #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.teal #calendar #dates #days .day:nth-child(22), .prev-.teal #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.teal #calendar #dates #days .day:nth-child(23), .prev-.teal #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.teal #calendar #dates #days .day:nth-child(24), .prev-.teal #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.teal #calendar #dates #days .day:nth-child(25), .prev-.teal #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.teal #calendar #dates #days .day:nth-child(26), .prev-.teal #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.teal #calendar #dates #days .day:nth-child(27), .prev-.teal #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.teal #calendar #dates #days .day:nth-child(28), .prev-.teal #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.teal #calendar #dates #days .day:nth-child(29), .prev-.teal #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.teal #calendar #dates #days .day:nth-child(30), .prev-.teal #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.teal #calendar #dates #days .day:nth-child(31), .prev-.teal #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.teal #calendar #dates #days .day:nth-child(32), .prev-.teal #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.teal #calendar #dates #days .day:nth-child(33), .prev-.teal #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.teal #calendar #dates #days .day:nth-child(34), .prev-.teal #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.teal #calendar #dates #days .day:nth-child(35), .prev-.teal #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.teal #calendar #dates #days .day:nth-child(36), .prev-.teal #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.teal #calendar #dates #days .day:nth-child(37), .prev-.teal #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.teal #calendar #dates #days .day:nth-child(38), .prev-.teal #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.teal #calendar #dates #days .day:nth-child(39), .prev-.teal #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.teal #calendar #dates #days .day:hover, .prev-.teal #calendar #dates #days .day:hover {
  color: #24A69E;
  cursor: pointer;
}
.teal #calendar #lastMt, .teal #calendar #nextMt, .prev-.teal #calendar #lastMt, .prev-.teal #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.teal #calendar #lastMt:hover, .teal #calendar #nextMt:hover, .prev-.teal #calendar #lastMt:hover, .prev-.teal #calendar #nextMt:hover {
  cursor: pointer;
}
.teal #calendar #lastMt, .prev-.teal #calendar #lastMt {
  left: 3.25em;
}
.teal #calendar #nextMt, .prev-.teal #calendar #nextMt {
  right: 3.25em;
}
.teal #calendar #months-cont, .prev-.teal #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.teal #calendar #months-cont #months, .prev-.teal #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.teal #calendar #months-cont #months .month, .prev-.teal #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #24A69E;
  display: inline-block;
  text-align: center;
}
.teal #calendar #months-cont #months .month:first-child, .prev-.teal #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.teal #calendar #days .day, .teal #calendar #daysotweek .day, .prev-.teal #calendar #days .day, .prev-.teal #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.teal #calendar #daysotweek, .prev-.teal #calendar #daysotweek {
  margin-top: 0.75em;
}
.teal #info #actual-date, .prev-.teal #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #24A69E;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#teal {
  background: #24A69E;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#teal:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#teal:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#teal:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#teal:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#teal:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#teal:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#teal:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#teal:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#teal:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#teal:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#teal:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#teal:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#teal:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#teal:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#teal:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#teal:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#teal:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#teal:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#teal:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#teal:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.sltbl, .prev-.sltbl {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #288ED3;
}
.sltbl.sltbl, .prev-.sltbl.sltbl {
  background: #288ED3;
  transition: all 0.2s ease-in-out;
}
.sltbl #calendar, .prev-.sltbl #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.sltbl #calendar .input a, .prev-.sltbl #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #288ED3 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.sltbl #calendar .input a:hover, .prev-.sltbl #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.sltbl #calendar .has-event:after, .prev-.sltbl #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #288ED3;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.sltbl #calendar .has-event.expanded, .prev-.sltbl #calendar .has-event.expanded {
  color: #29323F;
}
.sltbl #calendar .has-event.expanded:hover, .prev-.sltbl #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.sltbl #calendar .has-event.expanded:after, .prev-.sltbl #calendar .has-event.expanded:after {
  background: #288ED3;
  border-radius: 50%;
  z-index: -1;
}
.sltbl #calendar #color-picker, .prev-.sltbl #calendar #color-picker {
  background: #288ED3;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.sltbl #calendar #color-picker:hover, .prev-.sltbl #calendar #color-picker:hover {
  cursor: pointer;
}
.sltbl #calendar #dates, .prev-.sltbl #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.sltbl #calendar #dates #days .day, .prev-.sltbl #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.sltbl #calendar #dates #days .day:nth-child(0), .prev-.sltbl #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(1), .prev-.sltbl #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(2), .prev-.sltbl #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(3), .prev-.sltbl #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(4), .prev-.sltbl #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(5), .prev-.sltbl #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(6), .prev-.sltbl #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(7), .prev-.sltbl #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(8), .prev-.sltbl #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(9), .prev-.sltbl #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(10), .prev-.sltbl #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(11), .prev-.sltbl #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(12), .prev-.sltbl #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(13), .prev-.sltbl #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(14), .prev-.sltbl #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(15), .prev-.sltbl #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(16), .prev-.sltbl #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(17), .prev-.sltbl #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(18), .prev-.sltbl #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(19), .prev-.sltbl #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(20), .prev-.sltbl #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(21), .prev-.sltbl #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(22), .prev-.sltbl #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(23), .prev-.sltbl #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(24), .prev-.sltbl #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(25), .prev-.sltbl #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(26), .prev-.sltbl #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(27), .prev-.sltbl #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(28), .prev-.sltbl #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(29), .prev-.sltbl #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(30), .prev-.sltbl #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(31), .prev-.sltbl #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(32), .prev-.sltbl #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(33), .prev-.sltbl #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(34), .prev-.sltbl #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(35), .prev-.sltbl #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(36), .prev-.sltbl #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(37), .prev-.sltbl #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(38), .prev-.sltbl #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.sltbl #calendar #dates #days .day:nth-child(39), .prev-.sltbl #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.sltbl #calendar #dates #days .day:hover, .prev-.sltbl #calendar #dates #days .day:hover {
  color: #288ED3;
  cursor: pointer;
}
.sltbl #calendar #lastMt, .sltbl #calendar #nextMt, .prev-.sltbl #calendar #lastMt, .prev-.sltbl #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.sltbl #calendar #lastMt:hover, .sltbl #calendar #nextMt:hover, .prev-.sltbl #calendar #lastMt:hover, .prev-.sltbl #calendar #nextMt:hover {
  cursor: pointer;
}
.sltbl #calendar #lastMt, .prev-.sltbl #calendar #lastMt {
  left: 3.25em;
}
.sltbl #calendar #nextMt, .prev-.sltbl #calendar #nextMt {
  right: 3.25em;
}
.sltbl #calendar #months-cont, .prev-.sltbl #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.sltbl #calendar #months-cont #months, .prev-.sltbl #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.sltbl #calendar #months-cont #months .month, .prev-.sltbl #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #288ED3;
  display: inline-block;
  text-align: center;
}
.sltbl #calendar #months-cont #months .month:first-child, .prev-.sltbl #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.sltbl #calendar #days .day, .sltbl #calendar #daysotweek .day, .prev-.sltbl #calendar #days .day, .prev-.sltbl #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.sltbl #calendar #daysotweek, .prev-.sltbl #calendar #daysotweek {
  margin-top: 0.75em;
}
.sltbl #info #actual-date, .prev-.sltbl #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #288ED3;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#sltbl {
  background: #288ED3;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#sltbl:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#sltbl:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#sltbl:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#sltbl:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#sltbl:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#sltbl:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#sltbl:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#sltbl:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#sltbl:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#sltbl:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#sltbl:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#sltbl:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#sltbl:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#sltbl:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#sltbl:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#sltbl:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#sltbl:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#sltbl:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#sltbl:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#sltbl:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.pwdbl, .prev-.pwdbl {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2E73FF;
}
.pwdbl.pwdbl, .prev-.pwdbl.pwdbl {
  background: #2E73FF;
  transition: all 0.2s ease-in-out;
}
.pwdbl #calendar, .prev-.pwdbl #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.pwdbl #calendar .input a, .prev-.pwdbl #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #2E73FF 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.pwdbl #calendar .input a:hover, .prev-.pwdbl #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.pwdbl #calendar .has-event:after, .prev-.pwdbl #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #2E73FF;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.pwdbl #calendar .has-event.expanded, .prev-.pwdbl #calendar .has-event.expanded {
  color: #29323F;
}
.pwdbl #calendar .has-event.expanded:hover, .prev-.pwdbl #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.pwdbl #calendar .has-event.expanded:after, .prev-.pwdbl #calendar .has-event.expanded:after {
  background: #2E73FF;
  border-radius: 50%;
  z-index: -1;
}
.pwdbl #calendar #color-picker, .prev-.pwdbl #calendar #color-picker {
  background: #2E73FF;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.pwdbl #calendar #color-picker:hover, .prev-.pwdbl #calendar #color-picker:hover {
  cursor: pointer;
}
.pwdbl #calendar #dates, .prev-.pwdbl #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.pwdbl #calendar #dates #days .day, .prev-.pwdbl #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.pwdbl #calendar #dates #days .day:nth-child(0), .prev-.pwdbl #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(1), .prev-.pwdbl #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(2), .prev-.pwdbl #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(3), .prev-.pwdbl #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(4), .prev-.pwdbl #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(5), .prev-.pwdbl #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(6), .prev-.pwdbl #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(7), .prev-.pwdbl #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(8), .prev-.pwdbl #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(9), .prev-.pwdbl #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(10), .prev-.pwdbl #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(11), .prev-.pwdbl #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(12), .prev-.pwdbl #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(13), .prev-.pwdbl #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(14), .prev-.pwdbl #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(15), .prev-.pwdbl #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(16), .prev-.pwdbl #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(17), .prev-.pwdbl #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(18), .prev-.pwdbl #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(19), .prev-.pwdbl #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(20), .prev-.pwdbl #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(21), .prev-.pwdbl #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(22), .prev-.pwdbl #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(23), .prev-.pwdbl #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(24), .prev-.pwdbl #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(25), .prev-.pwdbl #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(26), .prev-.pwdbl #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(27), .prev-.pwdbl #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(28), .prev-.pwdbl #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(29), .prev-.pwdbl #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(30), .prev-.pwdbl #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(31), .prev-.pwdbl #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(32), .prev-.pwdbl #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(33), .prev-.pwdbl #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(34), .prev-.pwdbl #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(35), .prev-.pwdbl #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(36), .prev-.pwdbl #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(37), .prev-.pwdbl #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(38), .prev-.pwdbl #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.pwdbl #calendar #dates #days .day:nth-child(39), .prev-.pwdbl #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.pwdbl #calendar #dates #days .day:hover, .prev-.pwdbl #calendar #dates #days .day:hover {
  color: #2E73FF;
  cursor: pointer;
}
.pwdbl #calendar #lastMt, .pwdbl #calendar #nextMt, .prev-.pwdbl #calendar #lastMt, .prev-.pwdbl #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.pwdbl #calendar #lastMt:hover, .pwdbl #calendar #nextMt:hover, .prev-.pwdbl #calendar #lastMt:hover, .prev-.pwdbl #calendar #nextMt:hover {
  cursor: pointer;
}
.pwdbl #calendar #lastMt, .prev-.pwdbl #calendar #lastMt {
  left: 3.25em;
}
.pwdbl #calendar #nextMt, .prev-.pwdbl #calendar #nextMt {
  right: 3.25em;
}
.pwdbl #calendar #months-cont, .prev-.pwdbl #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.pwdbl #calendar #months-cont #months, .prev-.pwdbl #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pwdbl #calendar #months-cont #months .month, .prev-.pwdbl #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #2E73FF;
  display: inline-block;
  text-align: center;
}
.pwdbl #calendar #months-cont #months .month:first-child, .prev-.pwdbl #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.pwdbl #calendar #days .day, .pwdbl #calendar #daysotweek .day, .prev-.pwdbl #calendar #days .day, .prev-.pwdbl #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.pwdbl #calendar #daysotweek, .prev-.pwdbl #calendar #daysotweek {
  margin-top: 0.75em;
}
.pwdbl #info #actual-date, .prev-.pwdbl #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #2E73FF;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#pwdbl {
  background: #2E73FF;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#pwdbl:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#pwdbl:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#pwdbl:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#pwdbl:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#pwdbl:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#pwdbl:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#pwdbl:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#pwdbl:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#pwdbl:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#pwdbl:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#pwdbl:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#pwdbl:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#pwdbl:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#pwdbl:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#pwdbl:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#pwdbl:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#pwdbl:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#pwdbl:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#pwdbl:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#pwdbl:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.blue, .prev-.blue {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1636E1;
}
.blue.blue, .prev-.blue.blue {
  background: #1636E1;
  transition: all 0.2s ease-in-out;
}
.blue #calendar, .prev-.blue #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.blue #calendar .input a, .prev-.blue #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #1636E1 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.blue #calendar .input a:hover, .prev-.blue #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.blue #calendar .has-event:after, .prev-.blue #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #1636E1;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.blue #calendar .has-event.expanded, .prev-.blue #calendar .has-event.expanded {
  color: #29323F;
}
.blue #calendar .has-event.expanded:hover, .prev-.blue #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.blue #calendar .has-event.expanded:after, .prev-.blue #calendar .has-event.expanded:after {
  background: #1636E1;
  border-radius: 50%;
  z-index: -1;
}
.blue #calendar #color-picker, .prev-.blue #calendar #color-picker {
  background: #1636E1;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.blue #calendar #color-picker:hover, .prev-.blue #calendar #color-picker:hover {
  cursor: pointer;
}
.blue #calendar #dates, .prev-.blue #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.blue #calendar #dates #days .day, .prev-.blue #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.blue #calendar #dates #days .day:nth-child(0), .prev-.blue #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.blue #calendar #dates #days .day:nth-child(1), .prev-.blue #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.blue #calendar #dates #days .day:nth-child(2), .prev-.blue #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.blue #calendar #dates #days .day:nth-child(3), .prev-.blue #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.blue #calendar #dates #days .day:nth-child(4), .prev-.blue #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.blue #calendar #dates #days .day:nth-child(5), .prev-.blue #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.blue #calendar #dates #days .day:nth-child(6), .prev-.blue #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.blue #calendar #dates #days .day:nth-child(7), .prev-.blue #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.blue #calendar #dates #days .day:nth-child(8), .prev-.blue #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.blue #calendar #dates #days .day:nth-child(9), .prev-.blue #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.blue #calendar #dates #days .day:nth-child(10), .prev-.blue #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.blue #calendar #dates #days .day:nth-child(11), .prev-.blue #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.blue #calendar #dates #days .day:nth-child(12), .prev-.blue #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.blue #calendar #dates #days .day:nth-child(13), .prev-.blue #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.blue #calendar #dates #days .day:nth-child(14), .prev-.blue #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.blue #calendar #dates #days .day:nth-child(15), .prev-.blue #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.blue #calendar #dates #days .day:nth-child(16), .prev-.blue #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.blue #calendar #dates #days .day:nth-child(17), .prev-.blue #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.blue #calendar #dates #days .day:nth-child(18), .prev-.blue #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.blue #calendar #dates #days .day:nth-child(19), .prev-.blue #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.blue #calendar #dates #days .day:nth-child(20), .prev-.blue #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.blue #calendar #dates #days .day:nth-child(21), .prev-.blue #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.blue #calendar #dates #days .day:nth-child(22), .prev-.blue #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.blue #calendar #dates #days .day:nth-child(23), .prev-.blue #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.blue #calendar #dates #days .day:nth-child(24), .prev-.blue #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.blue #calendar #dates #days .day:nth-child(25), .prev-.blue #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.blue #calendar #dates #days .day:nth-child(26), .prev-.blue #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.blue #calendar #dates #days .day:nth-child(27), .prev-.blue #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.blue #calendar #dates #days .day:nth-child(28), .prev-.blue #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.blue #calendar #dates #days .day:nth-child(29), .prev-.blue #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.blue #calendar #dates #days .day:nth-child(30), .prev-.blue #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.blue #calendar #dates #days .day:nth-child(31), .prev-.blue #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.blue #calendar #dates #days .day:nth-child(32), .prev-.blue #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.blue #calendar #dates #days .day:nth-child(33), .prev-.blue #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.blue #calendar #dates #days .day:nth-child(34), .prev-.blue #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.blue #calendar #dates #days .day:nth-child(35), .prev-.blue #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.blue #calendar #dates #days .day:nth-child(36), .prev-.blue #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.blue #calendar #dates #days .day:nth-child(37), .prev-.blue #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.blue #calendar #dates #days .day:nth-child(38), .prev-.blue #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.blue #calendar #dates #days .day:nth-child(39), .prev-.blue #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.blue #calendar #dates #days .day:hover, .prev-.blue #calendar #dates #days .day:hover {
  color: #1636E1;
  cursor: pointer;
}
.blue #calendar #lastMt, .blue #calendar #nextMt, .prev-.blue #calendar #lastMt, .prev-.blue #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.blue #calendar #lastMt:hover, .blue #calendar #nextMt:hover, .prev-.blue #calendar #lastMt:hover, .prev-.blue #calendar #nextMt:hover {
  cursor: pointer;
}
.blue #calendar #lastMt, .prev-.blue #calendar #lastMt {
  left: 3.25em;
}
.blue #calendar #nextMt, .prev-.blue #calendar #nextMt {
  right: 3.25em;
}
.blue #calendar #months-cont, .prev-.blue #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.blue #calendar #months-cont #months, .prev-.blue #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.blue #calendar #months-cont #months .month, .prev-.blue #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #1636E1;
  display: inline-block;
  text-align: center;
}
.blue #calendar #months-cont #months .month:first-child, .prev-.blue #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.blue #calendar #days .day, .blue #calendar #daysotweek .day, .prev-.blue #calendar #days .day, .prev-.blue #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.blue #calendar #daysotweek, .prev-.blue #calendar #daysotweek {
  margin-top: 0.75em;
}
.blue #info #actual-date, .prev-.blue #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #1636E1;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#blue {
  background: #1636E1;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#blue:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#blue:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#blue:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#blue:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#blue:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#blue:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#blue:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#blue:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#blue:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#blue:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#blue:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#blue:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#blue:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#blue:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#blue:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#blue:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#blue:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#blue:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#blue:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#blue:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.purple, .prev-.purple {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #953CFE;
}
.purple.purple, .prev-.purple.purple {
  background: #953CFE;
  transition: all 0.2s ease-in-out;
}
.purple #calendar, .prev-.purple #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.purple #calendar .input a, .prev-.purple #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #953CFE 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.purple #calendar .input a:hover, .prev-.purple #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.purple #calendar .has-event:after, .prev-.purple #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #953CFE;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.purple #calendar .has-event.expanded, .prev-.purple #calendar .has-event.expanded {
  color: #29323F;
}
.purple #calendar .has-event.expanded:hover, .prev-.purple #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.purple #calendar .has-event.expanded:after, .prev-.purple #calendar .has-event.expanded:after {
  background: #953CFE;
  border-radius: 50%;
  z-index: -1;
}
.purple #calendar #color-picker, .prev-.purple #calendar #color-picker {
  background: #953CFE;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.purple #calendar #color-picker:hover, .prev-.purple #calendar #color-picker:hover {
  cursor: pointer;
}
.purple #calendar #dates, .prev-.purple #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.purple #calendar #dates #days .day, .prev-.purple #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.purple #calendar #dates #days .day:nth-child(0), .prev-.purple #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.purple #calendar #dates #days .day:nth-child(1), .prev-.purple #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.purple #calendar #dates #days .day:nth-child(2), .prev-.purple #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.purple #calendar #dates #days .day:nth-child(3), .prev-.purple #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.purple #calendar #dates #days .day:nth-child(4), .prev-.purple #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.purple #calendar #dates #days .day:nth-child(5), .prev-.purple #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.purple #calendar #dates #days .day:nth-child(6), .prev-.purple #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.purple #calendar #dates #days .day:nth-child(7), .prev-.purple #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.purple #calendar #dates #days .day:nth-child(8), .prev-.purple #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.purple #calendar #dates #days .day:nth-child(9), .prev-.purple #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.purple #calendar #dates #days .day:nth-child(10), .prev-.purple #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.purple #calendar #dates #days .day:nth-child(11), .prev-.purple #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.purple #calendar #dates #days .day:nth-child(12), .prev-.purple #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.purple #calendar #dates #days .day:nth-child(13), .prev-.purple #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.purple #calendar #dates #days .day:nth-child(14), .prev-.purple #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.purple #calendar #dates #days .day:nth-child(15), .prev-.purple #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.purple #calendar #dates #days .day:nth-child(16), .prev-.purple #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.purple #calendar #dates #days .day:nth-child(17), .prev-.purple #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.purple #calendar #dates #days .day:nth-child(18), .prev-.purple #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.purple #calendar #dates #days .day:nth-child(19), .prev-.purple #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.purple #calendar #dates #days .day:nth-child(20), .prev-.purple #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.purple #calendar #dates #days .day:nth-child(21), .prev-.purple #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.purple #calendar #dates #days .day:nth-child(22), .prev-.purple #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.purple #calendar #dates #days .day:nth-child(23), .prev-.purple #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.purple #calendar #dates #days .day:nth-child(24), .prev-.purple #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.purple #calendar #dates #days .day:nth-child(25), .prev-.purple #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.purple #calendar #dates #days .day:nth-child(26), .prev-.purple #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.purple #calendar #dates #days .day:nth-child(27), .prev-.purple #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.purple #calendar #dates #days .day:nth-child(28), .prev-.purple #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.purple #calendar #dates #days .day:nth-child(29), .prev-.purple #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.purple #calendar #dates #days .day:nth-child(30), .prev-.purple #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.purple #calendar #dates #days .day:nth-child(31), .prev-.purple #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.purple #calendar #dates #days .day:nth-child(32), .prev-.purple #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.purple #calendar #dates #days .day:nth-child(33), .prev-.purple #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.purple #calendar #dates #days .day:nth-child(34), .prev-.purple #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.purple #calendar #dates #days .day:nth-child(35), .prev-.purple #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.purple #calendar #dates #days .day:nth-child(36), .prev-.purple #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.purple #calendar #dates #days .day:nth-child(37), .prev-.purple #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.purple #calendar #dates #days .day:nth-child(38), .prev-.purple #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.purple #calendar #dates #days .day:nth-child(39), .prev-.purple #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.purple #calendar #dates #days .day:hover, .prev-.purple #calendar #dates #days .day:hover {
  color: #953CFE;
  cursor: pointer;
}
.purple #calendar #lastMt, .purple #calendar #nextMt, .prev-.purple #calendar #lastMt, .prev-.purple #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.purple #calendar #lastMt:hover, .purple #calendar #nextMt:hover, .prev-.purple #calendar #lastMt:hover, .prev-.purple #calendar #nextMt:hover {
  cursor: pointer;
}
.purple #calendar #lastMt, .prev-.purple #calendar #lastMt {
  left: 3.25em;
}
.purple #calendar #nextMt, .prev-.purple #calendar #nextMt {
  right: 3.25em;
}
.purple #calendar #months-cont, .prev-.purple #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.purple #calendar #months-cont #months, .prev-.purple #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.purple #calendar #months-cont #months .month, .prev-.purple #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #953CFE;
  display: inline-block;
  text-align: center;
}
.purple #calendar #months-cont #months .month:first-child, .prev-.purple #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.purple #calendar #days .day, .purple #calendar #daysotweek .day, .prev-.purple #calendar #days .day, .prev-.purple #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.purple #calendar #daysotweek, .prev-.purple #calendar #daysotweek {
  margin-top: 0.75em;
}
.purple #info #actual-date, .prev-.purple #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #953CFE;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#purple {
  background: #953CFE;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#purple:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#purple:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#purple:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#purple:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#purple:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#purple:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#purple:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#purple:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#purple:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#purple:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#purple:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#purple:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#purple:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#purple:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#purple:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#purple:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#purple:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#purple:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#purple:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#purple:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.dkprpl, .prev-.dkprpl {
  font-family: 'Monserrat', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #6100D6;
}
.dkprpl.dkprpl, .prev-.dkprpl.dkprpl {
  background: #6100D6;
  transition: all 0.2s ease-in-out;
}
.dkprpl #calendar, .prev-.dkprpl #calendar {
  width: 16.5em;
  min-height: 18em;
  padding-bottom: 1.25em;
  height: auto;
  background: #29323F;
  color: #FFF;
  position: relative;
  box-shadow: 3px 3px 15px 0px rgba(41, 50, 63, 0.75);
  margin-left: 50%;
  margin-top: 5vw;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}
.dkprpl #calendar .input a, .prev-.dkprpl #calendar .input a {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 1em 1.5em;
  width: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, #6100D6 50%, transparent 50%);
  transition: background-position .1s ease-in-out;
}
.dkprpl #calendar .input a:hover, .prev-.dkprpl #calendar .input a:hover {
  cursor: pointer;
  background-position: 100% 0;
}
.dkprpl #calendar .has-event:after, .prev-.dkprpl #calendar .has-event:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 0.1em solid #6100D6;
  height: 1.4em;
  width: 1.4em;
  margin-left: -0.8em;
  margin-top: -0.8em;
}
.dkprpl #calendar .has-event.expanded, .prev-.dkprpl #calendar .has-event.expanded {
  color: #29323F;
}
.dkprpl #calendar .has-event.expanded:hover, .prev-.dkprpl #calendar .has-event.expanded:hover {
  color: #29323F !important;
}
.dkprpl #calendar .has-event.expanded:after, .prev-.dkprpl #calendar .has-event.expanded:after {
  background: #6100D6;
  border-radius: 50%;
  z-index: -1;
}
.dkprpl #calendar #color-picker, .prev-.dkprpl #calendar #color-picker {
  background: #6100D6;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
}
.dkprpl #calendar #color-picker:hover, .prev-.dkprpl #calendar #color-picker:hover {
  cursor: pointer;
}
.dkprpl #calendar #dates, .prev-.dkprpl #calendar #dates {
  padding: 1em 1.5em 0;
  position: relative;
  width: 100%;
}
.dkprpl #calendar #dates #days .day, .prev-.dkprpl #calendar #dates #days .day {
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.dkprpl #calendar #dates #days .day:nth-child(0), .prev-.dkprpl #calendar #dates #days .day:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(1), .prev-.dkprpl #calendar #dates #days .day:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(2), .prev-.dkprpl #calendar #dates #days .day:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(3), .prev-.dkprpl #calendar #dates #days .day:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(4), .prev-.dkprpl #calendar #dates #days .day:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(5), .prev-.dkprpl #calendar #dates #days .day:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(6), .prev-.dkprpl #calendar #dates #days .day:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(7), .prev-.dkprpl #calendar #dates #days .day:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(8), .prev-.dkprpl #calendar #dates #days .day:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(9), .prev-.dkprpl #calendar #dates #days .day:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(10), .prev-.dkprpl #calendar #dates #days .day:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(11), .prev-.dkprpl #calendar #dates #days .day:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(12), .prev-.dkprpl #calendar #dates #days .day:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(13), .prev-.dkprpl #calendar #dates #days .day:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(14), .prev-.dkprpl #calendar #dates #days .day:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(15), .prev-.dkprpl #calendar #dates #days .day:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(16), .prev-.dkprpl #calendar #dates #days .day:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(17), .prev-.dkprpl #calendar #dates #days .day:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(18), .prev-.dkprpl #calendar #dates #days .day:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(19), .prev-.dkprpl #calendar #dates #days .day:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(20), .prev-.dkprpl #calendar #dates #days .day:nth-child(20) {
  animation: fadeIn 0.1s linear 1.2s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(21), .prev-.dkprpl #calendar #dates #days .day:nth-child(21) {
  animation: fadeIn 0.1s linear 1.25s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(22), .prev-.dkprpl #calendar #dates #days .day:nth-child(22) {
  animation: fadeIn 0.1s linear 1.3s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(23), .prev-.dkprpl #calendar #dates #days .day:nth-child(23) {
  animation: fadeIn 0.1s linear 1.35s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(24), .prev-.dkprpl #calendar #dates #days .day:nth-child(24) {
  animation: fadeIn 0.1s linear 1.4s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(25), .prev-.dkprpl #calendar #dates #days .day:nth-child(25) {
  animation: fadeIn 0.1s linear 1.45s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(26), .prev-.dkprpl #calendar #dates #days .day:nth-child(26) {
  animation: fadeIn 0.1s linear 1.5s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(27), .prev-.dkprpl #calendar #dates #days .day:nth-child(27) {
  animation: fadeIn 0.1s linear 1.55s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(28), .prev-.dkprpl #calendar #dates #days .day:nth-child(28) {
  animation: fadeIn 0.1s linear 1.6s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(29), .prev-.dkprpl #calendar #dates #days .day:nth-child(29) {
  animation: fadeIn 0.1s linear 1.65s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(30), .prev-.dkprpl #calendar #dates #days .day:nth-child(30) {
  animation: fadeIn 0.1s linear 1.7s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(31), .prev-.dkprpl #calendar #dates #days .day:nth-child(31) {
  animation: fadeIn 0.1s linear 1.75s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(32), .prev-.dkprpl #calendar #dates #days .day:nth-child(32) {
  animation: fadeIn 0.1s linear 1.8s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(33), .prev-.dkprpl #calendar #dates #days .day:nth-child(33) {
  animation: fadeIn 0.1s linear 1.85s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(34), .prev-.dkprpl #calendar #dates #days .day:nth-child(34) {
  animation: fadeIn 0.1s linear 1.9s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(35), .prev-.dkprpl #calendar #dates #days .day:nth-child(35) {
  animation: fadeIn 0.1s linear 1.95s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(36), .prev-.dkprpl #calendar #dates #days .day:nth-child(36) {
  animation: fadeIn 0.1s linear 2s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(37), .prev-.dkprpl #calendar #dates #days .day:nth-child(37) {
  animation: fadeIn 0.1s linear 2.05s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(38), .prev-.dkprpl #calendar #dates #days .day:nth-child(38) {
  animation: fadeIn 0.1s linear 2.1s forwards;
}
.dkprpl #calendar #dates #days .day:nth-child(39), .prev-.dkprpl #calendar #dates #days .day:nth-child(39) {
  animation: fadeIn 0.1s linear 2.15s forwards;
}
.dkprpl #calendar #dates #days .day:hover, .prev-.dkprpl #calendar #dates #days .day:hover {
  color: #6100D6;
  cursor: pointer;
}
.dkprpl #calendar #lastMt, .dkprpl #calendar #nextMt, .prev-.dkprpl #calendar #lastMt, .prev-.dkprpl #calendar #nextMt {
  color: #626972;
  position: absolute;
  top: 1.45em;
  font-weight: 700;
  font-size: 1.25em;
  z-index: 3;
}
.dkprpl #calendar #lastMt:hover, .dkprpl #calendar #nextMt:hover, .prev-.dkprpl #calendar #lastMt:hover, .prev-.dkprpl #calendar #nextMt:hover {
  cursor: pointer;
}
.dkprpl #calendar #lastMt, .prev-.dkprpl #calendar #lastMt {
  left: 3.25em;
}
.dkprpl #calendar #nextMt, .prev-.dkprpl #calendar #nextMt {
  right: 3.25em;
}
.dkprpl #calendar #months-cont, .prev-.dkprpl #calendar #months-cont {
  width: 50%;
  overflow: hidden;
  height: 3em;
  left: 50%;
  margin-left: -25%;
  position: relative;
}
.dkprpl #calendar #months-cont #months, .prev-.dkprpl #calendar #months-cont #months {
  height: 100%;
  white-space: nowrap;
  padding-top: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.dkprpl #calendar #months-cont #months .month, .prev-.dkprpl #calendar #months-cont #months .month {
  width: 100%;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #6100D6;
  display: inline-block;
  text-align: center;
}
.dkprpl #calendar #months-cont #months .month:first-child, .prev-.dkprpl #calendar #months-cont #months .month:first-child {
  transition: all 0.5s ease-in-out;
}
.dkprpl #calendar #days .day, .dkprpl #calendar #daysotweek .day, .prev-.dkprpl #calendar #days .day, .prev-.dkprpl #calendar #daysotweek .day {
  width: calc(100%/7);
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  position: relative;
  transition: all 0.1s ease-in;
}
.dkprpl #calendar #daysotweek, .prev-.dkprpl #calendar #daysotweek {
  margin-top: 0.75em;
}
.dkprpl #info #actual-date, .prev-.dkprpl #info #actual-date {
  text-align: center;
  float: left;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: #6100D6;
  color: #29323F;
  height: 1.5em;
  width: 1.5em;
  line-height: .5em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}

#colors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
}
#colors #close {
  color: #626972;
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#colors #close:hover {
  cursor: pointer;
}
#colors.show .color {
  border-radius: 50%;
  position: relative;
  float: left;
  opacity: 0;
  width: 14%;
  padding-bottom: 14%;
  margin: 3%;
}
#colors.show .color#dkprpl {
  background: #6100D6;
  transform-origin: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#colors.show .color#dkprpl:nth-child(0) {
  animation: fadeIn 0.1s linear 0.2s forwards;
}
#colors.show .color#dkprpl:nth-child(1) {
  animation: fadeIn 0.1s linear 0.25s forwards;
}
#colors.show .color#dkprpl:nth-child(2) {
  animation: fadeIn 0.1s linear 0.3s forwards;
}
#colors.show .color#dkprpl:nth-child(3) {
  animation: fadeIn 0.1s linear 0.35s forwards;
}
#colors.show .color#dkprpl:nth-child(4) {
  animation: fadeIn 0.1s linear 0.4s forwards;
}
#colors.show .color#dkprpl:nth-child(5) {
  animation: fadeIn 0.1s linear 0.45s forwards;
}
#colors.show .color#dkprpl:nth-child(6) {
  animation: fadeIn 0.1s linear 0.5s forwards;
}
#colors.show .color#dkprpl:nth-child(7) {
  animation: fadeIn 0.1s linear 0.55s forwards;
}
#colors.show .color#dkprpl:nth-child(8) {
  animation: fadeIn 0.1s linear 0.6s forwards;
}
#colors.show .color#dkprpl:nth-child(9) {
  animation: fadeIn 0.1s linear 0.65s forwards;
}
#colors.show .color#dkprpl:nth-child(10) {
  animation: fadeIn 0.1s linear 0.7s forwards;
}
#colors.show .color#dkprpl:nth-child(11) {
  animation: fadeIn 0.1s linear 0.75s forwards;
}
#colors.show .color#dkprpl:nth-child(12) {
  animation: fadeIn 0.1s linear 0.8s forwards;
}
#colors.show .color#dkprpl:nth-child(13) {
  animation: fadeIn 0.1s linear 0.85s forwards;
}
#colors.show .color#dkprpl:nth-child(14) {
  animation: fadeIn 0.1s linear 0.9s forwards;
}
#colors.show .color#dkprpl:nth-child(15) {
  animation: fadeIn 0.1s linear 0.95s forwards;
}
#colors.show .color#dkprpl:nth-child(16) {
  animation: fadeIn 0.1s linear 1s forwards;
}
#colors.show .color#dkprpl:nth-child(17) {
  animation: fadeIn 0.1s linear 1.05s forwards;
}
#colors.show .color#dkprpl:nth-child(18) {
  animation: fadeIn 0.1s linear 1.1s forwards;
}
#colors.show .color#dkprpl:nth-child(19) {
  animation: fadeIn 0.1s linear 1.15s forwards;
}
#colors.show .color.active {
  box-shadow: 0 0 0 3px #FFF inset;
}
#colors.show .color:hover {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#info.show #card .content {
  animation: flipUp 0.2s linear 0.9s forwards;
}
#info.show #bg-card .content {
  animation: flipUp 0.2s linear 0.6s forwards;
}
#info.show #rain .raindrop {
  i: 1;
}
@keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes rain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#info.show #rain .raindrop#drop-1 {
  animation: rain 0.1s linear 2s forwards;
}
#info.show #rain .raindrop#drop-2 {
  animation: rain 0.1s linear 2.05s forwards;
}
#info.show #rain .raindrop#drop-3 {
  animation: rain 0.1s linear 2.1s forwards;
}
#info.show #rain .raindrop#drop-4 {
  animation: rain 0.1s linear 2.15s forwards;
}
#info #back {
  color: #626972;
  position: absolute;
  top: 1em;
  left: 1em;
}
#info #weather {
  width: 88%;
  left: 50%;
  margin-left: -44%;
  position: relative;
  top: 2em;
}
#info #weather #sun {
  width: 0.75em;
  height: 0.75em;
  background: #FCEE6D;
  transform: rotate(45deg);
  position: absolute;
  left: 5.8em;
  top: 1.8em;
}
#info #weather #sun:after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: gold;
  position: absolute;
  left: 0;
  transform: rotate(-45deg);
}
#info #weather #rain {
  position: absolute;
  top: 3.8em;
  width: 11%;
  left: 50%;
  margin-left: -18.1%;
  text-align: center;
}
#info #weather #rain .raindrop {
  opacity: 0;
  width: 0.35em;
  height: 0.35em;
  background: #7ba6ff;
  border-radius: 50%;
  position: relative;
}
#info #weather #rain .raindrop:before {
  content: '';
  display: block;
  position: absolute;
  top: -0.22em;
  left: 0;
  border-left: 0.2em solid transparent;
  border-right: 0.20em solid transparent;
  border-bottom: 0.35em solid #7ba6ff;
}
#info #weather #rain .raindrop.center {
  top: 0.1em;
}
#info #weather #rain .raindrop#drop-1, #info #weather #rain .raindrop#drop-4 {
  clear: both;
  margin-left: 50%;
  transform: translateX(-50%);
}
#info #weather #rain .raindrop#drop-2 {
  float: left;
  clear: left;
}
#info #weather #rain .raindrop#drop-3 {
  float: right;
  clear: right;
}
#info #weather #rain .raindrop#drop-4 {
  top: 0.17em;
}
#info #weather #mountains {
  width: 0;
  height: 0;
  border-left: 1.25em solid transparent;
  border-right: 1.25em solid transparent;
  border-bottom: 1.75em solid #b1b6bc;
  top: 1.5em;
  left: 4em;
  position: relative;
}
#info #weather #mountains:after {
  content: '';
  display: block;
  position: absolute;
  left: 0em;
  width: 0;
  height: 0;
  bottom: -1.75em;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-bottom: 1.15em solid #dadcdf;
}
#info #weather #temp {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0em;
  margin-left: 4.75em;
}
#info #weather #temp span {
  font-size: 0.65em;
  display: inline-block;
  padding-top: 0.25em;
  vertical-align: top;
}
#info #month-name {
  text-transform: uppercase;
  font-size: 0.7em;
  position: absolute;
  top: 1em;
  right: 3em;
}
#info #card {
  width: 88%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44%;
  perspective: 600px;
  overflow: hidden;
  height: 10em;
  background: transparent;
}
#info #card .content {
  background: #FFF;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
}
#info #card #event-name {
  color: #29323F;
  text-align: center;
  margin-top: 0.5em;
  padding-bottom: 0.75em;
}
#info #card #event-details {
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
#info #card #event-details .col-3 {
  width: 33%;
  display: inline-block;
  color: #29323F;
  vertical-align: top;
  float: left;
}
#info #card #event-details .col-3 h3 {
  font-size: 0.6em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
#info #card #event-details .col-3 i {
  color: #838ECF;
}
#info #card #event-details .col-3 i.fa-user {
  background: #838ECF;
  color: #FFF;
  border-radius: 50%;
  font-size: 0.6em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
}
#info #card #event-details .col-3 p {
  font-size: 0.6em;
  white-space: normal;
  color: #626972;
}
#info #bg-card {
  width: 82%;
  height: 10.5em;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -41%;
  perspective: 600px;
  overflow: hidden;
}
#info #bg-card .content {
  background: #626972;
  padding: 0.5em;
  display: inline-block;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.hide, .show {
  transition: all 0.1s ease-in-out;
}

.show {
  opacity: 1;
  z-index: 4;
}
@-webkit-keyframes hideOrShow {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}
@keyframes hideOrShow {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}
.show {
  animation: hideOrShow 0.1s linear 2s forwards;
}

.hide {
  opacity: 0;
  z-index: 1;
}
@-webkit-keyframes hideOrShow {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}
@keyframes hideOrShow {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}
.hide {
  animation: hideOrShow 0.1s linear 2s forwards;
}

.day-details {
  clear: both;
  transform: scaleY(0);
  transition: all 0.3s ease-in-out;
  margin: 0 1em 0 -1.5em;
  transform-origin: top center;
}
.day-details input, .day-details .input {
  transform: scaleY(0);
  border: 0;
  box-shadow: none;
  padding: 0;
  transition: height 0.3s ease-in-out;
  width: 100%;
  display: block;
  height: 0;
  background: #FFF;
  color: #29323F;
  font-size: 0.85em;
  font-family: 'Montserrat', sans-serif;
}
.expanded ~ .day-details.expanded {
  transform: scaleY(1);
  transition: all 0.3s ease-in-out;
}
.expanded ~ .day-details.expanded input, .expanded ~ .day-details.expanded .input {
  border: 0;
  box-shadow: none;
  padding: 1em 1.5em;
  line-height: 13px;
  transform: scaleY(1);
  box-sizing: content-box;
  margin: 0 0 0.5em;
  height: 13px;
  background: #FFF;
  transition: height 0.3s ease-in-out;
}
.expanded ~ .day-details.expanded #input-arrow {
  width: 0;
  height: 0;
  position: relative;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #FFF;
  transition: margin-left 0.25s ease-in-out;
}
JS
var allMonths, dayArray = [], click = 0, dotw = [/Sun/gi,/Mon/gi,/Tue/gi,/Wed/gi, /Thu/gi,/Fri/gi,/Sat/gi];
function getAllDays(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    var dayToPush = new Date(date);
    days.push(dayToPush);
    date.setDate(date.getDate() + 1);
  }
  return days;
}

function getYear(){
  var d = new Date();
  var curYear = d.getFullYear();
  return curYear;
}
function addElements (query, id){
  //for onload, use activeIndex+1 as query value
  document.getElementById(id).innerHTML = '';
  var allDays = getAllDays((query), getYear());
    for(var i = 0; i0) {
      document.querySelector('#months .month:first-child').style.marginLeft = -(calWidth * (activeIndex-1))+'px';
    currentActive.className = 'month';
    allMonths[activeIndex-1].className += ' active';
        addElements((activeIndex-1), 'days');
    } else {
      document.querySelector('#months .month:first-child').style.marginLeft = -(calWidth * 11) + 'px';
    currentActive.className = 'month';
    allMonths[11].className += ' active';
        addElements(11, 'days');
    }
  }
  if(e.target.id === 'color-picker'){
    document.querySelector('#dates.show').className = 'hide';
    document.getElementById('colors').className = 'show';
    e.target.className = 'hide';
  }
  if(e.target.id === 'back'){
    document.getElementById('color-picker').className = document.getElementById('color-picker').className.replace(/hide/gi,'show');
    document.getElementById('info').className = document.getElementById('info').className.replace(/show/gi,'hide');
    document.getElementById('dates').className = document.getElementById('dates').className.replace(/hide/gi,'show');
  }
  if(e.target.className === 'color'){
    var allColors = document.querySelectorAll('.color');
    for(var i = 0; i div').className = 'prev-'+document.querySelector('body > div').className+' '+document.querySelector('.color.active').id;
    document.querySelector('body > div').className = document.querySelector('.color.active').id;
    
  }
  if(e.target.id === 'close'){
   if(e.target.parentNode.id==='colors'){
     e.preventDefault();
     e.target.parentNode.className = 'hide';
     document.getElementById('dates').className = 'show';
     document.getElementById('color-picker').className = 'show';
   }
  }
  if(e.target.className.match(/day/gi) && e.target.parentNode.id === 'days'){
   for(var i = 0; i 1){

          document.querySelector('.day-details.expanded .input').outerHTML = ''; 
          document.querySelector('.day-details.expanded input').focus();
          document.querySelector('.day-details.expanded input').setSelectionRange(document.querySelector('.day-details.expanded input').value.length, document.querySelector('.day-details.expanded input').value.length);
        } else if (click === 1){
          
         document.getElementById('color-picker').className = document.getElementById('color-picker').className.replace(/show/gi,'hide');
document.getElementById('month-name').innerHTML = document.querySelector('.month.active').innerHTML.replace(' 2016','');          document.getElementById('info').className = 'show';
          document.getElementById('actual-date').style.left = document.querySelector('.day.expanded').offsetLeft + 'px';
          document.getElementById('actual-date').style.top = document.querySelector('.day.expanded').offsetTop + 'px';
          document.getElementById('dates').className = 'hide';
          TweenMax.to("#actual-date", ((document.querySelector('.day.expanded').offsetTop*2.5)/document.getElementById('calendar').clientHeight), {
  bezier: {
    values: [{
      x: 0,
      y: 0
    }, {
      x: (3*(document.getElementById('calendar').clientWidth-document.querySelector('.day.expanded').offsetLeft - 28))/4,
      y: -(1*(document.querySelector('.day.expanded').offsetTop - 9))/4
    }, {
      x: document.getElementById('calendar').clientWidth-document.querySelector('.day.expanded').offsetLeft - 26,
      y: -(document.querySelector('.day.expanded').offsetTop - 7)
    }]
  }
});
          document.getElementById('actual-date').innerHTML = document.querySelector('.day.expanded').innerHTML;
          document.getElementById('event-name').innerHTML = document.querySelector('.day-details.expanded .input a').innerHTML;
          document.querySelector('.day-details.expanded').className = document.querySelector('.day-details.expanded').className.replace(/ expanded/, '');
      document.querySelector('.day.expanded').className = document.querySelector('.day.expanded').className.replace(/ expanded/, '');
        }
        click = 0;
      }, 500);
  }
});
document.body.addEventListener('keyup', function(e){
  if(e.keyCode === 13){
    document.querySelector('.day.expanded').dataset.title = document.querySelector('.day-details.expanded input').value;
    if(document.querySelector('.day-details.expanded input').value.length >0){
      document.querySelector('.day.expanded').className += ' has-event';
         document.querySelector('.day-details.expanded input').outerHTML = ''; 
    } else {
      if(document.querySelector('.day.expanded').className.match(/ has-event/gi)){
        document.querySelector('.day.expanded').className = document.querySelector('.day.expanded').className.replace(/ has-event/gi,'');
      }
         document.querySelector('.day-details.expanded input').outerHTML = '
'; } click = 0; } });
Host Instantly Drag and Drop Website Builder

 

Description

Based off of https://dribbble.com/shots/2209385-Calendar-Widget-ll-Freebie by Hanna Jung. Only dependency is GSAP because hand coding that exponential curve was starting to turn into a nightmare :(. The next step would be to push all the calendar dates & months into an array of objects on load, then push each new event to said date. Then, potentially leverage local storage. Eventually, add a name slot (for your name) and a location slot for your address. Finally, include a weather API to depict that actual weather, if that data is available (since most weather forecasts only go up to 16 days).
Term
Mon, 11/27/2017 - 21:52

Related Codes

Pen ID
Pen ID
Pen ID