%h1.title Daily CSS Images: Calendar
.container
  .calendar-wrapper.december
    .month-wrapper
      .month-animal
        .month-animal-head
          .animal-eye-left
            .eye-left-inner
          .animal-eye-right
            .eye-right-inner
          .animal-nose
          .animal-mouth
      .month-days
        %h2.year 2016
        %h1.month-name December
        .week-days
          %span{:style => "color: red;"} S
          %span M
          %span T
          %span W
          %span T
          %span F
          %span S
        .days-holder

@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');
        
@keyframes calendar-flip {
  0% {
    transform: rotate(0deg);
    transform-origin: top left;
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    }
  30% {
    transform-origin: top left;
    transform: rotate(45deg);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    }
 50% {
    transform: translateX(0px) translateY(100px) rotate(90deg, 20deg);
 }
 100% {
    transform: translateY(200vh) rotate(90deg);
    }
}

body {
  overflow: hidden;
}
h1.title {
  text-align: center;
  color: white;
  font-family: 'Arima Madurai', cursive; 
}
.december {
   animation: calendar-flip 4s 1s forwards ease-in-out;
   z-index: 2;
}



 body {
    background: #355161;
  }

.calendar-wrapper {
  position: absolute;
  left: calc(50% - 125px);
  width: 250px;
  height: 400px;
  margin: 0 auto;
  padding: 10px;
  display: inline-block;
  background: white;
  transform-origin: left center;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.month-wrapper {
  width: 100%;
  height: 100%;
}

.december .month-wrapper {
    background: #211f20;
}
.january .month-wrapper {
  background: #f4bdb8;
}
.year {
  margin: 0;
  font-size: 16px;
}
.month-name {
  margin: 2px 0 10px 0;
  text-transform: capitalize;
}

.month-days {
  position: absolute;
  bottom: 10px;
  height: 52%;
  width: 80%;
  left: 10%;
  padding: 10px;
  border-radius: 50% 50% 0 0;
  background: #fff;
  font-family: 'Berkshire Swash', cursive;
  text-align: center;
  font-size: 14px;
}

.december .days-holder time:first-child {
    margin-left: 57%;
}

.days-holder,
.week-days{
   display: block;
   width: 100%;
   padding: 5px 0;
}
.days-holder {
  text-align: left;
  margin-left: 8px;
}

.days-holder time{
    width: 14.28%;
    display: inline-block;
}
.december .days-holder time:nth-child(7n+4) {
  color: red;
}
.january .days-holder time:nth-child(7n+1) {
  color: red;
}
.month-days .week-days span {
     width: 12.5%;
    display: inline-block;
}


/* ANIMAL PART */

.december .month-animal {
  width: 100%;
  height: 100%;
}
.december .month-animal-head {
  width: 100%;
  height: 42%;
  background: #f0efea;
  border-radius: 0 0 50% 50%;
}

.december .animal-eye-left,
.december .animal-eye-right {
  position: absolute;
  width: 18%;
  height: 15%;
  background: #211f20;
  border-radius: 40%;
  top: 10%;
}
.december .animal-eye-left {
  left: 25%;
  transform: rotate(25deg);
}
.december .animal-eye-right {
  right: 25%;
  transform: rotate(-25deg);
}
.december .eye-left-inner,
.december .eye-right-inner {
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 40%;
  height: 30%;
  top: 25%;
}
.december .eye-left-inner,
.december .eye-right-inner{
  left: 30%;
}

.december .eye-left-inner:before,
.december .eye-right-inner:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: #211f20;
  left: 25%;
  top: 15%;
}

.december .animal-nose {
  position: absolute;
  top: 23%;
  left: 41.5%;
  width: 17%;
  height: 7%;
  background: #211f20;
  border-radius: 50% 50% 30% 30%;
  font-family: 'Berkshire Swash', cursive;
}
.december .animal-nose:before {
    content: ",";
    position: absolute;
    color: white;
    transform: rotate(-90deg);
    left: 35%;
    font-size: 30px;
    top: -35%;
  
}
.december .animal-nose:after {
    content: ",";
    position: absolute;
    top: 115%;
    left: 23%;
    color: #211f20;
    font-size: 70px;
    transform: rotate(180deg);
    transition: all 1s ease-in-out;
}

.january .animal-eye-left,
.january .animal-eye-right {
  position: absolute;
  width: 7%;
  height: 5%;
  background: black;
  border-radius: 50%;
  top: 17%;
}
.january .animal-eye-left {
  left: 37%;
}
.january .animal-eye-right {
  right: 37%;
}
.january .animal-nose {
  position: absolute;
  width: 26%;
  height: 12%;
  background: #e6a79a;
  border-radius: 50%;
  top: 26%;
  left: 37%;
}
.january .animal-nose:before,
.january .animal-nose:after {
  content: "";
  position: absolute;
  width: 20%;
  height: 30%;
  background: #a10d17;
  border-radius: 50%;
  top: 35%;
}
.january .animal-nose:before {
  left: 20%;
}
.january .animal-nose:after {
  right: 20%;
}

.january .animal-mouth {
  position: absolute;
  top: 31%;
  left: 43%;
  width: 14%;
  height: 10%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #864b5b;
}

$(document).ready(function() {
    for (var i = 1; i <= 31; i++) {
        $('.days-holder').append('<time><span>' + i + '</span></time>');
    }
    var e = $('.calendar-wrapper.december');
    e.clone().insertAfter(e);
    e.removeClass('december').addClass('january');
    e.find('.year').text('2017');
    e.find('.month-name').text('January');
  //createDays('january');
});