/* = Table of Contents
=================================================================================
  = Global Styles
    • 3 event promote box
    • Grey "News" box
    • left promotion box (with image one) - right corner text
    • left promotion box (with image one) - image Stretch with black layer
    • purple calendar box - right hand side icon
    • bottom banner area
    • Our Sponsors

  = iPad Portrait Styles
    • 3 event promote box
    • Grey "News" box
    • purple calendar box - right hand side icon
    • bottom banner area
    • Our Sponsors

  = iPad Landscape Styles
    • 3 event promote box
    • Grey "News" box
    • Our Sponsors

  = Mobile Styles
    • 3 event promote box
  	• View Event Calendar button
    • purple calendar box - right hand side icon
    • Grey "News" box
    • Our Sponsors
    • Special Promote (Purple box)

================================================================================ */
 

  .mobile-none  { display:block;}
  .mobile-show  { display:none;}

  /* • 3 event promote box
  ------------------------- */
	.section-promo	{ width:100%; overflow:hidden}
	.section-promo .wrapper  { width:103%;}

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

	.section-promo .col-lg, .section-promo .col-xs { height:480px; float:left; margin-bottom:1% }
	.section-promo .col-lg	 { width:49%; background-color:#880656;}
	.section-promo .col-xs	 { width:24.5%; background-color:#e6e6e6;}

	.section-promo .col-lg .padding {padding:5% 0% 0% 5%;}
	.section-promo .col-lg .padding .title { color:#fff; line-height:1; border-bottom:1px solid #952c6e; padding-bottom:2%; min-height:100px; letter-spacing:0.9}

  html body.en .section-promo .col-lg .padding .title { font-size:34px; /*45*/}
  html body.tc .section-promo .col-lg .padding .title { font-size:40px;}
  html body.sc .section-promo .col-lg .padding .title { font-size:40px;}

	.section-promo .col-lg .function-row { padding:4% 0% 3% 5%; display:block; visibility:visible;}
	.section-promo .col-lg .function-row .calendar-col { width:60%; float:left}

	.promo-date-blk { padding:3% 0% 0% 0%; border-bottom:1px solid #fff; z-index:5}
	.promo-date-blk .p-month { line-height:normal; color:#666; display:inline-block; font-weight:bold; font-size:12px}
  .promo-date-blk .p-date, .promo-date-blk .p-news { line-height:1; border-bottom:4px solid #fff; color:#880656; display:inline-block; background-color:#e6e6e6; z-index:10; padding-left:5%; padding-bottom:5% } 
  .promo-date-blk .p-date  { font-size:90px; }
  .promo-date-blk .p-news  { font-size:50px; margin-top:10px; /*40px*/ padding-right:2%}
  .zpnews.p-news   { display:none;}

	.promo-detail { width:100%;}
  .promo-detail .p-detail {  padding:5%; z-index:10; cursor: pointer;
	                           display:block;  opacity:1;
                                     transition: opacity .25s ease-in-out;
                                -moz-transition: opacity .25s ease-in-out;
                             -webkit-transition: opacity .25s ease-in-out;}

	.promo-detail:hover .p-detail {  display:block; opacity: 0;
                    				              transition: opacity .25s ease-in-out;
                                     -moz-transition: opacity .25s ease-in-out;
                                  -webkit-transition: opacity .25s ease-in-out;}


  .promo-detail .cover  { position:absolute; top:0; z-index:5;
            						            display:block; opacity: 0;
            				              transition: opacity .25s ease-in-out;
                             -moz-transition: opacity .25s ease-in-out;
                          -webkit-transition: opacity .25s ease-in-out;}
	.promo-detail:hover .cover { cursor: pointer;
        		                          display:block;  opacity:1;
                                   transition: opacity .25s ease-in-out;
                              -moz-transition: opacity .25s ease-in-out;
                           -webkit-transition: opacity .25s ease-in-out;}

  .cover-mobile     { display:none;}
 
  .promo-detail .p-title { padding-bottom:5%; color:#880656}           
  .promo-detail .p-date-detail {}           
  .promo-detail .p-date-venue {}           

  .promo-remark	{ display:block; position:absolute; bottom:0; z-index:20; background-color: rgba(188, 188, 188, 0.6); width:100%;
                  padding:4% 5% 0% 5%; color:#666; height:34px; cursor:pointer}
  .promo-remark ul {padding:0; margin:0; list-style:none;}          
  .promo-remark ul li {padding:0; margin:0;  display:inline-block;}
  .promo-remark ul li:after {content: "|"; padding:0 8px; color:#880656; font-size:10px;}
  .promo-remark ul li:last-child:after { content: ""}
  .promo-remark ul li i { color:#666; font-size:20px;}
  .promo-remark ul li i:hover { color:#880656;
                           -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;}
  .pinterest-pos  { margin-bottom:-14px}
  .pinterest-icon { width:18px; height:18px;}
  .promo-remark ul li i.calender { color:#666; font-size:18px;
                           -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          { margin-top:-5px; margin-bottom:5px; line-height:normal; color:#333; font-size:12px;}
  
  /* • Grey "News" box
  --------------------- */
  .index-news-pos { position:absolute}
  .news-blk ul          { padding:1% 5% 5% 5%; width:90%; position:absolute; z-index:100; float:right; text-align:right; }
  .news-blk ul li       { padding-right:2%; margin:0; width:30px; height:6px; 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}
  .news-blk ul li:hover { background-color:#880656;  cursor:pointer;}
  .news-blk ul li.active{ background-color:#880656;}

  .news, .newsitm { padding:5% 5% 0 5%; z-index:10; cursor:pointer; }
  .news .news-title,.newsitm .news-title { padding-bottom:5%; color:#880656}
  .news .news-intro,.newsitm .news-intro       { padding-bottom:5%; cursor:pointer;
                    -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 }
  .news .news-intro:hover,.newsitm .news-intro:hover { color:#880656;}


  /* • left promotion box (with image one) - image Stretch with black layer
  -------------------------------------------------------------------------- */
  #box-title  { color:#fff; padding:3% 1%; font-size:30px; color:#fff; line-height:1; padding-bottom:2%; min-height:100px; letter-spacing:0.9}
	.imgStretch { background:#000; min-height:480px; z-index:20}
	.imgStretchPattern { background:rgba(0,0,0,0.6); border:none; padding:2% 5%; min-height:480px; cursor:pointer;}
  .imgStretch:hover .imgStretchPattern { background:rgba(0,0,0,0.0); opacity:0;
                           transition: opacity .25s ease-in-out;
                      -moz-transition: opacity .25s ease-in-out;
                   -webkit-transition: opacity .25s ease-in-out;}
   
 .imgStretch .anystretch { -webkit-transition: 1s ease-in-out;
                              -moz-transition: 1s ease-in-out;
                                -o-transition: 1s ease-in-out;
                                   transition: 1s ease-in-out;}

 .imgStretch:hover .anystretch {  -webkit-transform: scale(1.1);
                                     -moz-transform: scale(1.1);
                                      -ms-transform: scale(1.1);
                                       -o-transform: scale(1.1);
                                          transform: scale(1.1);}


  /* • left promotion box (with image one) - right corner text
  -------------------------------------------------------------- */
  .special-promo { width:100%; color:#fff; position:absolute; bottom:0; right:0; z-index:100; padding:5% 5% 20px 5%; text-align:right}
  .special-promo .short-text  {font-size:14px; border-bottom:4px solid #fff; padding-bottom:5px}
  .special-promo .border    { width:100%; height:1px; background-color:#fff; position:absolute; bottom:20px; right:0;  z-index:111; } 


  /* • purple calendar box - right hand side icon
  ------------------------------------------------ */
	.function-icon-g2   { width:80px; float:right; display:block; margin-top:-115px; text-align:right; background-color:#880656;}
	.function-icon-g2 i { width:50px; height:38px; background-color:#952c6e; margin-bottom:2px; padding-top:12px; color:#fff; text-align: right;
						            font-size:24px; text-align:center; line-height:normal;
                                  -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;}
	.function-icon-g2 i:hover { background-color: #333; cursor:pointer;}
  .function-icon-g2-svg { width:50px; height:50px; background-color:#952c6e; margin-bottom: 2px; 
                                  -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;}
  .function-icon-g2-svg:hover { background-color: #333; cursor:pointer;}
  .svg-pos  { text-align:right; float:right}

  /* • bottom banner area
  ------------------------ */
  .section-banner  { width:100%; overflow:hidden;; padding-top:5%}
  .section-banner .col-lg, .section-banner .col-xs { height:auto; float:left; margin-bottom:1%; background-color:#e6e6e6; }
  .section-banner .col-lg   { width:49%;}
  .section-banner .col-xs   { width:24.5%;}
  .right-space-banner  { margin-right:1%;}


  /* • Our Sponsors
  ------------------ */
  .sponsors-blk { margin-top:2%; border-top:4px solid #e6e6e6; padding:2% 10%; text-align:center}
  .sponsors-blk .sponsors {font-size:30px; color:#880656;}
  .sponsors-blk .sponsors-description { margin-bottom:2%; font-size:110%; }

  .award-logo-blk    { width:100%; margin:0 auto; text-align:right}/* for index.html bottom footer*/
  .sponsors-logo-blk { width:100%; margin:0 auto; text-align:center}

  .sponsors-logo        { width:10%; /*15%*/ display:inline-block; margin:0 0 2% 0;  padding:0 2% 2% 2%; vertical-align:top;}
  .sponsors-logo.large { width: 20%; }
  .sm-text              { line-height:1.2; margin-top:3%; color:#666;}

  html body.en .sm-text { font-size:10px}
  html body.tc .sm-text { font-size:12px}
  html body.sc .sm-text { font-size:12px}


  /* • Bottom Ad
  ------------------ */
  .adbanner-container { position:fixed; bottom:10px; left:10px; z-index:900; display:none;}

  .ad-close { width:15px; height:15px; padding:5px 3px; background:#ccc; position:relative; z-index:99; color:#333; 
              left:300px; top:25px; font-family:Arial; font-weight:bold; line-height:normal; text-align:center;
                    -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}
  .ad-close:hover { background-color:#333; color:#fff;}
  .adbanner-size  { width:300px; height:100px}

  /* • Footer Links
  ------------------ */
  footer a, footer a:link, footer a:visited { color: #666; }
  footer a:hover, footer a:active, footer a:focus { color:#880656; }
	
/* =============================================================================
	= iPad Portrait Styles
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
 
  html body.en .section-promo .col-lg .padding .title { font-size:30px;}

  /* • 3 event promote box
  --------------------------  */
  .section-promo .col-lg   { width:44%; background-color:#880656;}
  .section-promo .col-xs   { width:27%; background-color:#e6e6e6;}
  .section-promo .col-lg .padding .title { font-size:30px; padding:2% 0; min-height:85px;}
  .section-promo .col-lg .function-row { padding:5% 0% 3% 5%;}
  .promo-remark { background-color:#ccc;}
  .cover-mobile     { display:none;}

   /* • Grey "News" box
   --------------------- */
  .news-blk ul li     { height:8px;}
  .promo-date-blk .p-news  { font-size:30px; margin-top:60px;}
  .promo-date-blk .p-month { font-size:10px;}

 
  /* • bottom banner area
  ----------------------- */
  .section-banner .col-lg, .section-banner .col-xs { height:50px; float:left; margin-bottom:1%; background-color:#e6e6e6; overflow:hidden}
  .section-banner .col-lg   { width:44%}
  .section-banner .col-xs   { width:27%}


  /* • Our Sponsors
  ----------------- */
  .sponsors-blk .sm-text { font-size:9px;}

}


/* =============================================================================
	= iPad Landscape Styles
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  
  /* • 3 event promote box
  ------------------------- */
  .promo-date-blk .p-news  { font-size:30px; margin-top:50px; }
  .promo-remark { background-color:#ccc;}
  .cover-mobile     { display:none;}


  /* • Grey "News" box
  --------------------- */
  .news-blk ul li     { height:8px;}
  .promo-date-blk .p-month { font-size:10px;}


  /* • Our Sponsors
  ----------------- */
  .sponsors-blk .sm-text { font-size:8px;}

}