/*
* Shortcode: final-countdown.scss
* -----------------------------------------------
*/
.tm-sc-countdown-timer {
  .countdown-container {
    font-size: 20px;
    span {
      display: inline-block;
      font-size: 28px;
      line-height: 2;
      padding: 0 5px;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    }
  }
}

.final-countdown-modern-circular {
  .countdown-container {
    width: 100%;
    position: relative;

    .clock-item {
      position: relative;
      max-width: 270px;
      .inner {
        position: relative; 
        text-align: center;
        .clock-canvas {
          background-color: rgba(255, 255, 255, .7);
          border-radius: 50%;
          height: 0;
          padding-bottom: 100%;
        }
        .text {
          position: absolute;
          left: 50%;
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          top: 50%;
          .val {
            font-size: 36px;
            line-height: 1.4;
            font-weight: 500;
            margin-bottom: 0;
          }

          .type-time {
            font-size: 13px;
            margin-bottom: 0
          }
        }
      }

      @media (min-width: 768px) and (max-width: 991px) {
        margin-bottom: 30px;
      }

      @media (max-width: 767px) {
        margin: 0px 30px 30px 30px;
      }
    }
  }
}




.final-countdown-smart-style {
  .countdown-timer {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .counter {
      background-color: rgba(0,0,0,.2);
      text-align: center;
      position: relative;
      border-radius: 3px;
      padding: 0;
      margin-right: 10px;
      margin-bottom: 20px;
      overflow: hidden;
      .value {
        font-family: $heading-font;
        color: #fff;
        display: block;
        font-size: 3rem;
        padding: 15px 0;
      }
      .label {
        font-size: 1.2rem;
        background: var(--theme-color2);
        color: #111c16;
        display: block;
        padding: 5px 40px;
        text-transform: capitalize;
      }
    }
  }
}