#subscrib {
	
}

.subscrib-header-container {
	height:auto;
	width:100%;

	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aa0000+50,000000+50 */
background: #e3e3e3; /* Old browsers */
background: -moz-linear-gradient(left,  #e3e3e3 70%, #000000 30%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right top, color-stop(70%,#e3e3e3), color-stop(30%,#000000)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(left,  #e3e3e3 70%,#000000 30%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(left,  #e3e3e3 70%,#000000 30%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(left,  #e3e3e3 70%,#000000 30%); /* IE10 preview */
background: linear-gradient(to right,  #e3e3e3 70%,#000000 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#000000',GradientType=1 ); /* IE6-9 */  
		
}	
.col-padding-0 {
	padding-left:0;
	padding-right:0;
}
.photo-btn {
	opacity: 0.7;
    border: 1px #555 solid;
    padding: 0 5px;
    border-radius: 4px;
    background-color: #fff;
}
.photo-btn:hover {
	opacity: 1;
	color:#ed1c24;
}
.Subscribed{
	color:#ed1c24;
}
.Subscribed.disabled {
	color: transparent;
}

.subscrib-btn-container {
	height:auto;
	width:100%;
	color:#fff;
	font-weight: 700!important;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aa0000+50,000000+50 */
background: #aa0000; /* Old browsers */
background: -moz-linear-gradient(left,  #aa0000 50%, #ed1c24 50%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#aa0000), color-stop(50%,#ed1c24)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(left,  #aa0000 50%,#ed1c24 50%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(left,  #aa0000 50%,#ed1c24 50%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(left,  #aa0000 50%,#ed1c24 50%); /* IE10 preview */
background: linear-gradient(to right,  #aa0000 50%,#ed1c24 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa0000', endColorstr='#ed1c24',GradientType=1 ); /* IE6-9 */  
}

.flag {
	height: 15px;
	width:23px;
	background-image: url(../images/overall2.png);
}
.flag-china {
	background-position: left -95px;
}
.flag-hk {
	background-position: left -271px;
}
.event.container {
	padding:0px 30px 25px;
}

.event p {
	    margin: 0 0 0px !important;
}
.event .table-responsive > .table > thead > tr > th, .event .table-responsive > .table > tbody > tr > th, .event .table-responsive > .table > tfoot > tr > th, .event .table-responsive > .table > thead > tr > td, .event .table-responsive > .table > tbody > tr > td, .event .table-responsive > .table > tfoot > tr > td, 
.subscrib-btn-container .btn {
	white-space: normal;
}
.btn-none {
	background-color: transparent;
	border: 0px transparent;
	padding:15px;
	color: #000000;
}
.btn-none.grey {
	color: #ccc;
}
.btn.btn-none:active, .btn.btn-none.active, .btn.btn-none:hover {
    background-image: url(../images/triangle.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 100%;
    margin-bottom: 0;
	color: #ffffff;
}
.face {
	width:100%;
	
	max-height: 50vh;
	background-color: #dddddd;
}

#face {
	width: 100%;
    text-align: center;
    z-index: 1;
    position: absolute;
}
	#face img {
	width: auto;
    height: 50vh;
}
.face-mask {
	text-align: center;
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	height: 100%;
	width: 100%;
}
.face-mask  img {
	max-width: 250px;
	max-height: 250px;
	
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	text-align: center;
	position: absolute;
	z-index: 5;
}
.face-thum {
	    width: 100%;
    max-width: 400px;
    overflow: hidden;
    margin: auto;
}
.face-thum img {
	width:100%;
	max-width: 70px;
	height: auto;
	border: 1px #000000 solid;
	padding:5px;
	border-radius: 8px;
	opacity: 0.3;
}
.face-thum img:hover {
	opacity: 1;
}
.face-thum .col-xs-3 {
	text-align: center;
	padding-right: 5px;
    padding-left: 5px;
}
.face-thum .carousel-indicators {
	display: block !important;
	bottom: auto;
	position: relative;
    width: 100% !important;
    margin-left: -50% !important;
}
.face-thum .carousel-indicators li {
	
	display: inline-block!important;
	    width: 70px !important;
    height: 70px !important;
    border: 1px #000000 solid !important;
    padding: 5px;
    border-radius: 8px !important;
    opacity: 0.3;
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
}
.face-thum .carousel-indicators li.active, .face-thum .carousel-indicators li:hover {
	opacity: 1;
	border: 1px solid #000 !important;
}
.carousel-btn {
    position: absolute;
    bottom: 0px!important;
    width: 46px !important;
    font-size: 20px;
    color: #000;
    text-align: center;
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
	    z-index: 300;
}
.carousel-btn a, .carousel-btn a:hover,  .carousel-btn:hover {
	filter: alpha(opacity=100);
    opacity: 1;
}
.modal-body {
    overflow: hidden;
}
#modal-login .modal-content, #modal-reg .modal-content, #modal-verify .modal-content {
	padding: 20px;
}
#modal-login .form-horizontal .checkbox {
    padding-top: 0px;
}
@media (max-width: 900px) {
.event.container {
	padding:0px 15px 25px;
}
}
@media (max-width: 767px) {
	
	#face img {
	width: 250px;
    height: auto;
}
	.face {
	width:100%;
	height: 250px;
	background-color: #dddddd;
}
.event.container {
	/*padding:120px 10px;*/
	padding: 0 20px;
}
	.event.container.reg {
		padding:0px 0 25px ;
	}
	.event .table-responsive {
    overflow-y: hidden;
    border: 0px solid #ddd;
}
	.face-thum .carousel-indicators li {
    width: 50px !important;
    height: 50px !important;
    background-size: 90%;
}
	#modal-login .modal-content, #modal-reg .modal-content, #modal-verify .modal-content {
	padding: 10px;
}
}
@media (max-width: 500px) {
	.event.container {
	padding:0px 10px;
}
}
@media (max-width: 335px) {
.Subscribed.disabled {
	display:none;
}
}