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

.yycountdown-box{
  text-align:center;
  margin:10px 0 0;
  color:#fff !important;
}

#timer{
  color:#fff !important;
  font-family: 'Poppins', sans-serif;
  font-weight:bold;
}

#timer .yycountdown-box .yyc-day{
  font-size:100px;
  color:#fff;
}
#timer .yycountdown-box .yyc-hou{
  font-size:100px;
  color:#fff;
}
#timer .yycountdown-box .yyc-min{
  font-size:100px;
  color:#fff;
}
#timer .yycountdown-box .yyc-sec{
  font-size:100px;
  color:#fff;
}

#date{
  color:#fff;
  font-family: 'Poppins', sans-serif;
  text-align:center;
  font-size:14px;
  padding:0 0 70px;
  margin:-30px 0 0;
  letter-spacing:0.2em;
}

#timer .yycountdown-box .yyc-day-text,
#timer .yycountdown-box .yyc-hou-text,
#timer .yycountdown-box .yyc-min-text,
#timer .yycountdown-box .yyc-sec-text{
  font-size:30px;
}
}





@media all and (min-width: 0px) and (max-width: 768px) {

.yycountdown-box{
  text-align:center;
  margin:10px 0 0;
  color:#fff !important;
}

#timer{
  color:#fff !important;
  font-family: 'Poppins', sans-serif;
  font-weight:bold;
}

#timer .yycountdown-box .yyc-day{
  font-size:40px;
  color:#fff;
}
#timer .yycountdown-box .yyc-hou{
  font-size:40px;
  color:#fff;
}
#timer .yycountdown-box .yyc-min{
  font-size:40px;
  color:#fff;
}
#timer .yycountdown-box .yyc-sec{
  font-size:40px;
  color:#fff;
}

#date{
  color:#fff;
  font-family: 'Poppins', sans-serif;
  text-align:center;
  font-size:12px;
  padding:0 0 50px;
  margin:0 0 0;
}

#timer .yycountdown-box .yyc-day-text,
#timer .yycountdown-box .yyc-hou-text,
#timer .yycountdown-box .yyc-min-text,
#timer .yycountdown-box .yyc-sec-text{
  font-size:12px;
}
}