@import url(https://fonts.googleapis.com/css?family=Oleo+Script);

#calendar {
  background: #d6d4d4;

  font-family: 'Oleo Script', cursive;
  /*padding: 20px;*/
  font-weight: 400;
  padding-bottom:10px;
}

#calendar h1 {
  padding-top:15px;
  font-size:22px;
  line-height: 18px;
  text-align: center;
  font-family: 'Oleo Script', cursive!important;
}

#calendar p {
  margin:0;
  font-size:18px;
  line-height: 18px;
  text-align: center;
  font-family: 'Oleo Script', cursive;
  padding:15px;
}

#calendar ul {
  margin:0 auto 30px auto;
  padding:0;
  list-style-type:none;
  /*max-width:900px;*/
  width: 100%;
  text-align: center;
  user-select: none;
}

#calendar li {
  font-weight: 400;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  display: inline-block;
  color:#111;
  cursor:pointer;
  font-size: 26px;
  padding:15px;
  margin:25px 12px;
  width: 130px;
  height:130px;
  line-height: 100px;
  text-align:center;
  position: relative;
  vertical-align:top;
  user-select: none;
  perspective: 800px;
  transition: all 0.4s ease-in-out;
}

#calendar li img{
  position:absolute;
  left:0px;
  top:0px;
  z-index:-2;
  border-radius: 6px;  
}

#calendar ul li:last-child {
  background-size:cover;  
  display:block;
  clear:both;
  margin: 20px auto 0 auto;
  width: 200px;
  height: 275px;
}

#calendar ul li:last-child .door {
  font-size: 100px;
  width: 200px;
  height: 275px;
  line-height: 240px;
}

#calendar ul li:last-child .revealed {
  /*line-height: 123px;*/
}

#calendar .button.button-small {
    position: relative;
    width:100%;
	bottom: -100px;
    left: 9px;
	z-index:-2;	
}

.door {
  user-select: none;
  color:#fff;
  font-size: 70px;
  position: absolute;
  top:0;
  left:0;
  background-color: #91c1cc;
  box-sizing: border-box;
  border-top: 2px #eee dashed;
  border-right: 2px #eee dashed;
  border-bottom: 2px #eee dashed;
  border-left: 1px #eee solid;
  border-radius: 6px;
  padding:15px;
  width: 150px;
  height:150px;
  transform-origin: 0 40%; 
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

#calendar .current .door {
  background-color: #7EAD44;
}

#calendar .current .door.open{
  color: #7EAD44;
}

.grey { 
  background-color: #a8a8a8;
};

.revealed {
  user-select: none;
}

#calendar .open {
  box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
  color: #91c1cc;
  transform: rotate3d(0, 1, 0, -98deg);
}

#calendar .jiggle {
  animation: jiggle 0.2s infinite;
  transform: rotate(-1deg);
}

@keyframes jiggle {
  0% {
        transform: rotate(-1deg);
  }
  50% {
      transform: rotate(1deg);
  }
}

@media screen and (min-width: 480px) {
  #calendar li {
    margin:25px 20px;
  }
}


@media screen and (min-width: 768px) {
	
	#calendar p {
		right: 6%;
		top: 20%;
		bottom: auto; 
		margin-left: auto;
		left: auto;
	}
}