.calendar {
  width: 100%;
  margin-bottom: 20px; }
  @media (min-width: 768px) {
    .calendar {
      margin-bottom: 30px; } }
  .calendar__date {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 30px; }
    .calendar__date .month-name {
      margin: 0 20px; }
      @media (min-width: 768px) {
        .calendar__date .month-name {
          font-size: 24px; } }
    .calendar__date .item {
      padding: 10px 12px;
      margin: 0;
      font-size: 0;
      border-radius: 2px;
      background-color: #8F8F8F;
      color: #ffffff;
      text-decoration: none;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center; }
      .calendar__date .item.disabled {
        background-color: #CDCACA;
        pointer-events: none; }
      .calendar__date .item--prev::before, .calendar__date .item--next::before {
        display: block;
        content: '';
        width: 8px;
        height: 12px;
        background: url(img/arrow.svg); }
      .calendar__date .item--next::before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg); }
  .calendar .weekdays,
  .calendar .week {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch; }
  .calendar .day,
  .calendar .weekday {
    box-sizing: border-box;
    border: 1px solid #DEDEDE;
    margin-right: -1px;
    width: 100%; }
    @media (min-width: 768px) {
      .calendar .day,
      .calendar .weekday {
        width: 14.2857143%; } }
    .calendar .day:before,
    .calendar .weekday:before {
      content: none; }
  .calendar .weekdays .weekday {
    text-align: center;
    line-height: 20px;
    padding: 10px 6px;
    color: #000000;
    border: 2px solid #000000;
    display: none; }
    @media (min-width: 768px) {
      .calendar .weekdays .weekday {
        display: block; } }
  .calendar .week .day {
    min-height: 130px;
    height: initial;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: -1px; }
    .calendar .week .day.more-events {
      min-height: 130px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media (min-width: 1200px) {
        .calendar .week .day.more-events {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -webkit-flex-direction: row;
          flex-direction: row; } }
      .calendar .week .day.more-events .event {
        width: 100%; }
        @media (min-width: 768px) {
          .calendar .week .day.more-events .event-time {
            font-size: 12px;
            padding: 5px;
            margin-bottom: 2px; } }
        @media (min-width: 768px) {
          .calendar .week .day.more-events .event-name {
            font-size: 14px; } }
        @media (min-width: 1200px) {
          .calendar .week .day.more-events .event {
            width: 50%; } }
    .calendar .week .day:not(.empty) {
      background: #ffffff;
      margin-bottom: 20px; }
      @media (min-width: 768px) {
        .calendar .week .day:not(.empty) {
          margin-bottom: -1px; } }
    .calendar .week .day.empty {
      display: none; }
      @media (min-width: 768px) {
        .calendar .week .day.empty {
          display: block; } }
  .calendar .week .date {
    font-family: "robotobold";
    text-align: right;
    margin-bottom: 5px;
    padding: 4px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: center;
    -ms-grid-row-align: center;
    align-self: center;
    position: static; }
    .calendar .week .date.NewsCalWeekend {
      color: #D30612; }
    .calendar .week .date.NewsCalOtherMonth {
      color: #CDCACA; }
    .calendar .week .date .dayname {
      display: inline; }
      @media (min-width: 768px) {
        .calendar .week .date .dayname {
          display: none; } }
    @media (min-width: 768px) {
      .calendar .week .date {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        position: absolute;
        right: 8px;
        top: 4px; } }
  .calendar .week .event {
    font-size: 12px;
    color: #000000;
    padding: 5px 5px 15px;
    text-decoration: none;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-transition: .3s;
    transition: .3s;
    line-height: 1.1;
    border-bottom: 1px solid #DEDEDE;
    margin-bottom: 20px;
    overflow: hidden; }
    .calendar .week .event:last-of-type {
      border: none;
      margin: 0; }
    @media (min-width: 768px) {
      .calendar .week .event {
        padding: 5px;
        border: none;
        margin: 0;
        background: #F5F5F5; } }
    .calendar .week .event-time {
      background: #D37553;
      padding: 10px;
      border-radius: 2px;
      color: #ffffff;
      font-size: 16px;
      font-family: "robotobold";
      margin-bottom: 10px; }
    .calendar .week .event-name {
      width: 100%;
      font-size: 20px;
      font-family: "robotobold";
      color: #D30612;
      word-break: break-word; }
    .calendar .week .event-hall {
      margin-top: auto; }
    @media (min-width: 768px) {
      .calendar .week .event:hover, .calendar .week .event:focus {
        background-color: #D30612;
        color: #ffffff; }
        .calendar .week .event:hover .event-time, .calendar .week .event:focus .event-time {
          background-color: #F5F5F5;
          color: #000000; }
        .calendar .week .event:hover .event-name, .calendar .week .event:focus .event-name {
          color: #ffffff; } }