#calendarContainer {
  width:340px;
  height:165px;
  position:relative;
  -webkit-perspective: 1000;
  perspective: 1000;
}
#calendarContainer #calendarCard{
  width:100%;
  height:100%;
  position:absolute;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transition:transform 1s ease;
}
#calendarContainer .back, #calendarContainer .front{
  border-radius:6px;
  position:absolute;
  width:100%;
  height:100%;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;

  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#calendarContainer .contentfront{
  width:100%;
  height:100%;
  float:left;
  -webkit-transform:translatez(60px);
  transform:translatez(60px);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
#calendarContainer .contentback{
  width:100%;
  height:100%;
  float:left;
  -webkit-transform:translatez(60px);
  transform:translatez(60px);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
#calendarContainer .back{
  transform:rotateY(180deg);
  background-color:#331904;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
#calendarContainer .front{
  text-transform:uppercase;
  background-color:#331904;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
#calendarContainer .date{
  height:100%;
  width:130px;
  float:left;
  background-color:#fd7e14;
  border-radius:0 6px 6px 0;
  text-align:right;
  padding:0 20px;
  box-sizing:border-box;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
#calendarContainer .datecont{
  height:100%;
  -webkit-transform:translatez(60px) scale(.9);
  transform:translatez(60px) scale(.9);
}
#calendarContainer #date{
  font-size:50px;
  color:#ECECE7;
  font-family: 'Montserrat', sans-serif;
  font-weight:500;
  float:right;
}
#calendarContainer #day{
  float:right;
  font-size:14px;
  color:#232227;
  font-family: 'Montserrat', sans-serif;
  font-weight:400;
}
#calendarContainer #month{
  float:right;
  font-size:10px;
  color:#232227;
  font-family: 'Montserrat', sans-serif;
  font-weight:200;
}
#calendarContainer .date i{
  color:#ECECE7;
  position:absolute;
  bottom:10px;
  right:0;
}
#calendarContainer .date i:hover{
  color:#232227;
  transition:.3s ease;
}
#calendarContainer .month{
  height:100%;
  width:200px;
  float:left;
  padding: 5px 15px;
  box-sizing:border-box;
}
#calendarContainer .month table{
  width:100%;
}
#calendarContainer thead {
  color:#E76642;
  font-size: 14px;
}
#calendarContainer thead tr {
  height: 26px;
}
#calendarContainer tbody{
  color:#ECECE7;
  font-size: 11px;
}
#calendarContainer tbody tr {
  height: 21px;
}
#calendarContainer tbody th:hover{
  color:#E76642;
  transition:.3s ease;
}
#calendarContainer .month th{
  width:14%;
  font-family: 'Montserrat', sans-serif;
  font-weight:400;
  text-align: center
}
#calendarContainer .month th.bg-datepublished {
  background-color: #984c0c;
}

#calendarContainer .flipped{
  transform:rotateY(-180deg);
  /*height:400px;
  width:200px;
  left:calc(50% - 100px);
  top:calc(50vh - 200px);*/
}
#calendarContainer .backcontainer{
  transform-style:preserve-3d;
  width:calc(100% - 60px);
  height:calc(100% - 40px);
  float:left;
  margin-left:30px;
  margin-top:20px;
  /*transform:translatez(60px) scale();*/
  
  background-color:#fd7e14;
  color: white;
  border-radius:6px;
  padding:10px 30px;
  box-sizing:border-box;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

#calendarContainer #todayTopic {
  float: right;
  text-transform: capitalize;
  font-family: 'Montserrat', sans-serif;
  color: #ddd;
}