@media screen and (min-width:200px) and (max-width:249px){
  .tog-container img {width: 85%;}
  .tog-container .clockTimeView{margin-top: 4vh;}
  /* first block date  */
  .timeText6i:nth-child(1) span{font-size: 8px;padding: 4px 12px;}
  .timeText6i:nth-child(2) span{font-size: 8px;padding: 8px 8px;}
  .timeText6i:nth-child(3) span{padding: 1px 2px;font-size: 7px;}
  /* second block weekday and weekend */
  .weekend{margin-left: 3px !important;}
      .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
  /* third block  time*/
  .timeText2a{font-size:10px;}
  .timeText2a div p span{font-size:15px;}
  .timeText2a div p sup{top:-4px;font-size:8px;}
  .timeText2a div {width: 50px;font-size: 2.2vw;padding: 8px 5.33px;}
  .timeText2a div p:nth-child(2){font-size: 4px;}
  .timeText2a .am_pm{left: 105%;top: 14px; font-size: px;}
  /* fourth block seconds */
  .timeText3 span{font-size: 10px;}
}
@media screen and (min-width:250px) and (max-width:299px){
  .tog-container img {width: 85%;}
  .tog-container .clockTimeView{margin-top: 4vh;}
  /* first block date  */
  .timeText6i:nth-child(1) span{font-size: 8px;padding: 4px 12px;}
  .timeText6i:nth-child(2) span{font-size: 8px;padding: 8px 8px;}
  .timeText6i:nth-child(3) span{padding: 1px 2px;font-size: 7px;}
  /* second block weekday and weekend */
  .weekend{margin-left: 3px !important;}
     .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
  /* third block  time*/
  .timeText2a{font-size:10px;}
  .timeText2a div p span{font-size:15px;}
  .timeText2a div p sup{top:-4px;font-size:8px;}
  .timeText2a div {width: 50px;font-size: 2.2vw;padding: 8px 5.33px;}
  .timeText2a div p:nth-child(2){font-size: 4px;}
  .timeText2a .am_pm{left: 105%;top: 14px; font-size: px;}
  /* fourth block seconds */
  .timeText3 span{font-size: 10px;}
}
@media screen and (min-width:300px) and (max-width:349px){
    .tog-container img {width: 85%;}
    .tog-container .clockTimeView{margin-top: 4vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 6px;padding: 2px 10px;}
    .timeText6i:nth-child(2) span{font-size: 6px;padding: 5px 5px;}
    .timeText6i:nth-child(3) span{padding: 1px 2px;font-size: 5px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 3px !important;}
          .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:10px;}
    .timeText2a div p span{font-size:12px;}
    .timeText2a div p sup{top:-4px;font-size:8px;}
    .timeText2a div {width: 40px;font-size: 2.0vw;padding: 5px 3.33px;}
    .timeText2a div p:nth-child(2){font-size: 4px;}
    .timeText2a .am_pm{left: 105%;top: 14px; font-size: 9px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 10px;}
}
  @media screen and (min-width:350px) and (max-width:399px){
    .tog-container img {width: 85%;}
    .tog-container .clockTimeView{margin-top: 5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 8px;padding: 3px 11px;line-height: 1.4;}
    .timeText6i:nth-child(2) span{font-size: 8px;padding: 5px 7px;line-height: 1.4;}
    .timeText6i:nth-child(3) span{padding: 2px 3px;font-size: 4px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 3px !important;}
    .dayzone-format .workweek span{ font-size:6px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size: 5px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:10px;}
    .timeText2a div p span{font-size:12px;}
    .timeText2a div p sup{top:-4px;font-size:7px;}
    .timeText2a div {width: 60px;font-size: 2.0vw;padding:  8px 5.33px;}
    .timeText2a div p:nth-child(2){font-size: 6px;}
    .timeText2a .am_pm{left: 105%;top: 16px; font-size: 9px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 10px;}
}
  @media screen and (min-width:400px) and (max-width:449px){
    .tog-container img {width: 85%;}
        .tog-container .clockTimeView{margin-top: 5vh;}
        /* first block date  */
        .timeText6i:nth-child(1) span{font-size: 10px;padding: 6px 14px;}
        .timeText6i:nth-child(2) span{font-size: 10px;padding: 10px 10px;}
        .timeText6i:nth-child(3) span{padding: 3px 4px;font-size: 5px;}
        /* second block weekday and weekend */
        .weekend{margin-left: 5px !important;}
        .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
        /* third block  time*/
        .timeText2a{font-size:10px;}
        .timeText2a div p span{font-size:12px;}
        .timeText2a div p sup{top:-4px;font-size:10px;}
        .timeText2a div {width: 45px;font-size: 2.0vw;padding: 8px 5.33px;}
        .timeText2a div p:nth-child(2){font-size: 5px;}
        .timeText2a .am_pm{left: 105%;top: 12px; font-size: 10px;}
        /* fourth block seconds */
        .timeText3 span{font-size: 12px;}
}
  @media screen and (min-width:450px) and (max-width:499px){
    .tog-container img {width: 70%;}
    .tog-container .clockTimeView{margin-top: 4.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 9px;padding: 7px 15px;}
    .timeText6i:nth-child(2) span{font-size: 9px;padding: 10px 10px;}
    .timeText6i:nth-child(3) span{padding: 4px 5px;font-size: 4px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 7px !important;}
   .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:10px;}
    .timeText2a div p span{font-size:12px;}
    .timeText2a div p sup{top:-6px;font-size:12px;}
    .timeText2a div {width: 50px;font-size: 2.7vw;padding: 6px 3.33px;}
    .timeText2a div p:nth-child(2){font-size: 8px;}
    .timeText2a .am_pm{left: 105%;top: 5px; font-size: 10px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 12px;}

}
  @media screen and (min-width:500px) and (max-width:549px){
    .tog-container img {width: 65%;}
    .tog-container .clockTimeView{margin-top: 5.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 6px;padding: 8px 14px;}
    .timeText6i:nth-child(2) span{font-size: 6px;padding: 8px 8px;}
    .timeText6i:nth-child(3) span{padding: 5px 6px;font-size: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 8px !important;}
    .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:10px;}
    .timeText2a div p span{font-size:15px;}
    .timeText2a div p sup{top:-6px;font-size:13px;}
    .timeText2a div {width: 50px;font-size: 2.5vw;padding: 9px 6px;}
    .timeText2a div p:nth-child(2){font-size: 8px;}
    .timeText2a .am_pm{left: 109%;top: 10px; font-size: 10px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 13px;}
}
  @media screen and (min-width:550px) and (max-width:599px){
    .tog-container img {width: 65%;}
    .tog-container .clockTimeView{margin-top: 5.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 10px;padding: 8px 14px;}
    .timeText6i:nth-child(2) span{font-size: 10px;padding: 8px 8px;}
    .timeText6i:nth-child(3) span{padding: 5px 6px;font-size: 7px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 8px !important;}
    .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:12px;}
    .timeText2a div p span{font-size:16px;}
    .timeText2a div p sup{top:-6px;font-size:13px;}
    .timeText2a div {width: 50px;font-size: 2.5vw;padding: 9px 6px;}
    .timeText2a div p:nth-child(2){font-size: 8px;}
    .timeText2a .am_pm{left: 109%;top: 10px; font-size: 12px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 15px;}
  }
  @media screen and (min-width:600px) and (max-width:649px){
    .tog-container img {width: 65%; }
    .tog-container .clockTimeView{margin-top: 5.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 12px;padding: 8px 14px;}
    .timeText6i:nth-child(2) span{font-size: 12px;padding: 8px 8px;}
    .timeText6i:nth-child(3) span{padding: 5px 6px;font-size: 8px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 8px !important;}
    .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:12px;}
    .timeText2a div p span{font-size:16px;}
    .timeText2a div p sup{top:-6px;font-size:13px;}
    .timeText2a div {width: 50px;font-size: 2.5vw;padding: 9px 6px;}
    .timeText2a div p:nth-child(2){font-size: 8px;}
    .timeText2a .am_pm{left: 109%;top: 10px; font-size: 15px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 15px;}
}
  @media screen and (min-width:650px) and (max-width:699px){
     .tog-container img {width: 65%;}
    .tog-container .clockTimeView{margin-top: 5.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 15px;padding: 10px 14px;}
    .timeText6i:nth-child(2) span{font-size: 15px;padding: 12px 12px;}
    .timeText6i:nth-child(3) span{padding: 5px 6px;font-size: 10px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 8px !important;}
    .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:18px;}
    .timeText2a div p sup{top:-6px;font-size:13px;}
    .timeText2a div {width: 50px;font-size: 2.9vw;padding: 9px 6px;}
    .timeText2a div p:nth-child(2){font-size: 8px;}
    .timeText2a .am_pm{left: 109%;top: 10px; font-size: 18px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 18px;}
}
  @media screen and (min-width:700px) and (max-width:749px){
    .tog-container img {width: 90%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 22px;padding: 14px 22px;}
    .timeText6i:nth-child(2) span{font-size: 22px;padding: 18px 18px;}
    .timeText6i:nth-child(3) span{padding: 7px 8px;font-size: 11px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 10px !important;}
        .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:12px;}
    .timeText2a div p span{font-size:25px;}
    .timeText2a div p sup{top:-5px;font-size:14px;}
    .timeText2a div {width:90px;font-size: 3.9vw;padding: 10px 8px;margin-left: 3px}
    .timeText2a div p:nth-child(2){font-size: 10px;}
    .timeText2a .am_pm{left: 109%;top: 18px; font-size: 18px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 18px;}
  
}
  @media screen and (min-width:750px) and (max-width:799px){
    .tog-container img {width: 96%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 28px;padding: 15px 23px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 28px;padding: 19px 19px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 13px;margin-left: 3px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 12px !important;}
        .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:30px;}
    .timeText2a div p sup{top:-5px;font-size:18px;}
    .timeText2a div {width: 100px;font-size: 5vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 28px; font-size: 20px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
}
  @media screen and (min-width:800px) and (max-width:849px){
    .tog-container img {width: 95%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 29px;padding: 16px 24px;}
    .timeText6i:nth-child(2) span{font-size: 29px;padding: 20px 20px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 14px;margin-left: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
        .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:35px;}
    .timeText2a div p sup{top:-8px;font-size:20px;}
    .timeText2a div {width: 100px;font-size: 5.5vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 35px; font-size: 20px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
  }
  @media screen and (min-width:850px) and (max-width:899px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 31px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 31px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 15px;margin-left: 4px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
        .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:25px;}
    .timeText2a div p sup{top:-5px;font-size:18px;}
    .timeText2a div {width: 100px;font-size: 5vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 35px; font-size: 20px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
  }
  @media screen and (min-width:900px) and (max-width:949px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 33px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 33px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 15px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:40px;}
    .timeText2a div p sup{top:-8px;font-size:22px;}
    .timeText2a div {width: 110px;font-size: 5.5vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 40px; font-size: 25px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
  
  }
  @media screen and (min-width:950px) and (max-width:999px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 38px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 38px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 18px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:44px;}
    .timeText2a div p sup{top:-12px;font-size:23px;}
    .timeText2a div {width: 120px;font-size: 5.8vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 40px; font-size: 25px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
}
  @media screen and (min-width:1000px) and (max-width:1049px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 38px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 38px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 18px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:44px;}
    .timeText2a div p sup{top:-12px;font-size:23px;}
    .timeText2a div {width: 120px;font-size: 5.8vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 13px;}
    .timeText2a .am_pm{left: 109%;top: 40px; font-size: 25px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 25px;}
}
  @media screen and (min-width:1050px) and (max-width:1099px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 45px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 45px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 22px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:50px;}
    .timeText2a div p sup{top:-13px;font-size:25px;}
    .timeText2a div {width: 130px;font-size: 6vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 15px;}
    .timeText2a .am_pm{left: 109%;top: 42px; font-size: 30px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 30px;}
}
  @media screen and (min-width:1100px) and (max-width:1149px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 45px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 45px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 22px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:50px;}
    .timeText2a div p sup{top:-13px;font-size:25px;}
    .timeText2a div {width: 130px;font-size: 6vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 15px;}
    .timeText2a .am_pm{left: 109%;top: 42px; font-size: 30px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 30px;}
}
  @media screen and (min-width:1150px) and (max-width:1199px){
    .tog-container img {width: 100%;}
    .tog-container .clockTimeView{margin-top: 2.5vh;}
    /* first block date  */
    .timeText6i:nth-child(1) span{font-size: 45px;padding: 16px 24px;margin-bottom: 3px;}
    .timeText6i:nth-child(2) span{font-size: 45px;padding: 20px 20px;margin-bottom: 3px;}
    .timeText6i:nth-child(3) span{padding: 8px 9px;font-size: 22px;margin-left: 5px;margin-bottom: 3px;}
    /* second block weekday and weekend */
    .weekend{margin-left: 18px !important;}
    /* third block  time*/
    .timeText2a{font-size:15px;}
    .timeText2a div p span{font-size:50px;}
    .timeText2a div p sup{top:-13px;font-size:25px;}
    .timeText2a div {width: 130px;font-size: 6vw;padding: 12px 10px;}
    .timeText2a div p:nth-child(2){font-size: 15px;}
    .timeText2a .am_pm{left: 109%;top: 42px; font-size: 30px;}
    /* fourth block seconds */
    .timeText3 span{font-size: 30px;}
}
  @media screen and (min-width:1200px){
    .tog-container img {width: 100%;}

}