/* = Table of Contents
=================================================================================
  = Global Styles
  	• Font
	• Common
	• Columns of same height styles
	• Back To Top
	• Banner button
	• Banner button (search, calendar, subscribe)
	• Banner button (control subscribe popup box)
 	• Inside Page top banner
 	• Inside Page top img banner
 	• Dropdown selection box
	• "concerts-calendar.html” List view & calendar view btn

  = iPad (Portrait & Landscape Styles)
  = iPad Portrait Styles
  = iPad Landscape Styles
  = Mobile Styles
	• Common
	• Back To Top
	• Inside Page top banner
	• iPhone    	
================================================================================ */



/* =============================================================================
	= Global Styles
   ============================================================================= */

  	/* • Font
	------------- */
  	html body.en  { font-size:12px; font-family: "Lucida Grande","Myriad Set Pro", "Verdana", "Arial","sans-serif"}
	html body.tc  { font-size:14px; font-family: Arial, Helvetica, sans-serif;}
	html body.sc  { font-size:14px; font-family: Arial, Helvetica, sans-serif;}
	html body.en .adjust-sm-font-m { font-size:12px; max-height:999999px}
	html body.tc .adjust-sm-font-m { font-size:14px; max-height:999999px}
	html body.sc .adjust-sm-font-m { font-size:14px; max-height:999999px}


 	/* • Common
	------------- */
  	.hidden-m	      { display:block}
  	.txt-purple       { color:#880656}
 
	a[onclick] { cursor: pointer }
	html, body, 
	p, h1, h2, h3, h4,h5, h6, figure	{ margin:0; padding: 0; font:inherit; vertical-align:baseline; }
	
	body   { margin:0 auto; padding:0; min-width: 980px; max-width: 1440px; max-height: 99999999px;
			 color:#333; -webkit-font-smoothing:antialiased; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; line-height:1.6; }



	html   { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }

	ul 						{ list-style:none }
	table 						{ border-collapse:collapse; border-spacing:0; border:none; }
	table th, table td  		{ border:none;}
		
	a, a:visited, a:active, a:hover  { text-decoration:none; outline:0; }
	a:focus 					     { -moz-outline-style:none; }
	img    { border:0px }
   	div	   { position: relative;}
   	input, textarea, select {padding:1%; margin:0; moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;}
    iframe { border:0; }

    .page-border { margin:0 2.5%}

	.menu-btn     { display:none;}
	#mobileNav    { display:none;}

	.clear          { clear:both; }
	.float-left 	{ float:left; }
	.float-right   	{ float:right; }

	.block			{ display:block; }
	.inline-block	{ display:inline-block; }
	.overflow-hidden{ overflow:hidden }

	.img-scale 		{ height:auto; width:100%; }	
	.error			{ font-size:11px; font-style:italic; line-height:normal; color:#e80033; padding:6px 10px 0px 10px;}

	.btn 		{ font-size:12px; color:#fff; text-shadow:none; border:none; background-color:#000; padding:2% 5%; 
							  -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; }
	.btn:hover { background-color: #880656; color: #fff; cursor:pointer}
	.page-container { width:100%; margin-top:30px; line-height:2}
	
	.content-photo-blk .cp-col, .content-photo-blk-left .cp-col { width:69%; } 						 
	.content-photo-blk .cp-img, .content-photo-blk-left .cp-img { width:28%; } 						 
	.content-photo-blk .cp-col, .content-photo-blk-left .cp-img { float:left; }
	.content-photo-blk .cp-img, .content-photo-blk-left .cp-col { float:right; }
	
	
	/* #mega-menu  { position : absolute; } */
	#mega-menu {display:none;}

	/* • Columns of same height styles 
	----------------------------------- */
	.row-full-height { height:100%; }
	.col-full-height { height:100%; vertical-align:top;}
	.row-same-height { display:table; width:100%;
						table-layout: fixed; /* fix overflow */  }
	.col-xs-height	 { display:table-cell; float:none !important;}


	/* • Back To Top
	----------------- */
	#back-top   { display:none; position:fixed; bottom:0px; right:1.5%; z-index:999}
	#back-top a { width:108px; display:block; text-align:center; text-decoration:none; color: #bbb;
					-webkit-transition: 1s;
					   -moz-transition: 1s;
					        transition: 1s;}
	#back-top a:hover { color: #000;}
	#back-top span { width:100px; height:42px; display:block; margin-bottom:0px;
					 background: #212121;
					 -webkit-transition: 1s;
						-moz-transition: 1s;
						     transition: 1s;}
	#back-top a:hover span { background-color: #777;}
	#back-top i {font-size:30px; line-height:normal; padding-top:6px}


	/* • Banner button
	------------------- */
	.quick-icon-height-index	{ height:500px}
	.quick-icon-height-inside	{ height:200px}
	.quick-icon-index			{ width:50px; position:absolute; z-index:910; right:0; top:0;}
	.quick-icon-index .wrapper	{ text-align:center; vertical-align:middle; display:table-cell; /*height:550px*/}
	.quick-icon-btn   { width:50px; height:50px; background-color:#e6e6e6; margin-bottom:1px; overflow:hidden; 
											 text-shadow: none;
								    background-color: #e6e6e6; 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}
	.quick-icon-btn:hover   { background-color:#000; color:#333;}
	.quick-icon-btn i       { font-size:26px; line-height:normal; padding-top:11px; color:#999;
						  			  -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}
	.quick-icon-btn:hover i { color:#880656}
	.quick-icon-btn .event-date   { position:absolute; font-size:11px!important; font-weight:bold; line-height:normal; top:21px; /*left:18px; */ color:#999;
									width:50px; 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}
	.quick-icon-btn:hover .event-date   { color:#880656}


	/* • Banner button (search, calendar, subscribe) 
	-------------------------------------------------- */
	#calendar, #search, .subscribe {display:block;}

	.site-search input, .subscribe-news input { font-size:14px; color:#fff; padding:2px 12px; height:46px; width:246px; border:none; outline:none;
		                						font-family: "Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif"; letter-spacing: normal;
						  						-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;}
	.site-search input 		{ background-color:#2a2a2a;}
    .subscribe-news input 	{ background-color:#880656; margin-bottom:4%}

	/*
    .view-calendar.pos,
    .view-calendar.pos-btn2, .list-calendar.pos-btn2 { position:absolute; width:246px; height:26px; right:50px; z-index:910; font-size:14px; color:#fff; padding:12px;
    						  background-color:#000;}

							  
	.view-calendar.pos 		{ top:198px; text-align:left} /* for index */
	/* .view-calendar.pos-btn2 { top:176px;} */
	
	
	.view-calendar.pos-btn2.general, .list-calendar.pos-btn2.general { width:270px; height:25px; font-size:14px; color:#fff; padding:12px; 
																	   background-color:#2a2a2a;}
	
	.view-calendar.pos-btn2.general { top:23px; right:-320px; }
	.list-calendar.pos-btn2.general { top:25px; right:-320px; }
	.site-search.pos-btn2.general     { top:15px; right:-320px; width:270px; height:25px; padding:12px; }
	
	.buttonBox.general{
		position:absolute; top:0;  right:50px; width:300px; height:300px; z-index:900; overflow:hidden;}	
    .buttonBox.index{
		position:absolute; top:0; right:50px;  width:300px; height:600px; z-index:900; overflow:hidden;}			
	
	.view-calendar.pos.index{ top:173px; right:-320px; width:270px; height:25px; font-size:14px; color:#fff; padding:12px; 
	background-color:#000; text-align:left;}
	
	.site-search.pos.index	{  top:-7px;  right:-320px; width:270px; height:25px; padding:12px; margin-left:-12px;}
	.subscribe-news.pos.index {  top:217px; right:-320px;  width:270px; width:270px; height:auto; background:rgba(0,0,0,0.8); 
	text-align:left;}

	/*
	.site-search.pos,	    
	.site-search.pos-btn2	{ position:absolute; width:270px; right:50px; z-index:910;}
	
	.site-search.pos 	    { top:249px;}
	.site-search.pos-btn2   { top:227px;}
	*/


	/* • Banner button (control subscribe popup box)
	-------------------------------------------------- */
	.subscribe-news.pos { padding-bottom:10px;  z-index:910; width:270px; height:auto; background:rgba(0,0,0,0.8); text-align:left}
	.subscribe-t-index-banner   { top:295px;}
	.subscribe-t-index-function { top:321px;}

	.news-description { font-size:12px; padding:5px 10px; color:#fff; line-height:1.7; text-align:left}


	/* • Inside Page top banner
	---------------------------- */
	.section-banner { width:100%; margin-top:150px; background-color:#666; height:200px;
					  text-align:center; color:#fff; display:block}
	.section-banner .sb-wrapper {vertical-align:middle;}
	.section-banner .sb-wrapper h1 { font-size:40px; line-height:normal; margin:0 auto; padding-top:60px}
	.section-banner .sb-wrapper h2 { font-size:20px; line-height:normal; margin:0; padding:0}

	.section-banner-m { display:none}


	/* • Inside Page top img banner
	-------------------------------- */
	       .imgStretch { background:#ccc; height:200px; z-index:20; }
    .imgStretchPattern { background:rgba(0,0,0,0.3); border:none; min-height:200px;}


	/* • "concerts-calendar" List view & calendar view btn
	-------------------------------------------------------- */
	.cal-btn-blk 	{ display:block; background-color:#e6e6e6; font-size:20px; margin-top:20px; line-height:normal; clear:both;}
	.cal-btn-blk.pos-list { padding:0px 20px 10px 20px;}
	.cal-btn-blk.pos-cal  { padding:10px 20px;}
	.cal-btn-blk ul { margin:0; padding:0;}
	.cal-btn-blk ul li { margin:0; padding:0; display:inline-block;}
	.cal-btn-blk ul li i { font-size:20px; padding-right:10px; line-height:normal;}
	.cal-btn-blk ul li:last-child:before {content: "|"; margin: 0 20px; color:#880656; line-height:normal;}
	.cal-btn-blk ul li.active {font-weight:bold; color:#333;}
	.cal-btn-blk ul li a { color:#999}

	.legend-blk { position:absolute; top:5px; right:0}
	.legend 	{ padding:5px 10px; font-size:10px; line-height:normal; color:#fff; font-weight:bold}
	.tc .legend,.sc .legend { font-size:12px; }
	.legend-blk-detail { clear:both; display:block; margin-bottom:20px}


	/* • Dropdown selection box
	----------------------------------- */
    .styled-select { width:240px; height:36px; overflow:hidden;  padding:0px 15px; color:#fff; font-size:13px; cursor:pointer;
    	             font-family: "Lucida Grande","Myriad Set Pro", "Verdana", "Arial","sans-serif";
   					 background: url(images/icon-dropdown-arrow.png) no-repeat right;
   					 background-color:rgba(51, 51, 51, .8);
   					 border:none; 
   					 border-bottom:2px solid #880656;
   					 outline:none;
							  -webkit-appearance: none;
						   -webkit-border-radius: 0px;
   							  -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;    }
	 .styled-select select:hover {color:#fff; background-color:#880656;  border-bottom: 2px solid #fff;}


	/* • Inside page => Under title div expand menu (Desktop Only)
						(used in "news.html, press-release.html, publication.html, newsletter.html, concerts.html and merchandise.html...")
	-------------------------------------------------------------------------------------------------------------------------------------- */	
	.title-expand { color:#fff; z-index:100; width:280px; height:40px; background-image:url(images/bg-black-opacity70.png);  margin:0 auto;
                           -webkit-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                   transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                  -webkit-transition-property: background-color, color;
                          transition-property: background-color, color;
                                   box-shadow: none;}
	.title-expand .expand-title { 	height:40px; cursor:pointer; font-size:14px; line-height:2.8; 
									background:url(images/icon-plus-white.svg) no-repeat center right;
									border-bottom:2px solid #880656;
                              -webkit-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                      transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                     -webkit-transition-property: background-color, color;
                             transition-property: background-color, color;
                                      box-shadow: none; }
  	.title-expand .expand-title:hover   { background-color:#333} 

  	.expand-active { background:#333 url(images/icon-minus-white.svg) no-repeat center right!important;}

  	#expand-menu { display:none;}
 	#expand-menu ul { margin:0; padding:0}
 	#expand-menu ul li { margin:0; padding:10px; display:block; list-style:none; border-bottom:1px solid #4f4f4f; cursor:pointer;
 							 background-color: #333;
 						   -webkit-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                   transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                  -webkit-transition-property: background-color, color;
                          transition-property: background-color, color;
                                   box-shadow: none;}
    #expand-menu ul li:hover { background-color:#666;}
 	#expand-menu ul li:last-child { border-bottom:none}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* =============================================================================
	= iPad (Portrait & Landscape Styles)
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
	.legend-blk { position:absolute; top:2px; right:0}
	.legend 	{ padding:2px 5px; font-size:10px; line-height:normal; color:#fff; font-weight:normal}
}


/* =============================================================================
	= iPad Portrait Styles
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
	.view-calendar.pos 	        { top:157px;}
	.site-search.pos 		    { top:209px;}
	.subscribe-t-index-banner   { top:260px;}
	.subscribe-t-index-function { top:306px;}

	.quick-icon-btn .event-date   { font-weight:normal; top:19px; left:18px;}
	#calendar, #search, .subscribe {display:block;}
}


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

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.view-calendar.pos          { top:140px;}
	.site-search.pos 	        { top:191px;}
	.subscribe-t-index-banner   { top:242px;}
	.subscribe-t-index-function { top:306px;}
	.quick-icon-btn .event-date   { font-weight:normal; top:19px; left:18px;}
	#calendar, #search, .subscribe {display:block;}
}

/* =============================================================================
	= Merchanise 
   ============================================================================= */

#carts-summary {display:none;}