@charset "utf-8";
@font-face {
	font-family: 'RSU';
	src: url('font/rsu_regular.eot');
	src: url('font/rsu_regular.eot?#iefix') format('embedded-opentype'),
		 url('font/rsu_regular.woff') format('woff'),
		 url('font/rsu_regular.ttf') format('truetype'),
		 url('font/rsu_regular.svg#rsu_regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body{ margin:0px; background:url('../images/frankie-bg.jpg') no-repeat top center;background-size:100% 100%;}
a:link, a img{border:none;text-decoration:none;}
.wrapper{width:980px; overflow:hidden}
.content{overflow:hidden; background:#f1e8df;margin: -5px 0px;}
.page{
	
	overflow:hidden;
	display:block;
}
.flag img{float:right;margin: 0px 4px;}
p {padding: 0px 60px;
word-break: break-word;}
.opacity{
	background: rgba(000,000,000,0.6);
	width: 1000px;
	margin: 0 auto;
}
.wrap{
	width:939px;
	margin:0px auto;
}
h1{
	font-size:25px;
	text-align:center;
	color:#5A5959;
}
h2{
	font-size:20px;
}
h3{
	font-size:25px;
	text-align:center;
	padding:0 120px;
}
.blank{
	height:550px;
	display:block;
}
.title_of_project{
}
a:hover{
	opacity:0.9}
a, a img{
	border:none;
	text-decoration:none;
	color:inherit}
input[type="button"]{
	cursor:pointer;}
ul{
	padding:0px;
	margin:0px}
li{
	list-style:none}
.flag { width:100%; overflow:hidden}
.flag li{float:right; margin:5px 0px 5px 10px;}
.promotion{ 
	background:url(../images/bg-promotion-tab.png) no-repeat;
	padding:10px 0px 10px 87px;
}
.left-content, .info-left{ float:left;}
.left-content {background: url('../images/ticket-information-bg.png') no-repeat;width: 629px;background-size: 100%;margin-left: 10px;}
.right-content, .info-right{ float:right;}
.info-left{ width:270px;padding:0px 13px; }
.right-content{max-width:300px;margin: 0px 10px;}
.news-update{
	background:url(../images/bg_news&update.png);
	background-size:100% auto;
	height:147px;
	display:block;
	overflow:hidden}
.tv{background: url(../images/frankie-gallery.png) no-repeat;
width: 800px;
height: 585px;
background-size: 100%;
background-position: 10px -246px;}
.slide{width: 467px;
height: 370px;
background-color: black;
margin-left: 102px;
position: relative;
top: -465px;
border-radius: 8px;
}
.buy  img{position: relative;
z-index: 0;
top: -138px;
width: 197px;
height: 103px;}
.thumbnail1{
	position: relative;
	z-index: 0;
	/*top:650px;*/
}
.thumbnail1:hover{
	background-color: transparent;
	z-index: 50;
}
.thumbnail1 span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	left: -318px;
	top:-222px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}
.thumbnail1 span img{ /*CSS for enlarged image*/
	border-width: 0px;
	padding: 2px;
}
.thumbnail1:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top:-222px;
	left: -318px; /*position where enlarged image should offset horizontally */
}
.news-update ul{
margin: -5px auto auto;
overflow: hidden;
height: 109px;

	}
.news-update li{ 
	float: left;
width: 200px;
height: 138px;
margin: 2px 7px;
overflow: hidden;
	}
.news-update li img{
	width:100%;
	height:100%;}

.ads-banner{ width:300px; margin:10px auto}
.social-content-fb,.social-content-tw{
	background:url(../images/bg-tw.png) no-repeat;
	background-size:100% 100%;
	overflow:hidden;
	margin:5px auto;
	}
.social-content-fb{	
	padding:15px 15px 0px;
	background:rgba(255,255,255,0.98);
	width:245px;
	border-radius:5px
	}
.social-content-tw{
	width:315px;
	height:420px;
	}
.social-content-tw iframe{
	width:88%;
	padding:10px 13px;
}
.customisable-border{
	border:1px solid #EE4599;
	}
.timeline-header .customisable-border{
	background:#EE4599}
.customisable-highlight{
	color:#fff}
.register-group, .countdown{
	float:left;}
.promotion{
	overflow:hidden}	
/********************************for countdown***************************************/
.countdown{
	margin-left:30px;}	
.g-number{	
	float:left;
	margin:3px 5px;
	width:65px;
	text-align:center}	
.numbers {
	background:url(../images/bg-number.png) repeat-x;
	border-radius:5px;
    width: 45px;
	height:59px;
	line-height:59px;
	margin:0px auto;
    font-family: Arial; 
    font-size: 28px;
    font-weight: bold;    
    font-style: normal;
    color: #FFFFFF;
}
.title {
    border: none;    
    padding: 0px;
    font-family: Arial; 
    font-size: 16px; 
    font-weight: normal;  
    color: #cd0263;      
    background: transparent;
	}
/********************************for countdown***************************************/
.campaign{
	width:895px;
	height:332px;
	background:url(../images/bg-campaign.png) no-repeat;
	display:block;
	float:left;
	padding:22px 25px;
	}
.campaign .left{
	float:left;
	width:267px;
	}
.des-campaign{
	font-family: 'RSU';
	font-size:16px;
	color:#eb4498;
	margin-bottom:20px;
	}
.register-campaign{
	background: url(../images/btn-register-campaign.png) no-repeat;
	border:none;
	width:253px;
	height:47px;}
.gallery{
	overflow:hidden;
	text-indent:0px;}
.gallery li{
	float:left;
	background:url(../images/campaign-bg-pic.jpg);
	width:130px;
	height:90px;
	border:3px solid #fff;
	margin:7px;}
.gallery li img{
	width:100%;
	height:100%;}

/*********** Video ************************/
		html, body { width: 100%; margin: 0; padding: 0; background-color: #ba8968;}
			body { overflow-y: auto; }
			.lightbox { left: -999em; position: absolute; }
			.lightbox { left: -999em; position: absolute; }
			.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
			.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: fixed; z-index: 1; }
			.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
			.close {text-indent: -999em;}
			.lightbox:target div { background: #FFFFFF; position: fixed; left: 50%; top: 50%; z-index: 99; border: 8px solid #fff;}
			.w60p { margin-left: -30%; width: 60%; } .w300 { margin-left: -150px; width: 300px; } .w640 { margin-left: -320px; width: 640px; }
			.h60 { height: 60px; margin-top: -30px; } .h400 { height: 400px; margin-top: -200px; } .h386 { height: 386px; margin-top: -193px; }
			.scroll { overflow-y: scroll; padding: 0 1em; }
			.boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
			.boxfocus div {	background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
			.boxfocus .close a { background-image: url('trans.png'); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
			
/***********BG-Content***********/			
.bg-content {background:url('../images/01.png') no-repeat top center;background-size: 100%;margin-top: 185px;}
.tv{width: 800px;}
.tv img{width: 800px;
height: 810px;
margin-left: -14px;
margin-top: -247px;}	

/****************************************wrap-campaign*******************************************/
.wrap-campaign{
	font-family: 'RSU';
	width:802px;
	background:url(../images/bg-cam-page.png);
	margin:10px auto;
	-moz-border-radius:15px;  
  	border-radius: 15px;  
  	-webkit-border-radius: 15px;
	box-shadow: 0 0 0 8px rgba(239,33,106,0.7);
	padding:0px 0px 10px;}
.head-campaign{
	clear:both}
.gallery-group{ overflow:hidden}
.gallery-group li, .picture, .picture img, .picture_info, .picture_info img, .information{
	-moz-border-radius:10px;  
  	border-radius: 10px;  
  	-webkit-border-radius: 10px;
	}
.gallery-group li{
	width:156px;
	height:246px;
	padding:1px;
	background:url(../images/bg-profile.png) no-repeat;
	margin:10px 21px;
	float:left;}
.picture img{
	width:100%;
	height:auto;}
.info{
	font-size:16px;
	line-height:19px;
	color:#fff;
	margin:3px;}
.info_list{
	margin:2px 3px}

.note{
	margin:20px;
	padding:5px 0px;
	border-top:1px dotted #e11f83;
	color:#402c31;
	font-size:14px;
	}
.information,.fb-comment{	
	margin:10px auto;}
.information{
	background:#ef216a;
	width:518px;
	height:262px;
	padding:5px;
	}
.information .info, .picture_info{
	float:left}
.information .info{
	font-size:22px;
	line-height:30px;
	margin-left:10px;}
.fb-comment{
	width:530px;
	border:1px solid #ef216a;}
.fb-comment, .title-comment{
	border-top-left-radius:10px;
	border-top-right-radius:10px;}	
.title-comment{
	padding:3px 7px;	
	background:#ef216a;
	color:#fff;
	font-size:24px;
	}
#detail-content{
	font-family:Tahoma, Geneva, sans-serif;
	text-indent:1.5em;
	clear:both;
	color:rgb(243, 238, 238);
	margin:145px 0px 5px 0px;
	font-size:16px;
	padding:15px 59px;
	background:#f1e8df;
	}
#detail-content ul{
	text-align:center;
	display:inherit;
	}
#detail-content li{
	padding:5px 0;
	color:dimgrey;
	}
#detail-content a{
	color:#06F;
	}
#detail-content a:link{
	color:#06F;
	font-weight:bold;
	text-decoration: underline;
	}
#detail-content a:hover{
	color: #00F;
	font-weight: bold;
	text-decoration: underline;
	}
.center{ 
	text-align:center;
	line-height:5px;
	color:#000;
	}

#gallery_scroll{margin:10px 0;width:100%;height:104px;position:relative;clear:both}
#gallery_scroll .scrollable{height:104px;margin:0 40px;overflow:hidden;position:relative}
#gallery_scroll a.scroll_left,#gallery_scroll a.scroll_right{cursor:pointer;top:0;width:40px;height:104px;position:absolute;background-position:50% 50%;background-repeat:no-repeat}
#gallery_scroll a.scroll_left{left:0;background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/left.png)}
#gallery_scroll a.scroll_right{right:0;background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/right.png)}
#gallery_scroll a.scroll_left:hover{background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/left-hover.png)}
#gallery_scroll a.scroll_right:hover{background-image:url(http://www.sonicbang.net/skin/sonicbang/artist/img/right-hover.png)}
#gallery_scroll .scrollable img{height:100px}
#gallery_scroll .scrollable a{display:inline-block;float:left;background-color:#FFF;padding:2px;margin:0 2px;box-shadow:0 0 5px rgba(0,0,0,0.5)}
.artist_img>img{border:5px solid #FFF;box-shadow:2px 2px 3px rgba(0,0,0,0.5)}
#artist_mv>div.banner>a{margin-bottom:5px;display:inline-block}

#slide-avril {
width: 220px;
height: 290px;
font-size: 0;
display: inline-block;
overflow: hidden;
margin: 70px 34px;
}
#slide-avril a{ margin:0px; padding:0px 3px}

.news-update{
background:url(../images/avril-news-update.png) no-repeat;
background-color: black;
background-size: 100%;
padding:105px 86px 0px;

}
.gallery-avril{background:url(../images/avril-gallery.png);width: 290px;height: 470px;}
.gallery{
	margin:10px auto; 
	width:98%; 
	height:120px; 
	overflow: hidden; 
	padding:0px;
	position:relative}
.fancybox{
	float:left;
	margin:3px;
	position:relative}
.time-table{background:rgba(255,255,255,0.95)}
.thumbnail-video{ height:80px; width:100%; overflow:hidden}
.thumbnail-video li{ 
	float:left;
	width:140px;
	height:80px}
.thumbnail-video li img{
	width:100%;
	height:100%}
.next{ margin-left:13px}
.news{
	background:#FFF;
	float:left;
	clear:both;
	margin:0px 0px 5px 0px;
	width:100%;}
h1.title{
	font-family:monotype corsiva ;
	font-size:36px;
	font-weight:bold;
	padding:0 10px 0;
	margin:0;
	height:25px;
	color:#fff;
	/*background:url(../images/h_bg.png);*/
	margin:0 0 5px 0;
}

/* This CSS is just for presentational purposes. */
#wrap {
      margin: 0 auto;
      padding: 1em;
}

/* This CSS is used for the Show/Hide functionality. */
.more {
  display: none;
  /*border-top: 1px solid #666;*/
  /*border-bottom: 1px solid #666;*/ 
}
a.showLink, a.hideLink {
  	text-decoration: none;
  	color: #36f;
  	padding-left: 8px;
	text-align:center;
  	/*background: transparent url(down.gif) no-repeat left;*/
	opacity:0.8;
	filter:alpha(opacity=80); 
}
/*a.hideLink {
  	background: transparent url(up.gif) no-repeat left;
}*/
a.showLink:hover, a.hideLink:hover {
  	opacity:1.0;
	filter:alpha(opacity=100); 
}
.container{ background:rgba(255,255,255,0.98);border-radius:5px;overflow:hidden}
h4{margin:0px;background:#000;color:#fff;padding:3px 8px}
.container li{margin:10px; color:#222}
.inner{background:url(../images/bg_meet.png) no-repeat top right; float:left;width:100% }
.remark{float:left;width:100% ;font-size:14px;}
.remark li{color:red}
/* Original 1024px (landscape) ----------- */
.ticket-info{ overflow:hidden; width:630px;margin-top: 260px;margin-left: -8px;height: 745px;}
.price{margin: 0px -17px;
width: 330px;
height: 100%;}
#let-me-go img{ max-width:100%; width:auto}
#let-me-go .btn {width:292px; height:70px}
.btn-frankie img{display: table;margin: 0 auto;}
.bottom-border img{display:table;margin: 0px0px;width: 100%;}
.sponsor {background:url(../images/frankie-sponsor-bar.jpg);background-size: 100%;}
.second img,.first img{float: left;
margin: 0px 33px;
padding: 2px 0px;}
.second {margin-top: 10px;display: table;background-color: white;width: 100%;}
.first {display: table;margin: 0 auto;padding: 8px 0px;}
.first span  img{float: left;display: block;margin: 0px 8px;}
 @media screen and (max-width: 1024px){
 .blank{
	height:400px;
	display:block;
	}
}