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

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

/* • common */
	.grey-sm-txt {font-size: 20px}

	.general-content { margin-top:-50px;}
	.general-content .gc-wrapper { padding:0 0% 2% 0;}
	.general-content .col-left .caption { line-height:1.6;  padding:3% 5% }
	.general-content .col-left  { width:100%; margin:0 0 50px 0; /*background-color:yellow;*/}
	.general-content .col-right { width:98%; padding:0px 1%}
	.general-content .col-left .img-blk { margin-right:0; margin-bottom:20px; background-color:#880656; color:#fff; width:100%;}
	.general-content .col-left .img-blk ul          { padding:5%; width:90%; position:absolute; z-index:100; float:right; text-align:right;}
	.general-content .col-left .img-blk ul li       { padding-right:2%; margin-left:20px; width:80px; height:8px}
	/*.general-content ul 	 { text-indent:-0.7em;}
	.general-content ul li   { margin:0px 0px 0px 25px; padding:0; }*/
	.general-content h1 { font-size:60px; color:#880656; padding-bottom:5px; line-height:normal; padding-bottom:15px}
	.general-content h2 { font-size:40px; color:#880656; line-height:normal; padding-bottom:10px; max-height:999999px}

	/* • table for Gerneral cotent */
	.general-content table.general { line-height:1.4 }
	.general-content table.general th { font-weight:normal}

	/* • ul li style for Gerneral cotent */
	html body.en .general-content ul {font-size:28px; max-height:999999px}
	html body.tc .general-content ul {font-size:30px; max-height:999999px}
	html body.sc .general-content ul {font-size:30px; max-height:999999px}

	html body.en .general-content ul li {font-size:28px; max-height:999999px}
	html body.tc .general-content ul li {font-size:30px; max-height:999999px}
	html body.sc .general-content ul li {font-size:30px; max-height:999999px}

	html body.en .general-content ul li:before  {font-size:28px; max-height:999999px}
	html body.tc .general-content ul li:before  {font-size:30px; max-height:999999px}
	html body.sc .general-content ul li:before  {font-size:30px; max-height:999999px}


/* • For "concerts-detail.html" event information */
	.sponsor { padding-top:10px}
	html body.en .sponsor { font-size:20px;}
	html body.tc .sponsor { font-size:20px;}
	html body.sc .sponsor { font-size:20px;}

	/* • "concerts-detail.html" content */
	/*.cd-btn-m-blk { margin-top:30px; background-color:#880656; padding:20px; color:#fff;}
	.i-col>i { font-size:30px; padding-right:10px; float:left; width:20%;}
	.btn-filed-col {float:left;  width:60%;}*/
	.concerts-detail-blk .cd-field:after  { content:":";}
	.concerts-detail-blk .cd-detail i { font-size:40px; padding-right:10px;}
	.concerts-detail-blk .cd-detail { width:100%;}

	.cd-event-col-l .event-wrapper { width:100%; margin-bottom:40px}

	/* • "left column" */	
	.promo-date-blk { width:30%; float:left; padding:2% 0% 0% 0%; border-bottom:none; z-index:5;}
	.promo-date-blk .p-date  { font-size:100px; padding-bottom:2%; border-bottom:4px solid #880656; margin-right:10px; padding:0 10%}
	.promo-date-blk .p-month { font-size:25px; padding:5% 10% }

	.poster 	{ width:70%; display:table}
	.poster img { width:100%; float:right; display:table-cell;}

	/* • "meet-performers" mobile only */	
	.meet-performers-blk-m { width:100%; overflow:hidden; background-color:#e8e8e8; display:block;}
	.meet-performers-blk-m .mp-title-block { background-color:#880656; padding:2%; color:#fff; font-size:40px; line-height:normal; margin-bottom:20px}
	.meet-performers-blk-m .mp-col { width:25%; float:left; line-height:normal; border-right:3px solid #e8e8e8;} 
	.meet-performers-blk-m .performers-name {padding:5%; margin-bottom:50px} 
	.meet-performers-blk-m a {color:#333;}
	.meet-performers-blk-m a:hover {color:#880656;}
    .meet-performers-blk .performer-blk .performer-row .mp-detial-col { font-size:30px; }


	/* • "left column "Save in My Calendar" & "Ticket available" btn style */	
	a .cd-btn-m   { font-size:28px; color:#fff; line-height:1.4; text-decoration:none; padding:26px 30px; border-bottom:1px solid #fff;
	                  background-color:#880656; 
	                        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;}
	a .cd-btn-m:hover  { background-color:#666; text-decoration:none; color:#fff}
	a .cd-btn-m i      { font-size:40px; line-height:1.4; }
	a .cd-btn-m .i-col 		   { width:22%; display:inline-block; vertical-align:top}
	a .cd-btn-m .btn-filed-col { width:73%; display:inline-block; vertical-align:top}


	.cd-title-blk-m {  width:90%!important; padding:3% 5%!important; font-size:30px!important;}
	.toggle .pane-page { padding:3% 5%!important; width:90%!important;}


	/* • For "news-detail.html" */
	.pager { margin-bottom:50px; }
	.pager .pager-blk { font-size:25px; font-weight:normal; padding:10px 20px; }


/* • For "vacancies.html" */
	.sub-nav-blk 	{ display:none}
	.sub-nav-blk-m  { display:block; border-top:1px solid #880656; padding-top:20px;}
	.sub-nav-blk-m select { } 
	

    .widget.xhec { font-size:30px; }
}