.calendar {
  width: 318px;
  padding-right: 11px;
  padding-top: 19px;
  padding-bottom: 11px;
  font-size: 100%;
  margin: 0 auto;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  cursor: default;
  position: relative;
  left: -7px;
}
    @media (max-width: 767.98px) {
      .calendar {
        width: 100%;
        padding-right: 0px; 
         padding-top: 0px; 
        padding-bottom: 0px; 

    }
     }
    .calendar .header {
      height: 100px;
      position: relative;
      color: #fff; }
      .calendar .header .text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #308ff0;
        padding: 15px;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        -webkit-transform-origin: bottom;
        -ms-transform-origin: bottom;
        transform-origin: bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: .4s ease-in-out 0s;
        -o-transition: .4s ease-in-out 0s;
        transition: .4s ease-in-out 0s;
        -webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.01), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.01), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        opacity: 0; }
        .calendar .header .text > span {
          text-align: center;
          padding: 20px;
          display: block;
          text-transform: uppercase;
          font-weight: 400; }
      .calendar .header.active .text {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1; }
  
  .months {
    width: 100%;
    height: 280px;
    position: relative; }
    .months .hr {
      height: 1px;
      margin: 15px 0;
      background: #ccc; }
  
  .month {
    padding: 15px;
    width: inherit;
    height: inherit;
    background: #fff;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out 0s;
    -o-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    -webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.01), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.01), 0 8px 17px 0 rgba(0, 0, 0, 0.2); }
  
  .months[data-flow="left"] .month {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg); }
  
  .months[data-flow="right"] .month {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  
  .table {
    width: 100%;
    font-size: 10px;
    font-weight: 400;
    display: table; }
    .table .row {
      display: table-row; }
      .table .row.head {
        color: #308ff0;
        text-transform: uppercase; }
      .table .row .cell {
        width: 14.28%;
        padding: 5px;
        text-align: center;
        display: table-cell; }
        .table .row .cell.disable {
          color: #ccc; }
        .table .row .cell span {
          display: block;
          width: 28px;
          height: 28px;
          line-height: 28px;
          -webkit-transition: color,background .4s ease-in-out 0s;
          -o-transition: color,background .4s ease-in-out 0s;
          transition: color,background .4s ease-in-out 0s; }
        .table .row .cell.active span {
          color: #fff;
          background-color: #308ff0;
          border-radius: 4px; }
  
  .months .month[data-active="true"] {
    -webkit-transform: rotateY(0);
    transform: rotateY(0); }
  
  .header [data-action] {
    color: inherit;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all .4s ease-in-out 0s;
    -o-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s; }
    .header [data-action] > i {
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -10px;
      margin-left: -10px; }
      .header [data-action] > i:before, .header [data-action] > i:after {
        top: 50%;
        margin-top: -1px;
        content: '';
        position: absolute;
        height: 2px;
        width: 20px;
        border-top: 2px solid;
        border-radius: 2px; }
  
  .header [data-action*="prev"] {
    left: 15px; }
    .header [data-action*="prev"] > i:before, .header [data-action*="prev"] > i:after {
      left: 0; }
    .header [data-action*="prev"] > i:before {
      top: 3px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .header [data-action*="prev"] > i:after {
      top: auto;
      bottom: 3px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  
  .header [data-action*="next"] {
    right: 15px; }
    .header [data-action*="next"] > i:before, .header [data-action*="next"] > i:after {
      right: 0; }
    .header [data-action*="next"] > i:before {
      top: auto;
      bottom: 3px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .header [data-action*="next"] > i:after {
      top: 3px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  
  .header.active [data-action] {
    opacity: 1; }

    .calendar .header .text {
      background-color: #1B527B;
    }

    .table .row .cell.active span {
      color: #fff;
      background-color: #1b527b;
      border-radius: 4px;
  }

  .table .row.head {
    color: #1b517a;
    text-transform: uppercase;
}
    
  
  [data-theme="Enero"] {
    background-color: #1B527B; }
  
  [data-theme="Enero"] .row.head {
    color: #1E88E5; }
  
  [data-theme="Enero"] .header .text,
  [data-theme="Enero"] .table .row .cell.active span {
    background-color: #184465; }
  
  [data-theme="Febrero"] {
    background-color: #115a7b; }
  
  [data-theme="Febrero"] .row.head {
    color: #039BE5; }
  
  [data-theme="Febrero"] .header .text,
  [data-theme="Febrero"] .table .row .cell.active span {
    background-color: #133651; }
  
  [data-theme="Marzo"] {
    background-color: #0E283C; }
  
  [data-theme="Marzo"] .row.head {
    color: #0e1046; }
  
  [data-theme="Marzo"] .header .text,
  [data-theme="Marzo"] .table .row .cell.active span {
    background-color: #0C1A26; }
  
  [data-theme="Abril"] {
    background-color: #080D13; }
  
  [data-theme="Abril"] .row.head {
    color: #115a7b; }
  
  [data-theme="Abril"] .header .text,
  [data-theme="Abril"] .table .row .cell.active span {
    background-color: #184465; }
  
  [data-theme="Mayo"] {
    background-color: #1B527B; }
  
  [data-theme="Mayo"] .row.head {
    color: #2a2ca8; }
  
  [data-theme="Mayo"] .header .text,
  [data-theme="Mayo"] .table .row .cell.active span {
    background-color: #133651; }
  
  [data-theme="Junio"] {
    background-color: #0C1A26; }
  
  [data-theme="Junio"] .row.head {
    color: #0e1046; }
  
  [data-theme="Junio"] .header .text,
  [data-theme="Junio"] .table .row .cell.active span {
    background-color: #080D13; }
  
  [data-theme="Julio"] {
    background-color: #110c5d; }
  
  [data-theme="Julio"] .row.head {
    color: #0E283C; }
  
  [data-theme="Julio"] .header .text,
  [data-theme="Julio"] .table .row .cell.active span {
    background-color: #0E283C; }
  
  [data-theme="Agosto"] {
    background-color: #080D13; }
  
  [data-theme="Agosto"] .row.head {
    color: #5E35B1; }
  
  [data-theme="Agosto"] .header .text,
  [data-theme="Agosto"] .table .row .cell.active span {
    background-color: #133651; }
  
  [data-theme="Septiembre"] {
    background-color: #080D13; }
  
  [data-theme="Septiembre"] .row.head {
    color: #0E283C;  }
  
  [data-theme="Septiembre"] .header .text,
  [data-theme="Septiembre"] .table .row .cell.active span {
    background-color: #133651; }
  
  [data-theme="Octubre"] {
    background-color: #080D13; }
  
  [data-theme="Octubre"] .row.head {
    color: #242baa; }
  
  [data-theme="Octubre"] .header .text,
  [data-theme="Octubre"] .table .row .cell.active span {
    background-color: #133651; }
  
  [data-theme="Noviembre"] {
    background-color: #1B527B;}
  
  [data-theme="Noviembre"] .row.head {
    color: #321d84; }
  
  [data-theme="Noviembre"] .header .text,
  [data-theme="Noviembre"] .table .row .cell.active span {
    background-color: #080D13; }
  
  [data-theme="Diciembre"] {
    background-color: #B0BEC5; }
  
  [data-theme="Diciembre"] .row.head {
    color: #546E7A; }
  
  [data-theme="Diciembre"] .header .text,
  [data-theme="Diciembre"] .table .row .cell.active span {
    background-color: #133651; }