@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url('https://fonts.googleapis.com/css?family=Nunito:300,700&display=swap');

@font-face {
	font-family: 'cwTeXYen';
	font-style: normal;
	font-weight: 300, 700;
	font-display: swap;
	src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
	src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
	url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
	url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}

/* TODO: handle different screen width */
@keyframes mymove {
	from {left: 100%;}
	to {left: -100%;}
}

::placeholder {
	color: #C7C7C7!important;
	font-size: 10px!important;
}

body {
	background-color: #EBEDED;
	color: #007CCB!important;
	font-family: "Nunito", "cwTeXYen", "Yuanti SC", "Microsoft Jhenghei", sans-serif!important;
	font-weight: 300!important;
	font-size: 14px;
	text-align: center;

	/* Reset CSS */
	padding: 0;
	margin: 0;
	border: 0;
}

img {max-width: 100% !important;height: auto !important;} 

a {transition: .2s ease-in-out; color: #007CCB;}

a:link {text-decoration: none; color: #007CCB;}
a:visited {	text-decoration: none; color: #007CCB;}
a:hover {	text-decoration: none; color: #007CCB;}
a:active {	text-decoration: none;color: #007CCB;}

/* Hunt */
.hunt-banner1 {width: 70px;	height: 70px; float:right;}

.hunt-banner2 {width: 70px;	height: 70px; margin-left: 30%;}

.hunt-banner3 {width: 70px;	height: 70px; margin-left: 50%;}



/* Top */


.main {
	position: relative;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.login-bar {
	height: 26px;
	padding-top: 6px;
	padding-right: 50px;
	font-size: 10px;
	text-align: right;
	background-color: #EBEDED;
}

.login-bar2 {
	height: 32px;
}

.metro-logo {
	position: absolute!important;
	top: 0!important;
	left: 50%!important;
	transform: translateX(-50%)!important;
	height: 30px!important;
}

#settings {
	padding-left: 20px;
	color: #007CCB;	
}

.header {
	height: 74px;
}

.header-banner {
	background-image: url("../images/header-banner_game-desktop.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: center;
	height: 100%;
}

.header-banner2 {
	background-image: url("../images/header-banner-desktop2.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: center;
	height: 100%;
}

.floating-logo-container {
	position: relative;
}

.floating-logo-container-login {
	margin-bottom: 50px;
	padding: 20px;
	text-align: center;
}

.floating-logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	z-index: 99;
}

.floating-logo-login {
	width: 140px;
	z-index: 99;
}

#hitpicks-description {
	position: absolute;
	top: 52px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.game-button {
	width: 90px;
	height: 45px;
	position: absolute;
	top: 45px;
	right: 180px;
	background-image: url("../images/header_logo_m.png");
	background-position: center;
	background-size: 110%;
	background-color: #410096;
	border-style: dashed;
	border-color: #410096;
	border-radius: 8px;
	display: none;
}

.game-button:hover {
	background-size: 120%;
	background-color: #41009680;
}

.login-button {
	width: 144px;
	height: 52px;
	position: absolute;
	top: 45px;
	right: 20px;
	text-align: right;
	background-image: url("../images/login_btn@2x.png");
	background-position: center;
	background-repeat: no-repeat;
}

.logout-button {
	width: 144px;
	height: 52px;
	position: absolute;
	top: 45px;
	right: 20px;
	text-align: right;
	background-image: url("../images/logout_btn@2x.png");
	background-position: center;
	background-repeat: no-repeat;
}

.gift-btn-wrapper {
    position: absolute;
    top: 40px;
    right: 200px;
    height: 60px;
    width: 160px;
    background-image: url("../images/checkscore_2a.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.gift-btn-wrapper:hover {
    background-image: url("../images/checkscore_2b.png");
}

.notif {
	height: 26px;
	background-color: #ECDFAD;
	padding-top: 2px;
	overflow: hidden;
}

.notif ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
font-size: 14px;
}

.notif li {
  display: inline;
}

.notif li a {
  color:yellow ;
  display: inline-block;
  padding: 0 15px;
  transition: none;
  font-weight: 700;
}

.notif li a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

#notif-msg {
	position: relative;
	font-weight: 300;
	font-size: 14px;
	white-space: nowrap;
	animation: mymove 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#game-panel {
	color: #FFFFFF;
	background-color: #410096;
}

.main-content {
	position: relative;
	padding-top: 250px;
}

.banner-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

.banner {
	height: 455px;
	object-fit: cover;
	object-position: center;
	z-index: -1;
}

#div-gpt-ad-1577678673680-0 {
	height: 455px;
	object-fit: cover;
	object-position: center;
	z-index: -1;
}

.editors-choice-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0px 100px;
	z-index: 100;
}

.card {
	flex: 1;
	max-width: 300px;
	background-color: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	z-index: 99;
	position: relative;
}

.card + .card {
	margin-left: 80px;
}

.card-title {
	background-color: #FD6A85;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	font-size: 22px;
	font-weight: 700;
	text-align: left;
	position: relative;
}

.card-content {position: relative;

}
.card-image {
	max-height: 280px;
	width: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
}
.card-content-detail {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;	
}
.card-detail-title {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 700;
	position: relative;
}
.card-detail-button {
	position: relative;
	bottom: 0;
	padding-bottom: 10px;
}

.carousel-container {
	position: relative;
	margin-top: 25px;
	padding: 20px 50px;
	overflow: hidden;
	background-color: #FFFFFF;
	text-align: left;
}

.carousel-top {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
}

.carousel-logo {
	width: 60px;	
}

.carousel-epidemic {
	color: #E81E3C;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
}

.carousel-title {
	color: #FF9853;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
}

#carousel-title-bk {
	color: #FF6666;
}

#carousel-title-esdlife {
	color: #129fbd;
}

.carousel-partner {
	position: absolute;
	top: 17px;
	right: 40px;
	width: 150px;
	height: 50px;
	background-image: url("../images/powered_bk.jpg");
	background-size: cover;

}

.carousel-HitGood {
	position: absolute;
	top: 17px;
	right: 40px;
	width: 150px;
	height: 50px;
	background-image: url("../images/HitGood_slider_logo.jpg");
	background-size: cover;

}

.carousel-partner-esdlife {
	position: absolute;
	top: 17px;
	right: 40px;
	width: 150px;
	height: 50px;
	background-image: url("../images/esdlife.png");
	background-size: cover;

}

.carousel-title-editor {
	color: #fe8a01;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
}

.carousel-title-father {
	color: #9c5f09;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
}

.carousel-title-HitGood {
	color: #c72c49;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
}

.owl-carousel {
	
}

.carousel-prev-button {
	position: absolute;
	top: 160px;
	left: 40px;
	width: 20px;
	transform: translateY(-50%);
	z-index: 98;
}

.carousel-next-button {
	position: absolute;
	top: 160px;
	right: 40px;
	width: 20px;
	transform: translateY(-50%);
	z-index: 98;
}

.carousel-prev-button1 {
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	/*transform: translateY(-50%);*/
}

.carousel-next-button1 {
	font-size: 24px;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 20px;
	/*transform: translateY(-50%);*/
}

.carousel-image {
	width: 150px;
}

.google-banner{
	text-align: center;
	padding:5px 0px;
}

footer {
	height: 50px;
	width: 100%;
	padding-top: 10px;
	margin-top: 25px;
	background-color: #ECDFAD;
	font-size: 10px;
	text-align: center;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.login-bar {
		padding-right: 30px;
	}
	.header-banner {
		background-image: url("../images/header-banner_game-m.jpg");
	}
		.header-banner2 {
		background-image: url("../images/header-banner_game-m2.jpg");
	}	
	#notif-msg {
		animation: mymove 25s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	.editors-choice-container {
		display: block;
		z-index: 100;
	}
	.editors-choice-container .card {
		margin-left: auto;
		margin-right: auto;
	}
	.editors-choice-container .card + .card {
		margin-top: 40px;
		margin-left: auto;
	}
	.card {
		max-width: none;
		z-index:99;
	}
	.card-content {
		display: flex;
	}	
	.card-image {
		width: 50%;
	}
	.card-content-detail {
		width: 50%;
	}
	.card-detail-title {
		padding: 20px 20px;
	}
	.carousel-prev-button {
		left: 30px;
	}
	.carousel-next-button {
		right: 30px;
	}
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.header-banner {
		background-image: url("../images/header-banner_game-xs.jpg");
	}	
	
		.header-banner2 {
		background-image: url("../images/header-banner_game-xs2.jpg");
	}	
	.floating-logo {
		width: 100px;
		top: 25px;
	}
	.floating-logo-login {
		width: 100px;
	}
	.login-button {
		right: -10px;
		background-size: 70%;
	}
	
		.logout-button {
		right: -10px;
		background-size: 70%;
	}
	
	#notif {
		display: none;
	}
	.logo-iframe{
		width: auto;
		vertical-align:text-bottom;
		position: absolute;
		top: 30px;
		left: 120px;
		height: 30px;
	}

	
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.login-bar {
		padding-right: 20px;
	}
	.editors-choice-container {
		padding: 0px 30px;
	}
	.card-content {
		display: block;
	}
	.card-image {
		width: 100%;
	}
	.card-content-detail {
		width: 100%;
	}
	.carousel-container {
		padding: 20px 40px;
		overflow: hidden;
		background-color: #FFFFFF;
		text-align: left;
	}	
	.carousel-partner {
		width: 120px;
		height: 40px;
		top: 23px;
		right: 20px;
	}
	.carousel-prev-button {
		left: 20px;
	}
	.carousel-next-button {
		right: 20px;	
	}
}


/* main */ 


.row {margin-left:0; margin-right:0;}

.bg {background: #FFF;}




.logo-iframe{
	width: auto;
	vertical-align:text-bottom;
	position: absolute!important;
	top: 50px;
	left: 150px;
	height: 40px;
	
}

.top-bar {background: #fff;}

/* Cookie */
.cookie-popup {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 10px;
	background: rgba(0,0,0,0.8);
	font-size: 10px;
	z-index: 1000;
	box-sizing: border-box;
	text-align: center;
}

.cookie-popup p {color:#FFF;}
a.cookie-popup p:visited {color:#FFF;}
a.cookie-popup p:link {color:#FFF;}
a.cookie-popup p:active {color:#FFF;}


.cookie-popup-btn{
	color:#FFF;
	display: block;
	min-width: 100px;
	padding: 10px;
	border: 1px solid #fff;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	width: 180px;
	margin: auto;
}

a.cookie-popup-btn:hover{ color: #FFF; }
a.cookie-popup-btn:link { color: #FFF;  text-decoration: none; }
a.cookie-popup-btn:visited { color: #FFF;  text-decoration: none; }
a.cookie-popup-btn:active { color: #FFF;  text-decoration: none; }

.cookie-text-link {color: #FFF000!important;}

a.cookie-text-link:visited {color: #FFF000!important;}

/* Cookie */


/* Nav */
.btn-all-login {  color: #fff;  background-color: #57c9bb;  border-color: #17a2b8;  margin: auto;  display: block;}
.btn-all-login:hover {  color: #fff;  background-color: #37a597;  border-color: #117a8b;}
.btn-all-login:focus, .btn-all-login.focus {  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);}

.btn-all-member {  color: #fff;  background-color: #17a2b8;  border-color: #17a2b8;  margin: auto;  display: block;}
.btn-all-member:hover {  color: #fff;  background-color: #138496;  border-color: #117a8b;}
.btn-all-member:focus, .btn-all-member.focus {  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);}

.nav-bg {background: #1cab99;}

.navbar-custom .navbar-brand {  color: #fff; }
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {  color: #fff000;}
.navbar-custom .navbar-nav .nav-link {  color: rgba(255, 255, 255, 0.8);}
.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-link:focus {  color: rgba(255, 255, 255, 0.75);}
.navbar-custom .navbar-nav .nav-link.disabled {  color: rgba(255, 255, 255, 0.25);}
.navbar-custom .navbar-nav .show > .nav-link,
.navbar-custom .navbar-nav .active > .nav-link,
.navbar-custom .navbar-nav .nav-link.show,
.navbar-custom .navbar-nav .nav-link.active {  color: #fff000;}
.navbar-custom .navbar-toggler { color: rgba(255, 255, 255, 0.5);  border-color: rgba(255, 255, 255, 0.1);}
.navbar-custom .navbar-toggler-icon {  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.navbar-custom .navbar-text {  color: rgba(255, 255, 255, 0.5);}
.navbar-custom .navbar-text a {  color: #fff000;}
.navbar-custom .navbar-text a:hover, .navbar-custom .navbar-text a:focus {  color: #fff000;}

/* Nav */

/* Main */
.top-box-padding {padding-left:0 !important;padding-right:0 !important;}

@media (max-width: 767px){
	.top-box-padding {margin-bottom: 5px;}
}

.main-carousel-header {font-size:24px;font-weight: bolder;color:#5d5d5d;}
.main-carousel-bottom {border-bottom:1px solid rgba(0, 0, 0, 0.1);}


/* Main */

/* details */

h3 {margin-bottom: 10px;}

.details-client-logo {
	width: auto;
	max-height: 80px;
	margin-bottom: 20px;
}

.product-photo-box {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border-radius: 0.25rem;}

	.product-photo-body {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;

	}

	.product-details-box {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border-radius: 0.25rem;}

		.product-details-body {
			-webkit-box-flex: 1;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;  
		}

		.details-photo {  max-width: 100%;  height: auto;}

		.details-small-text {font-size: 12px;}


		.btn-details {
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			color: #FFFFFF;
			font-size: 20px;
			background-color: #FD6A85;
			margin-top: 20px;
			padding: 10px;
			text-decoration: none;
			text-align: center;		
			font-weight: bolder;	
			transition: .05s ease-in-out;
			display: block;
			max-width: 230px;
		}

		a.btn-details:link {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details:visited {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details:active {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details:hover {
			background: #FD6A85;
			font-weight: 800;
			color: #FFF000;
			transform: scale(1.10);
		}


		/*  Gallery */

		.swiper-container {
			width: 100%!important;
			height: 272px!important;
			margin-left: auto!important;
			margin-right: auto!important;
		}

		.swiper-gallery {
			position: relative!important;
			padding-bottom: 56.25%!important; /* 16:9 */
			height: 0!important;
		}


		.swiper-slide {
			background-size: cover!important;
			background-position: center!important;
		}
		.gallery-top {
			position: absolute!important;
			top: 0!important;
			left: 0!important;
			width: 100%!important;
			height: 100%!important;

		}

		.swiper-thumb-gallery {
			position: relative!important;
			padding-bottom: 80%!important; /* 16:9 */
			height: 0!important;
		}

		.gallery-thumbs-wrapper {
			position: absolute!important;
			top: 0!important;
			left: 0!important;
			width: 100%!important;
			height: 100%!important;

		}

		.gallery-thumbs {
			height: 25%!important;
			box-sizing: border-box!important;
			padding: 10px 0!important;
		}
		.gallery-thumbs .swiper-slide {
			height: 100%!important;
			opacity: 0.4!important;
		}
		.gallery-thumbs .swiper-slide-thumb-active {
			opacity: 1!important;
		}

		/*  Gallery */

		/* Register form */

		.form {
			max-width: 700px;
			padding: 5px;
			margin: 0 auto;
			border-radius: 0.3em;

		}

		.form-reg-wrap {
			max-width: 700px;
			width: 100%;
			padding: 5px;
			margin: 0 auto;
			border-radius: 0.3em;
			color: #017cc9;
		}

		.form-col {
			width: 50%;
			max-width: 400px;    
			margin: 0 auto;
			padding: 0 10%;
			border-radius: 0.3em;
			float: left; 

		}

		.form-col2 {
			width: 100%;
			max-width: 700px;    
			margin:  auto;
			padding: 0 10%;	
			border-radius: 0.3em;
			float: left; 

		}

		.form-reg-header { 
			font-size: 2.2rem;
			font-weight: bold;
			color: #017cc9;
			margin: 5% 0;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 4px;
		}

		.form-reg-sub-header{ font-size: 1.2rem;font-weight: 700;color: #95ced7;margin-bottom: 20px;}

		.form-control {height:30px;}

		.form-control-border {  border-color: #017cca !important;}

		.form-control-country {padding: 0 0.75rem!important;}

		.form-radiobutton-wrap {float: left; width:20%; margin-left: 15px;}

		.form-col {
			width: 50%;
			max-width: 400px;    
			margin: 0 auto;
			padding: 0 10%;
			border-radius: 0.3em;
			float: left; 

		}

		.reg-tnc {font-size:0.8em; overflow: auto; border: solid 2px #CCC; padding: 4px; width:100%; height: 100px;background-color: #FFFFFF; line-height: 1.8em;}

		.reg-tnc p{line-height: 1.3em;}
		.reg-text-alert {font-size:0.9em; color:#EE145B;}

		.reg-button-wrap {width:60%; max-width:700px;margin: 0 auto;}

		.btn-form {
			-webkit-border-radius: 28;
			-moz-border-radius: 28;
			border-radius: 28px;
			color: #FFF000;
			font-size: 20px;
			background: #a3d063;
			padding: 10px 60px 10px 60px;
			text-decoration: none;
			text-align: center;				
			transition: .2s ease-in-out;
			display: block;
			max-width: 230px;
		}

		a.btn-form:link {    color: #FFF000;  text-decoration: none;}
		a.btn-form:visited {    color: #FFF000;  text-decoration: none;}
		a.btn-form:active {    color: #FFF000;  text-decoration: none;}
		a.btn-form:hover {  background: #628c26;  text-decoration: none;color: #FF9116;}



		.reg-button-wrap div {   width: 50%;
			max-width: 400px;    
			margin: 0 auto;
			padding: 0 10%;
			border-radius: 0.3em;
			float: left; }

			.form_ans {color:#FF6E00;}

			@media (max-width: 798px){
				.form-reg-header { 
					font-size: 1.4rem;
					font-weight: bold;
					color: #017cc9;
					margin: 5% 0;
					text-align: center;
					text-transform: uppercase;
					letter-spacing: 4px;
				}

				.form-group { margin-bottom: 0.2rem!important;}

				.form-col {
					width: 100%;
					max-width: 500px;    
					margin: 45px auto;
					padding: 0 10%;
					float:none;
				}	

				.form-col2 {
					width: 100%;
					max-width: 500px;    
					margin: 45px auto;
					padding: 0 10%;
					float:none;
				}	

				.reg-button-wrap div {  width: 100%;max-width: 500px; margin:5px auto;	padding: 0 10%;	float:none;}

				.form-radiobutton-wrap {width:100%;}

			}
			/* form */


			/* login*/

			.form {
				max-width: 320px;
				width:90%;
				padding: 5px;
				margin: 0 auto;
				border-radius: 0.3em;

			}

			.login-title {  max-width: 700px;
				padding-bottom: 5px;
				margin: 0 auto; 
				text-align: center;
				color: #027bca;
				font-size: 1.6em;
				font-weight: bolder;
			}
			.login {

			}

			.btn-login {
				-webkit-border-radius: 5;
				-moz-border-radius: 5;
				border-radius: 5px;
				color: #FFF;
				font-size: 20px;
				background: #7ec2cd;
				padding: 3px 5px 3px 5px;
				text-decoration: none;	
				width: 100px;
				font-weight: 700;
				transition: .2s ease-in-out;
				display: block;
				margin: auto;
				text-align: center;
			}

			a.btn-login:link {    color: #FFF;  text-decoration: none;}
			a.btn-login:visited {    color: #FFF;  text-decoration: none;}
			a.btn-login:active {    color: #FFF;  text-decoration: none;}
			a.btn-login:hover {  background: #017cca;  text-decoration: none;color: #FFF;}




			.text-member {
				font-size: 14px;
				padding: 3px 5px 3px 5px;
				text-decoration: none;

			}

			.btn-member {
				-webkit-border-radius: 5;
				-moz-border-radius: 5;
				border-radius: 5px;
				color: #FFF;
				font-size: 20px;
				background: #7fd165;
				padding: 3px 5px 3px 5px;
				text-decoration: none;
				text-align: center;	
				width: 100px;
				font-weight: 700;
				transition: .2s ease-in-out;
				display: block;
				margin: auto;
			}

			a.btn-member:link {    color: #FFF;  text-decoration: none;}
			a.btn-member:visited {    color: #FFF;  text-decoration: none;}
			a.btn-member:active {    color: #FFF;  text-decoration: none;}
			a.btn-member:hover {  color: #FFF;background: #3fa232;  text-decoration: none;}

			.my-auto{margin-top: auto;margin-bottom: auto;}

			.white{
				color:#000;
				background-color:#fff;
			}

			.btn-facebook {
				color: #ffffff;
				-webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				background-color: #2b4b90;
				*background-color: #133783;
				background-image: -moz-linear-gradient(top, #3b5998, #133783);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
				background-image: -webkit-linear-gradient(top, #3b5998, #133783);
				background-image: -o-linear-gradient(top, #3b5998, #133783);
				background-image: linear-gradient(to bottom, #3b5998, #133783);
				background-repeat: repeat-x;
				border-color: #133783 #133783 #091b40;
				border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
				filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
			}

			.btn-facebook:hover,
			.btn-facebook:focus,
			.btn-facebook:active,
			.btn-facebook.active,
			.btn-facebook.disabled,
			.btn-facebook[disabled] {
				color: #ffffff;
				background-color: #133783 !important;
				*background-color: #102e6d !important;
			}

			.btn-facebook:active,
			.btn-facebook.active {
				background-color: #0d2456  !important;
			}

			/* login*/

			@media (max-width: 992px){
				.details-client-logo {		margin-top: 10px;	margin-bottom: 10px;}
				.btn-details {	margin: auto;	display: block;	}
				.btn-details-member-game {	margin: auto;	display: block;	}
				.details-photo {  margin-bottom: 20px;}

}
/* details */
				
				
				
/* New Article */
.article-photo-warp{
	width: 100%;
-webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}
				
.article-photo-warp img{
	max-width:300px;
	width: 100%;	
}

.package-title {
	font-size: 18px;
	font-weight: 700;
	color: #f5821f;
}

.article-related img {
	margin-bottom: 20px; 
}

/* New Article */

/* Member Game */
.details-member-game {color: #A60002;font-weight: 700;}

.btn-details-member-game {
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			color: #FFFFFF;
			font-size: 20px;
			background-color: #0ca890;
			margin-top: 20px;
			padding: 10px;
			text-decoration: none;
			text-align: center;		
			font-weight: bolder;	
			transition: .05s ease-in-out;
			display: block;
			max-width: 230px;
		}

		a.btn-details-member-game:link {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details-member-game:visited {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details-member-game:active {    color: #FFFFFF;  text-decoration: none;}
		a.btn-details-member-game:hover {font-weight: 800;			color: #FFF000;			transform: scale(1.10);		}

			@media (max-width: 992px){
.btn-details-member-game {	margin: auto;	display: block;	}				
}


/* Member Game */



@media (max-width: 992px){
	.article-photo-warp{
	-webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;	
}	
}

@media (max-width: 767px){
.row .article-photo-warp{
	width: 100%;
	margin: 0 auto;
	}
	
.package-title {
	text-align: center;
}
	
.article-photo-warp img{
	max-width:500px;
	width: 100%;
	margin: 10px auto;
	display: block;
}	
	
	

	
}