/*@media screen and (max-width: 768px) {
  .sticky-footer {
    visibility: hidden !important;
  }
}*/

  @media screen and (max-width: 1370px) and (min-width: 769px)  {
    .sticky-footer .col-md-4 {
      float: left;
      width: 33.3%;
    }
    .sticky-footer .promotional-logo-container{
      width: 30.3%;
    }

    .sticky-footer .countdown-container {
      width: 36.3%;
    }
    .sticky-footer .offer-ends {
      font-size: 16px
    }

    /*
  This class is for overriding purposes. Some product pages are styling the span element in a general way, so this was a workaround
  .sticky-footer .countdown styling for the font-size wasn't being picked up on pages like mac-pak
  */
    #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2 {
      font-size: 52px;
    }

    .sticky-footer .countdown, .time-separator {
      font-size: 52px;
    }

    .sticky-footer .promotional-header {
      font-size: 28px;
    }

    .sticky-footer .promotional-header-bottom {
      font-size: 20px;
    }

    .sticky-footer .promotional-text {
      font-size: 20px;
    }

  }

  @media screen and (max-width: 1600px) and (min-width: 1370px) {

    .sticky-footer .sticky-footer-logo {
      margin-right: 120px;
    }

    .sticky-footer .sticky-learn-more {
      margin-right: 120px;
    }

    .sticky-footer .countdown, .sticky-footer .offer-ends {
      margin-left: 120px;
    }

    .sticky-footer .countdown {
      margin-top:0;
    }

    .sticky-footer .offer-ends {
      font-size: 16px
    }

      /*
      This class is for overriding purposes. Some product pages are styling the span element in a general way, so this was a workaround
      .sticky-footer .countdown styling for the font-size wasn't being picked up on pages like mac-pak
      */
      #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2 {
        font-size: 52px;
      }

      .sticky-footer .countdown, .time-separator {
        font-size: 52px;
      }

      .sticky-footer .promotional-header {
        font-size: 32px;
      }

      .sticky-footer .promotional-header-bottom {
        font-size: 22px;
      }

      .sticky-footer .promotional-text {
        font-size: 20px;
      }

}

    @media screen and (min-width: 1600px) {

        .sticky-footer .sticky-footer-logo {
          margin-right: 155px;
        }

        .sticky-footer .sticky-learn-more{
          margin-right: 155px;
        }

        .sticky-footer .countdown, .sticky-footer .offer-ends {
          margin-left: 130px;
        }

        .sticky-footer .countdown {
          margin-top:0;
        }

        .sticky-footer .offer-ends {
          font-size: 18px
        }

        .sticky-footer .time-separator {
          margin-left: 5px;
          margin-right: 5px;
        }

        /*
        This class is for overriding purposes. Some product pages are styling the span element in a general way, so this was a workaround
        .sticky-footer .countdown styling for the font-size wasn't being picked up on pages like mac-pak
        */
        #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2 {
          font-size: 64px;
        }

          .sticky-footer .countdown, .time-separator {
          font-size: 64px;
        }

          .sticky-footer .promotional-header {
          font-size: 35px;
        }

        .sticky-footer .promotional-header-bottom {
          font-size: 26px;
        }

          .sticky-footer .promotional-text {
          font-size: 25px;
        }

    }

  .sticky-footer .offer-ends {
    color: #fff;
    font-weight: normal;
  }

  /*
  This class is for overriding purposes. Some product pages are styling the span element in a general way, so this was a workaround
  */
  #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2 {
    font-weight: bold;
  }

  .sticky-footer .countdown, .time-separator {
    display: inline;
    color: #fff;
    font-weight: bold;
    display: -webkit-inline-box;
  }

  .sticky-footer .close-sticky-route {
    float: right;
    background-color: Transparent;
    border: none;
  }

  .sticky-footer {
    height: 150px;
    position: fixed;
    width: 100%;
    bottom: 0;  
    min-height: 100px !important; 
    background-image: url('https://res.acdsystems.com/assets/img/global/CountdownFooter-Orange-Background-Graphic.jpg');
    border-radius: 15px 15px 0 0;
    visibility: hidden;
    padding: 15px;
    z-index: 3;
  }

  .sticky-footer .promotional-container{
    margin-top: 20px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    height: 100px;
    line-height: 1;
    padding-top: 9px;
  }
  .sticky-footer .promotional-logo-container{
    width: 30.3%;
  }

  .sticky-footer .countdown-container {
    margin-top: 20px;
    width: 36.3%;
  }

  .sticky-footer .promotional-header {
    color: #fff;
    font-weight: 600;
  }

  .sticky-footer .promotional-header-bottom {
    margin-top: 16px;
    display: block;
    color: #fff;
    font-weight: 400;
  }


  .sticky-footer .promotional-text {
    color: #fff;
    font-weight: normal;
  }

  .sticky-footer .countdown {
    max-height: 79px;
    line-height: 1;
  }

  .sticky-footer .sticky-learn-more {
    text-align: center;
    color: #fff;
    width: 189px;
    height: 35px;
    font-size: 16px;
    margin-top: 10px;
    border: 0;
    border-radius: 5px;
  }

  .sticky-footer .sticky-footer-logo{
    top: -5px;
    position: relative;
  }

  @media only screen and (max-width: 1135px) {
    .sticky-footer .promotional-header{
      font-size: 25px;
    }
  }
@media only screen and (max-width: 993px) {
  #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2{
    font-size: 48px;
  }
  .sticky-footer .promotional-header{
    font-size: 23px;
  }
}
  @media only screen and (max-width: 768px) {
    .sticky-footer{
      height: 106px;
    }
    .sticky-footer .countdown-container,
    .sticky-footer .promotional-container{
      width: 100%;
    }
    .sticky-footer .countdown-container{
      margin-top: 0;
    }
    .sticky-footer .promotional-container{
      margin-top: 10px;
    }
    .sticky-footer .promotional-container,
    .sticky-footer .promotional-logo-container{
      display: none;
    }
    #countdown #hours, #countdown #minutes, #countdown #seconds, #countdown #time-separator, #countdown #time-separator2 {
      font-size: 52px;
    }

    .sticky-footer .countdown, .time-separator {
      font-size: 52px;
    }

    .sticky-footer .promotional-header {
      font-size: 28px;
    }

    .sticky-footer .promotional-header-bottom {
      font-size: 20px;
    }

    .sticky-footer .promotional-text {
      font-size: 20px;
    }

  }

/*** The promotional text in the middle gets cut off when there is a lot of characters. The queries below fix this by adjusting font-size based on display width. ***/
/*@media screen and (min-width: 769px) and (max-width: 872px) {*/
  /*.sticky-footer .promotional-header {*/
    /*font-size: 18px;*/
  /*}*/
/*}*/
/*@media screen and (min-width: 873px) and (max-width: 912px) {*/
  /*.sticky-footer .promotional-header {*/
    /*font-size: 19px;*/
  /*}*/
/*}*/
/*@media screen and (min-width: 913px) and (max-width: 1160px) {*/
  /*.sticky-footer .promotional-header {*/
    /*font-size: 21px;*/
  /*}*/
/*}*/