/* =================================================================================
	Below css for "index.html" animation banner
================================================================================ */


/* =============================================================================
	= Main Banner Desktop
   ============================================================================= */
	
	.banner-container {margin-top: 150px; width:100%; height:550px; height:100%; margin-bottom:2%;}

	.banner {width:100%; padding-top:70px; overflow:hidden} /* Used in index page only */

	.ei-slider			{ position:relative; width:100%;  height:550px; margin:0 auto; }
	.ei-slider-loading	{ display: none; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:900;
						  background: rgba(0,0,0,0.9); color: #fff; text-align:center; line-height:400px; }
	.ei-slider-large	{ /*width: 100%;*/ height:100%; position:relative; overflow:hidden; margin:0; padding:0} 
	.ei-slider-large li { /*width: 100%;*/ height:100%;position:absolute; top:0px; left: 0px; overflow:hidden;}
	.ei-slider-large li img {/*width: 100%;*/  height:auto; /*100%*/}

	.ei-title { position:absolute; left:0%; top:18%; padding:0 0 0 2%;}

	.ei-title h2, .ei-title h3 { text-align:left;}
	.ei-title h2 { font-size:30px; line-height:1.2; letter-spacing:-1px; padding-bottom:0px; color:#fff;}
	.ei-title h3 { margin-top:5px;}
	.ei-title h3.date        { font-size:16px; line-height:1; margin-top:10px;}
	.ei-title h3.venue 		 { font-size:12px; line-height:1.6; margin-top:10px;}


	html body.en .ei-title h3.venue { font-size:12px}
	html body.tc .ei-title h3.venue { font-size:14px}
	html body.sc .ei-title h3.venue { font-size:14px}


	.ei-slider-thumbs    { height:10px; margin:0 auto; position:relative; top:0px; z-index:10; width:100%; overflow: hidden;}
	.ei-slider-thumbs li { position:relative; float:left; height:100%;}
	.ei-slider-thumbs li.ei-slider-element { top:0px; left:40px; position:absolute; height:100%; z-index:10; text-indent:-9000px;
											 background:#000; background-color: #880656;}
	.ei-slider-thumbs li a { display:block; text-indent:-9000px; background:#d9d9d9 ; width:100%; height:100%; cursor:pointer;
								  border-left: 1px solid #333;
					  			  -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;}
	.ei-slider-thumbs li a:hover { background-color: #333;}

	
	.grey-blk	{ padding:2%;  background: rgba(204,204,204,0.8);}
	.black-blk	{ padding:2%;  background: rgba(0,0,0,0.8);}
	.black-blk .venue	{color:#fff;}
	.grey-blk  .venue	{color:#333;}
	.black-blk h3 { color:#fff;}
	.black-blk h3 { color:#fff;}
	.black-blk h2 { color:#fff;}
	.grey-blk  h2 { color:#880656;}


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

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.banner-container { width:auto; height: 380px;}
	.banner-container .quick-icon-height-index	{ height:380px; }
	.quick-icon-btn .event-date   { left:0;}
	.ei-slider	 	  { width:auto; height: 380px;}

	.ei-title h2 { font-size:25px; line-height:normal;}
	.ei-title h3 { margin-top:2px;}
	.ei-title h3.date        { font-size:12px; line-height:1; margin-top:10px;}
	.ei-slider-thumbs        { height:10px; top:-10px;}
}




/* =============================================================================
	= iPad Landscape Styles
   ============================================================================= */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.banner-container { width:auto; height: 360px;}
	.banner-container .quick-icon-height-index	{ height:360px; }
	.quick-icon-btn .event-date   { left:0;}
	.ei-slider	 	  { width:auto; height: 360px;}
	.ei-title h2 { font-size:25px; line-height:1.2; letter-spacing:-1px; padding-bottom:0px; color:#880656;}
	.ei-title h3 { margin-top:2px;}
	.ei-title h3.date        { font-size:12px; line-height:1; margin-top:10px;}
	.ei-slider-thumbs        { height:10px; top:-10px;}
}