
@font-face {
	font-family: 'thaisans_neue_blackregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-black-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-black-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-black-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-black-webfont.svg#thaisans_neue_blackregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neuebold';
	src: url('../fonts/ThaiSansNeue/thaisansneue-bold-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-bold-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-bold-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-bold-webfont.svg#thaisans_neuebold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_extbdregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-extrabold-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-extrabold-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-extrabold-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-extrabold-webfont.svg#thaisans_neue_extbdregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_extltregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-extralight-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-extralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-extralight-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-extralight-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-extralight-webfont.svg#thaisans_neue_extltregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_lightregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-light-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-light-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-light-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-light-webfont.svg#thaisans_neue_lightregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neueregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-regular-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-regular-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-regular-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_sembdregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-semibold-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-semibold-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-semibold-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-semibold-webfont.svg#thaisans_neue_sembdregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_ultbdregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-ultrabold-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-ultrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-ultrabold-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-ultrabold-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-ultrabold-webfont.svg#thaisans_neue_ultbdregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'thaisans_neue_ultltregular';
	src: url('../fonts/ThaiSansNeue/thaisansneue-ultralight-webfont.eot');
	src: url('../fonts/ThaiSansNeue/thaisansneue-ultralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ThaiSansNeue/thaisansneue-ultralight-webfont.woff') format('woff'), url('../fonts/ThaiSansNeue/thaisansneue-ultralight-webfont.ttf') format('truetype'), url('../fonts/ThaiSansNeue/thaisansneue-ultralight-webfont.svg#thaisans_neue_ultltregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
* {
	transition: all .32s ease;
}
body {
	font-family: thaisans_neueregular, thaisans_neueregular, sans-serif;
	background-color: #fff;
	color: #666;
	position: relative;
	-webkit-text-size-adjust: none;
	background: url(../img/bg_content.png) repeat;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-weight: bold;
	margin: 20px 0 10px 0;
}
h1, h2, h3 {
	font-size: 18px;
}
h4, h5, h6 {
	font-size: 16px;
}
p {
	margin: 0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover {
	/*color: inherit;*/
	text-decoration: none;
}
.colnopad {
	padding: 0px;
}
nav:not(.mm-menu) {
	display: none;
}
.header, .content, .footer {
	text-align: center;
}
.header, .footer {
	background: #3b5998;
	/*background: #EC8E20;*/
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 50px;
}
.header.fixed {
	position: fixed;
	top: 0;
	left: 0;
}
.footer.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
}
.header a {
	background: center center no-repeat transparent;
	background-image: url(../img/headmenu/slideicon.png);
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;
}
.content {
	padding: 150px 50px 50px 50px;
}
.linefade {
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
	margin-top: 10px;
	margin-bottom: 10px;
}
.form-control::-webkit-input-placeholder {
 font-size:14px;
 line-height:30px;
}
 .form-control:-moz-placeholder { /* Firefox 18- */
 font-size:14px;
 line-height:30px;
}
 .form-control::-moz-placeholder {  /* Firefox 19+ */
 font-size:14px;
 line-height:30px;
}
 .form-control:-ms-input-placeholder {
 font-size:14px;
 line-height:30px;
}
.searchlabel {
	display: inline-block;
	max-width: 100%;
	margin-bottom: auto;
	font-weight: normal;
	cursor: pointer;
}
.tspace {
	padding: 50px;
}
.space20 {
	margin: 20px 0px 20px 0px;
	clear: both;
}
/* =================  STYLE 0 , 1 ,2 ======================= */
#content {
	max-width: 1170px;
	z-index: 0;
	overflow: hidden;
	margin-left: -4px;
}
/*================================================== * Isotope & Masonry* ===============================================*/
.isotope-item {
	z-index: 2
}
.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}
.isotope, .isotope .isotope-item {
	/* change duration value to whatever you like */ -webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
}
.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	transition-property: height, width;
}
.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}
.boxportfolio4 {
	float: left;
	/*width:22.90%;*/
	display: inline-block;
	margin-bottom: 20px;
	position: relative;
	z-index: 0;
	padding: 0px 7px;
}
.boxcontainer {
	border: 1px solid #ededed;
	border-bottom: double medium #ececec;
	background: #fff;
	font-size: 13px;
	text-align: center;
	transition: border 500ms ease-out;
	-webkit-transition: border 500ms ease-out;
	-moz-transition: border 500ms ease-out;
	-o-transition: border 500ms ease-out;
	position: relative;
	overflow: hidden;
}
.boxcontainer:hover {
	border-bottom: double medium #eaeaea;
}
.boxcontainer .headthumb {
	font-family: thaisans_neuebold, thaisans_neue_extbdregular, sans-serif;
	letter-spacing: 1px;
	background-color: #3B5998;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	padding: 10px;
	float: left;
	text-align: left;
	width: 100%;
	margin-bottom: 10px;
}
.boxcontainer .headthumb:hover {
	background-color: #2f4778;
}
.boxcontainer .contentdetail {
	width: 100%;
	float: left;
	text-align: left;
}
.boxcontainer .contentdetail .datadetail {
	color: #666;
	padding: 10px;
	border-bottom: 1px solid #ededed;
	width: 100%;
	float: left;
}
.boxcontainer .contentdetail .datadetail i {
	font-size: 18px;
	text-align: center;
}
.boxcontainer .contentdetail .datadetail span {
	font-size: 14px;
	word-wrap: break-word;
}
.boxcontainer .contentdetail .datadetail:last-child {
	color: #666;
	padding: 10px;
	border-bottom: none;
}
.boxcontainer img {
	position: relative;
	width: 100%;
}
.roll {
	position: absolute;
	width: 100%;
	margin: 0px auto;
	padding: 10px;
	top: 0px;
	display: none;
	vertical-align: middle;
	background-color: RGBA(255,255,255,0.8);
	z-index: 10;
	zoom: 1;
	font-size: 20px;
	transition: none;
}
.captionicons {
	padding: 6px;
	border-radius: 50%;
	color: #666;
	cursor: pointer
}
.btn_block:hover {
	color: #e7402f;
	background-color: RGBA(255,255,255,0.8);
	box-shadow: 0px 0px 2px 1px #c8c8c8;
}
.btn_fav:hover {
	color: #FEFF03;
	background-color: rgba(144, 117, 30, 0.5);
	box-shadow: 0px 0px 2px 1px #c8c8c8;
}
.roll .fav_active {
	color: #FEFF03;
	background-color: rgba(144, 117, 30, 0.5);
	box-shadow: 0px 0px 2px 1px #c8c8c8;
}
.roll .fav_active:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.roll .block_active {
	color: #e7402f;
	background-color: RGBA(255,255,255,0.8);
	box-shadow: 0px 0px 2px 1px #c8c8c8;
}
.roll .block_active:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.bg_none {
	background-color: transparent;
}
.bg_danger {
	background: #e7402f;
}
.bg_warning {
	background-color: #DAE02F;
}
.thumbnail {
	padding: 0px;
	border-radius: 10px;
	/*box-shadow: 0px 0px 2px 1px #DCDCDC;*/
	position: relative;
	display: block;
	float: left;
	word-wrap: break-word;
	width: 100%;
	margin: 0px;
}
.thumbnail_img {
	float: left;
	width: 100%;
}
.thumbnail_img img {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
	float: left;
}
.thumbnail .headthumb {
	font-family: thaisans_neuebold, thaisans_neue_extbdregular, sans-serif;
	letter-spacing: 1px;
	background-color: #3B5998;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 5px;
	float: left;
	width: 100%;
}
.thumbnail .headthumb:hover {
	background-color: #2f4778;
}
.thumbnail .headthumb .fbicon i {
	font-size: 32px;
	line-height: 32px;
}
.thumbnail .captionthumb {
	float: left;
	position: relative;
	padding: 5px;
	margin-top: 10px;
	width: 100%;
}
.thumbnail .captionthumb i {
	font-size: 20px;
}
.thumbnail .captionthumb .linefade {
	float: left;
	position: relative;
	width: 100%;
}
.thumbnail .btn_set {
	float: left;
	position: relative;
	padding: 5px;
	width: 100%;
}
.thumbnail .favthumb {
	font-family: thaisans_neue_lightregular, thaisans_neueregular, sans-serif;
	letter-spacing: 1px;
	padding: 10px;
	background-color: rgb(202, 202, 202);
	color: #fff;
	font-size: 16px;
	border-radius: 0px 0px 15px 15px;
	cursor: pointer;
	width: 50%;
}
.thumbnail .favthumb:hover {
	background-color: rgb(210, 210, 210);
	color: #fff;
}
.thumbnail .blockthumb {
	font-family: thaisans_neue_lightregular, thaisans_neueregular, sans-serif;
	letter-spacing: 1px;
	padding: 10px;
	background-color: #9D1D1F;
	color: #fff;
	font-size: 16px;
	border-radius: 0px 0px 15px 15px;
	cursor: pointer;
	width: 50%;
}
.thumbnail .blockthumb:hover {
	background-color: rgb(210, 210, 210);
	color: #fff;
}
.thumbnail_icondetail {
	padding: 0px;
	text-align: center;
}
.thumbnail_icondetail img {
	width: 80%;
}
.thumbnail_icondetail span {
	padding: 5px;
	color: #5D5D5D;
	font-size: 14px;
}
/* =================  END STYLE 0 , 1 ,2 ======================= */

/* =================  STYLE 3 ======================= */

.grid-wrap {
	clear: both;
	margin: 0 auto;
	padding: 0;
	max-width: 1260px;
}
.grid {
	margin: 30px auto;
	padding: 0;
	list-style: none;
	min-height: 500px;
}
.js .grid {
	background: url(../img/loading.gif) no-repeat 50% 100px;
}
.js .grid.loaded {
	background: none;
}
.grid li {
	display: inline-block;
	overflow: hidden;
	width: 250px;
	text-align: left;
	vertical-align: top;
}
.js .grid li {
	display: none;
	float: left;
}
.js .grid.loaded li {
	display: block;
}
/* Title box */
.title-box .searchtools {
	display: block;
	margin: 7px;
	padding: 20px;
	background: #ddd;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
}
.title-box h2 a {
	display: block;
	font-weight: 900;
}
.title-box h2 a:hover {
	color: #fff;
}
/* Anchor and image */
.grid li > a, .grid li img {
	display: block;
	outline: none;
	border: none;
}
.grid li img {
	width: 100%;
}
.grid li > a {
	position: relative;
	overflow: hidden;
	margin: 12px;
	background: #ddd;
	z-index: 1000;
}
/* Curtain element */
.grid .curtain {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: #4F6090;
}
.grid.swipe-right .curtain {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}
.grid.swipe-down .curtain {
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}
.grid.swipe-rotate .curtain {
	width: 200%;
	height: 200%;
	-webkit-transform: rotate3d(0, 0, 1, 90deg);
	transform: rotate3d(0, 0, 1, 90deg);
	-webkit-transform-origin: top left;
	transform-origin: top left;
}
/* Shadow */
.grid .curtain::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,1);
	content: '';
}
.grid.swipe-right .curtain::after, .grid.swipe-rotate .curtain::after {
	left: -100%;
}
.grid.swipe-down .curtain::after {
	top: -100%;
}
/* Title */
.grid li .contentdetail {
	/*position: absolute;*/
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100%;
	background: #ddd;
	letter-spacing: 1px;
	font-size: 1em;
	-webkit-transition: -webkit-transform 0.2s, color 0.2s;
	transition: transform 0.2s, color 0.2s;
}
.grid li .contentdetail .headthumb {
	font-size: 16px;
	padding: 10px;
	border-bottom: #DEDEDE solid 1px;
	color: #fff;
	float: left;
	width: 100%;
	cursor: pointer;
	background-color: rgb(59, 89, 152);
}
.grid li .contentdetail .headthumb:hover {
	background-color: rgb(31, 51, 95);
	transition: none;
}
.grid li .contentdetail .derailthumb {
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: #D1D1D1 solid 1px;
	float: left;
	width: 100%;
	color: #3F3F3F;
}
.grid li .contentdetail .derailthumb:last-child {
	padding-bottom: 15px;
	border-bottom: none;
	cursor: pointer;
	color: rgb(59, 89, 152);
}
.grid li .contentdetail .derailthumb:last-child:hover {
	color: rgb(31, 51, 95);
}
/* Pseudo element for hover effect */

/*.grid li > a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100.5%;
	height: 100.5%;
	border: 0px solid transparent;
	background: rgba(0,0,0,0);
	content: '';
	-webkit-transition: border-width 0.2s, border-color 0.2s;
	transition: border-width 0.2s, border-color 0.2s;

}*/


.grid li:hover a {
	box-shadow: 0px 0px 2px 3px #B3B3B3;
}
/* Hover effects */
.grid li.shown:hover .contentdetail {
	color: #fff;
	-webkit-transform: translate3d(0, 0px, 0);
	transform: translate3d(0, 0px, 0);
	height: auto;
}
.grid li.shown:hover .btnfavblock {
	-webkit-transform: translate3d(0, 10px, 0);
	transform: translate3d(0, 10px, 0);
}
.grid li.shown:hover > a::before {
	border-width: 14px;
	border-color: #ddd;
}
/* Animations */

/* Swipe right */
.grid.swipe-right li.animate .curtain {
	-webkit-animation: swipeRight 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
	animation: swipeRight 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
 @-webkit-keyframes swipeRight {
 0% {
} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
 50%, 60% {
-webkit-transform: translate3d(0, 0, 0);
}
 100% {
-webkit-transform: translate3d(100%, 0, 0);
}
}
 @keyframes swipeRight {
 0% {
}
 50%, 60% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate(0);
}
 100% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
/* Swipe down */
.grid.swipe-down li.animate .curtain {
	-webkit-animation: swipeDown 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
	animation: swipeDown 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
 @-webkit-keyframes swipeDown {
 0% {
} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
 50%, 60% {
-webkit-transform: translate3d(0, 0, 0);
}
 100% {
-webkit-transform: translate3d(0, 100%, 0);
}
}
 @keyframes swipeDown {
 0% {
}
 50%, 60% {
-webkit-transform: translate(0);
transform: translate(0);
}
 100% {
transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
/* Swipe rotate */
.grid.swipe-rotate li.animate .curtain {
	-webkit-animation: swipeRotate 1.5s ease forwards;
	animation: swipeRotate 1.5s ease forwards;
}
 @-webkit-keyframes swipeRotate {
 0% {
} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
 50%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
}
 100% {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
}
}
 @keyframes swipeRotate {
 0% {
}
 50%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
 100% {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
}
}
/* Shadow */
.grid li.animate .curtain::after {
	-webkit-animation: fadeOut 1.5s ease forwards;
	animation: fadeOut 1.5s ease forwards;
	-webkit-animation-delay: inherit;
	animation-delay: inherit;
}
 @-webkit-keyframes fadeOut {
 0% {
} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */
 50%, 60% {
opacity: 1;
}
 100% {
opacity: 0;
}
}
 @keyframes fadeOut {
 0% {
}
 50%, 60% {
opacity: 1;
}
 100% {
opacity: 0;
}
}
/* Hide image and title and show at half time */
.js .grid li img, .js .grid li h3 {
	visibility: hidden;
}
.grid li.animate img, .grid li.animate h3 {
	-webkit-animation: showMe 1.5s step-end forwards;
	animation: showMe 1.5s step-end forwards;
}
 @-webkit-keyframes showMe {
 from {
visibility: hidden;
}
 60%, 100% {
visibility: visible;
}
}
 @keyframes showMe {
 from {
visibility: hidden;
}
 60%, 100% {
visibility: visible;
}
}
.grid li.shown img, .grid li.shown h3 {
	visibility: visible;
}
.btnfavblock {
	position: absolute;
	top: 0;
	right: 0;
	color: RGBA(255,255,255,0.9);
	font-size: 30px;
	margin-right: 20px;
	text-shadow: 0px 0px 5px rgba(153, 153, 153, 0.42);
}
.btnfavblock i:first-child {
	cursor: pointer;
}
.btnfavblock i:first-child:hover {
	color: #B01C1F;
}
.btnfavblock i:last-child {
	cursor: pointer;
	margin-left: 5px;
}
.btnfavblock i:last-child:hover {
	color: #E018EA;
}
.btnfavblock .block_active {
	color: #B01C1F;
}
.btnfavblock .fav_active {
	color: #E018EA;
}
.updatedetail {
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
}
.haveweb {
	color: #3b5998;
	cursor: pointer;
}
.haveweb:hover {
	color: #304061
}
.gusshowimgpop {
	width: 100%;
	height: 300px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	border: 3px solid #DFDFDF;
	margin-bottom: 30px;
}
.gusshowimgpop .gussimglink {
	width: 100%;
	height: 294px;
	top: 0;
	left: 0px;
	text-align: center;
	background-color: RGBA(0,0,0,0.5);
	transition: none;
	display: none;
}
.gusshowimgpop .gussimglink i {
	margin-top: 115px;
	padding: 20px;
	font-size: 30px;
	background-color: RGBA(255,255,255,0.6);
	border-radius: 50%;
	cursor: pointer;
}
.gusshowimgpop .gussimglink i:hover {
	background-color: RGBA(255,255,255,0.9);
}
.fav_img_link {
	cursor: pointer;
}
.fav_img_link:hover {
	opacity: 0.4;
	filter: alpha(opacity=40);
}
.textalertsearch {
	padding: 15px;
	border: solid 2px #91191B;
	border-radius: 7px;
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	color: #91191B;
}
/* =================  END STYLE 3 ======================= */

/* ================= TUTORIAL STYLE =====================*/
.tutorial_area {
	opacity: 1;
	overflow: scroll;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
	z-index: 9999;
	background: RGBA(255,255,255,0.95);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	color: #393939;
	padding: 30px;
	border:solid 15px #ED8F22;
	border-bottom: 0px;
}
.tutotial_close_btn{
	position: absolute;
	top:10px;
	right:10px;
	color:#9A1518;
	cursor:pointer;
	font-size:18px;
}
.tutotial_close_btn:hover{
	opacity: 0.4;
	filter: alpha(opacity=40);
}

.tutorial_detail{
	text-align:left;
	margin:20px 0px;
	}
.tutorial_area h1 {
	font-size: 30px;
	letter-spacing:0.8px;
}
.tutorial_area p {
	font-size: 20px;
	letter-spacing:0.4px;
}
/* ================= END TUTORIAL STYLE ================= */

/* ================================ ######### BUTTON STYLE  ########## =======-=================================*/

/* ============ BTN BLOCK & FAVOURITE ================== */
.click {
	font-size: 33px;
	color: rgba(0,0,0,.5);
	width: 38px;
	height: 38px;
	margin-bottom: 30px;
	position: relative;
	cursor: pointer;
	float: left;
}
.click span {
	margin-left: 4px;
	margin-top: 3px;
	z-index: 999;
	position: absolute;
	float: left;
}
.click span:hover {
	opacity: 0.8;
}
.click span:active {
	transform: scale(0.93, 0.93) translateY(2px)
}
.ring, .ring2 {
	opacity: 0;
	background: grey;
	width: 1px;
	height: 1px;
	position: absolute;
	top: 19px;
	left: 18px;
	border-radius: 50%;
	cursor: pointer;
	float: left;
}
.active span, .active-2 span {
	color: #F5CC27 !important;
	float: left;
}
.active-2 .ring {
	width: 58px !important;
	height: 58px !important;
	top: -10px !important;
	left: -10px !important;
	position: absolute;
	border-radius: 50%;
	opacity: 1 !important;
	float: left;
}
.active-2 .ring {
	background: #F5CC27 !important;
}
.active-2 .ring2 {
	background: #fff !important;
}
.active-3 .ring2 {
	width: 60px !important;
	height: 60px !important;
	top: -11px !important;
	left: -11px !important;
	position: absolute;
	border-radius: 50%;
	opacity: 1 !important;
	float: left;
}
.info {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	color: grey;
	position: relative;
	top: 30px;
	left: -46px;
	opacity: 0;
	transition: all 0.3s ease;
	float: left;
}
.info-tog {
	color: #F5CC27;
	position: relative;
	top: 45px;
	opacity: 1;
	float: left;
}
.blockclick {
	font-size: 33px;
	color: rgba(0,0,0,.5);
	width: 38px;
	height: 38px;
	margin-bottom: 30px;
	position: relative;
	cursor: pointer;
	float: left;
}
.blockclick span {
	margin-left: 4px;
	margin-top: 3px;
	z-index: 999;
	position: absolute;
	float: right;
}
.blockclick span:hover {
	opacity: 0.8;
}
.blockclick span:active {
	transform: scale(0.93, 0.93) translateY(2px);
}
.blockring, .blockring2 {
	opacity: 0;
	background: grey;
	width: 1px;
	height: 1px;
	position: absolute;
	top: 19px;
	left: 18px;
	border-radius: 50%;
	cursor: pointer;
	float: right;
}
.blockactive span, .blockactive-2 span {
	color: #9D1D1F !important;
}
.blockactive-2 .ring {
	width: 58px !important;
	height: 58px !important;
	top: -10px !important;
	left: -10px !important;
	position: absolute;
	border-radius: 50%;
	opacity: 1 !important;
	float: right;
}
.blockactive-2 .blockring {
	background: #9D1D1F !important;
	float: right;
}
.blockactive-2 .blockring2 {
	background: #fff !important;
}
.blockactive-3 .blockring2 {
	width: 60px !important;
	height: 60px !important;
	top: -11px !important;
	left: -11px !important;
	position: absolute;
	border-radius: 50%;
	opacity: 1 !important;
	float: right;
}
.blockinfo {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	color: grey;
	position: relative;
	top: 30px;
	opacity: 0;
	transition: all 0.3s ease;
	float: right;
}
.blockinfo-tog {
	color: #9D1D1F;
	position: relative;
	top: 45px;
	opacity: 1;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	float: right;
}
/* ============ END BTN BLOCK & FAVOURITE ================== */



.btn-social {
	position: relative;
	padding-left: 44px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
.btn-social>:first-child {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	line-height: 34px;
	font-size: 1.6em;
	text-align: center;
	border-right: 1px solid rgba(0,0,0,0.2)
}
.btn-social.btn-lg {
	padding-left: 61px
}
.btn-social.btn-lg>:first-child {
	line-height: 45px;
	width: 45px;
	font-size: 1.8em
}
.btn-social.btn-sm {
	padding-left: 38px
}
.btn-social.btn-sm>:first-child {
	line-height: 28px;
	width: 28px;
	font-size: 1.4em
}
.btn-social.btn-xs {
	padding-left: 30px
}
.btn-social.btn-xs>:first-child {
	line-height: 20px;
	width: 20px;
	font-size: 1.2em
}
.btn-social-icon {
	position: relative;
	padding-left: 44px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 34px;
	width: 34px;
	padding: 0
}
.btn-social-icon>:first-child {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	line-height: 34px;
	font-size: 1.6em;
	text-align: center;
	border-right: 1px solid rgba(0,0,0,0.2)
}
.btn-social-icon.btn-lg {
	padding-left: 61px
}
.btn-social-icon.btn-lg>:first-child {
	line-height: 45px;
	width: 45px;
	font-size: 1.8em
}
.btn-social-icon.btn-sm {
	padding-left: 38px
}
.btn-social-icon.btn-sm>:first-child {
	line-height: 28px;
	width: 28px;
	font-size: 1.4em
}
.btn-social-icon.btn-xs {
	padding-left: 30px
}
.btn-social-icon.btn-xs>:first-child {
	line-height: 20px;
	width: 20px;
	font-size: 1.2em
}
.btn-social-icon>:first-child {
	border: none;
	text-align: center;
	width: 100% !important
}
.btn-social-icon.btn-lg {
	height: 45px;
	width: 45px;
	padding-left: 0;
	padding-right: 0
}
.btn-social-icon.btn-sm {
	height: 30px;
	width: 30px;
	padding-left: 0;
	padding-right: 0
}
.btn-social-icon.btn-xs {
	height: 22px;
	width: 22px;
	padding-left: 0;
	padding-right: 0
}
.btn-adn {
	color: #fff;
	background-color: #d87a68;
	border-color: rgba(0,0,0,0.2)
}
.btn-adn:hover, .btn-adn:focus, .btn-adn:active, .btn-adn.active, .open>.dropdown-toggle.btn-adn {
	color: #fff;
	background-color: #ce563f;
	border-color: rgba(0,0,0,0.2);
	text-decoration: none;
}
.btn-adn:active, .btn-adn.active, .open>.dropdown-toggle.btn-adn {
	background-image: none
}
.btn-adn.disabled, .btn-adn[disabled], fieldset[disabled] .btn-adn, .btn-adn.disabled:hover, .btn-adn[disabled]:hover, fieldset[disabled] .btn-adn:hover, .btn-adn.disabled:focus, .btn-adn[disabled]:focus, fieldset[disabled] .btn-adn:focus, .btn-adn.disabled:active, .btn-adn[disabled]:active, fieldset[disabled] .btn-adn:active, .btn-adn.disabled.active, .btn-adn[disabled].active, fieldset[disabled] .btn-adn.active {
	background-color: #d87a68;
	border-color: rgba(0,0,0,0.2);
	text-decoration: none;
}
.btn-adn .badge {
	color: #d87a68;
	background-color: #fff
}
.btn-facebook {
	color: #fff;
	background-color: #3b5998;
	border-color: rgba(0,0,0,0.2)
}
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open>.dropdown-toggle.btn-facebook {
	color: #fff;
	background-color: #2d4373;
	border-color: rgba(0,0,0,0.2)
}
.btn-facebook:active, .btn-facebook.active, .open>.dropdown-toggle.btn-facebook {
	background-image: none
}
.btn-facebook.disabled, .btn-facebook[disabled], fieldset[disabled] .btn-facebook, .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled:active, .btn-facebook[disabled]:active, fieldset[disabled] .btn-facebook:active, .btn-facebook.disabled.active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook.active {
	background-color: #3b5998;
	border-color: rgba(0,0,0,0.2)
}
.btn-facebook .badge {
	color: #3b5998;
	background-color: #fff
}
/*============ COLOR =================================== */

.yellowcolor {
	color: #d7b540;
}
.redcolor {
	color: #9D1D1F;
}
.orangecolor {
	color: #EC8E20;
}
