/* =============================================================================
	= Mobile Styles
   ============================================================================= */

@media only screen and (max-device-width: 699px) {

  /* • 3 event promote box
  ------------------------- */
  .mobile-none  { display:none}
  .mobile-show  { display:block;}

  .right-space  { margin-right:0%;}

  .section-promo .col-lg   { width:100%; height:auto; background-color:#fff}
  .section-promo .col-lg .padding {padding:2% 0% 0% 0%;}
  .section-promo .col-lg .padding .title { font-size:45px; color:#880656; line-height:normal; border-bottom:1px solid #880656; padding:0 0 0 2%; min-height:auto; letter-spacing:0.9}
  .section-promo .col-lg .function-row  { display:none; visibility:hidden;}

  .section-promo .col-xs   { width:100%; height:auto; background-color:#e6e6e6; padding-bottom:5%}
  .section-promo .col-xs.news-blk { padding-bottom:0; }
  .cover-mobile     {display:inline-block; width:30%; padding-left:2%; float:right; top:0; position:absolute;}
  .promo-detail .cover     { display:none;}
  .promo-detail:hover .cover { display:none;}
  .promo-detail:hover .p-detail {  display:block; opacity: 1; color:#880656;
                                          transition: opacity .25s ease-in-out;
                                     -moz-transition: opacity .25s ease-in-out;
                                  -webkit-transition: opacity .25s ease-in-out;}
  .promo-detail:hover { color:#333;}

  .promo-date-blk { width:68%; float:left; padding:2% 0% 0% 0%; border-bottom:none; z-index:5;}
  .promo-detail .p-detail { width:63%; float:left; padding:2% 1% 0% 4%; z-index:10; cursor: pointer; display:block; opacity:1; font-size:24px; max-height:99999px; margin-bottom:6%}
  .promo-date-blk .p-date, .promo-date-blk .p-news { line-height:1; border-bottom:none; color:#880656; display:inline-block; background-color:#e6e6e6; z-index:10; padding-left:5%; padding-bottom:0% } 
  .promo-date-blk .p-date  { font-size:60px; padding-right:2% }
  .promo-date-blk .p-month { font-size:25px }
  .promo-date-blk .p-news  { font-size:40px; margin-top:20px; padding-right:10px; font-weight:bold}
  .promo-detail .p-title   { padding-bottom:2%; color:#880656; font-weight:bold; font-size:25px}      
  .promo-remark  { display:block; position:absolute; bottom:-10; z-index:20; background-color:#d5d5d5;
                   width:100%;  padding:2% 5% 2% 5%; color:#666;  cursor:pointer;}
  .news-blk .promo-remark { position:relative; margin-top:20px; }
  .promo-remark ul li i { color:#666; font-size:40px;}
 
  .promo-remark ul li:after {content: "|"; padding:0 25px; color:#880656; font-size:30px;}
  .pinterest-pos  { margin-bottom:-35px}
  .pinterest-icon { width:35px; height:35px;}
  .promo-remark ul li i.calender { color:#666; font-size:38px;
                           -webkit-transition: 0.5s ease-in-out;
                              -moz-transition: 0.5s ease-in-out;
                                -o-transition: 0.5s ease-in-out;
                                   transition: 0.5s ease-in-out;}
  .promo-remark ul li i.calender:hover { color:#880656;}

  .pp-month       { width:90%; padding:0% 4% 0 4%; font-size:24px; max-height:99999px;  }
  
  /* • View Event Calendar button
  ------------------------------- */
  .view-calendar-m { padding:2%; text-align:center; bottom:0; position:absolute; right:0; z-index:50;}
  .view-calendar-m i {font-size:35px; padding-bottom:2%}
  .view-calendar-m .view-m { font-size:14px}


  /* • purple calendar box - right hand side icon
  ----------------------------------------------- */
  .function-icon-g2 {display:none}


  /* • Grey "News" box
  --------------------*/
  .index-news-pos { position:relative;}
  .news, .newsitm { width:100%; padding:0; z-index:10; overflow:auto;}
  .news .news-title,.newsitm .news-title { width:90%; padding:1% 4%; color:#880656; float:left; font-size:24px; max-height:99999px; font-weight:bold; font-size:25px}
  .news .news-intro,.newsitm .news-intro       { width:90%; padding:0% 4% 0 4%; float:left; cursor:pointer; font-size:24px; max-height:99999px; margin-bottom:6%}
  .news .news-intro:hover,.newsitm .news-intro:hover { color:#880656;}
  .news-blk ul          { padding:5%; margin:0 0 0 0; width:90%; position:absolute; z-index:100; bottom:0; float:right; text-align:right; }
  .news-blk ul li       { margin:0 2% 0 0; padding:0;  width:80px; height:8px; z-index:100; display:inline-block; background-color:#ccc;
                                  -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                          transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                         -webkit-transition-property: background-color, color;
                                 transition-property: background-color, color;
                                          box-shadow: none !important;}
  

  /* • Our Sponsors
  ----------------- */
  .sponsors-blk { margin-top:5%; border-top:4px solid #e6e6e6; padding:2% 4%; text-align:left}

  .sponsors-blk .sponsors-description {font-size:20px; margin-bottom:5%; max-height:99999px;}
  .sponsors-blk .sponsors-logo-blk    { width:100%; text-align:left;}
  .sponsors-blk .sponsors-logo        { display:inline-block; margin:0 0 0% 0;  padding:0 2% 2% 2%; vertical-align:top;}

  .sponsors-blk .sm-text { font-size:14px; margin-top:8%; line-height:normal; max-height: 999999px; text-align:center;}


  /* • Special Promote (Purple box)
  --------------------------------- */
  .special-promo-mobile-blk { width:100%; background-color:#880656; overflow:auto;}
  .special-promo-mobile { width:100%; float:left;}
  .special-promo-mobile .box-title-m  { font-size:35px; line-height:normal; color:#fff; margin-bottom:2%}
  .special-promo-mobile .short-text-m  { font-size:20px; line-height:normal; color:#fff; border-bottom:1px solid #fff; padding-bottom:3%}
  .special-promo-mobile-blk .special-promo-mobile .friends-HKCO-m { padding:3% 3% 0 3%;}
  .special-promo-mobile-blk .special-promo-mobile .media-blk    { padding:0 5% 3% 5%; margin-top:-10px}
  .special-promo-mobile-blk .special-promo-mobile .media-blk i  { display:inline-block; font-size:60px; padding:0 15% 0 0; line-height:normal; color:#fff;}
  .special-promo-mobile-blk .special-promo-mobile .media-blk i:hover  { color:#000;}

  .subscribe-detail-m { width:100%; background-color:#000; padding-bottom:2%; overflow:hidden}
  .subscribe-detail-m .signup-blk { padding:2% 0}
  .subscribe-detail-m .signup-blk .short-signup-txt { font-size:20px; color:#fff; padding:0 4%}
  .subscribe-detail-m input { font-size:25px; color:#fff; background-color:#880656; padding:10px 45px; height:50px; border:none; outline:none;
                            letter-spacing: normal; font-weight:bold;
                            -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; margin-top:2%; width:100%;}
  .subscribe-detail-m .signup-btn-blk   { font-size:24px; width:40%; display:inline-block}
  .subscribe-detail-m .signup-error-blk { width:40%; font-size:20px; display:inline-block; padding-left:2%}

  .special-promo-btn-blk { width:80px; display:inline-block;}
  .tudo-m  { width:80px; display:inline-block; top:25px; margin-right:15px; margin-left:-10px}  
  .kkbox-m { width:90px; display:inline-block; top:25px; margin-right:15px; margin-left:-10px}  


}