/** <!-- Start ลบส่วน @font-face ออก - ใช้ทดสอบ offline --> **/
@font-face{font-family:'thaisans_neue_blackregular';src:url(font/thaisansneue-black-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_extbdregular';src:url(font/thaisansneue-extrabold-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_ultbdregular';src:url(font/thaisansneue-ultrabold-webfont.ttf) format("truetype"),;font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_sembdregular';src:url(font/thaisansneue-semibold-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neuebold';src:url(font/thaisansneue-bold-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neueregular';src:url(font/thaisansneue-regular-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_lightregular';src:url(font/thaisansneue-light-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_extltregular';src:url(font/thaisansneue-extralight-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'thaisans_neue_ultltregular';src:url(font/thaisansneue-ultralight-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
/** <!-- End ลบส่วน @font-face ออก - ใช้ทดสอบ offline --> **/


/* ===== Start additional ===== */

/** Book Audio **/
#audio-book, #audio-book h2 {
	color: #FFFFFF;
}
#audio-book h2 {
	font-size: 16px;
	letter-spacing: 0;
	margin: 15px 0;
	color: #696969;
}
#audio-book .total-length {
	color: #696969;
	margin-bottom: 20px;
}
/**
 * Audio player
 */
#audio-player {
	/*background: url(audio-book/player/video/player-style/images/equalizer.png) center 50px #067bc7 no-repeat;*/
	background: #eeeeee;
	padding: 15px;
}
#audio-player .playlist ul {
	list-style: none;
}
.media-controls {
	background: #262626;
	padding: 10px 30px;
	margin-bottom: 15px;
	border-radius: 2px;
}
.media-controls .ui-icon {
	text-indent: 0;
	background: none;
}
.media-controls .ui-icon-play {
	background: url(../../audio-book/player/video/player-style/images/icon-play.png) center center no-repeat;
	background-size: auto 14px;
}
.media-controls .ui-icon-pause {
	background: url(../../audio-book/player/video/player-style/images/icon-pause.png) center center no-repeat;
	background-size: auto 14px;
}
.media-controls .ui-icon-volume-on {
	background: url(../../audio-book/player/video/player-style/images/icon-unmute.png) center center no-repeat;
	background-size: contain;
}
.media-controls .ui-icon-volume-off {
	background: url(../../audio-book/player/video/player-style/images/icon-mute.png) center center no-repeat;
	background-size: contain;
}
.media-controls a:hover,
.media-controls a:active,
.media-controls a:focus {
	text-decoration: none;
}
.media-controls .play-pause,
.media-controls .player-time,
.media-controls .timeline-slider,
.media-controls .mute-unmute,
.media-controls .volume-slider {
	display: inline-block;
	vertical-align: middle;
}
.media-controls .play-pause {
	margin-right: 8px;
}
.media-controls .player-time {
	margin-right: 12px;
}
.media-controls .mute-unmute {
	margin: 0 8px 0 15px;
}
.media-controls .timeline-slider {
	width: 65%;
}
.media-controls .volume-slider {
	width: 16%;
}
#audio-player .ui-slider-handle {
	width: 16px;
	height: 16px;
	border-radius: 100%;
	border: none;
	background: #FFFFFF;
	box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
#audio-player .timeline-slider,
#audio-player .progressbar,
#audio-player .ui-progressbar-value,
#audio-player .volume-slider {
	height: 6px;
	border-radius: 10px;
	border: none;
	margin: 0;
}
#audio-player .volume-slider {
	background: #000000;
}
#audio-player .timeline-slider,
#audio-player .progressbar,
#audio-player .ui-progressbar-value {
	background: #525252;
}
#audio-player .timeline-slider .ui-slider-range {
	background: #05b5f3;
	border-radius: 10px;
}
#audio-player .volume-slider .ui-slider-range {
	background: #FFFFFF;
	border-radius: 10px;
}
#audio-player .playlist li {
	/*background: rgba(255, 255, 255, .2);*/
	background: #067bc7;
	margin: 5px 0;
	padding: 6px 10px;
	border-radius: 2px;
	cursor: pointer;
}
#audio-player .playlist li.ui-state-active {
	/*background: #F5F5F5;*/
	background: #59b9f7;
	color: #04416A;
	border: none;
}
@media (max-width: 1199px) {
	.media-controls .timeline-slider {
		width: 60%;
	}
}
@media (max-width: 991px) {
	.media-controls .timeline-slider {
		width: 52%;
	}
}
@media (max-width: 900px) {
	.media-controls .timeline-slider {
		width: 48%;
	}
}
@media (max-width: 767px) {
	.media-controls .timeline-slider {
		width: 62%;
	}
}
@media (max-width: 479px) {
	.media-controls .timeline-slider {
		width: 96%;
		margin-left: 3px !important;
	}
	.media-controls .volume-slider {
		width: 74%;
	}
	.media-controls .mute-unmute {
		margin-left: 4px;
	}
}

/**
 * Accessible Display
 */
#access-view {
	float: right;
    margin-top: -24px;
    margin-right: 310px;
}
@media (max-width: 991px) {
	#access-view {
		margin-right: 90px;
	}
}
@media (max-width: 767px) {
	#access-view {
		display: none;
	}
}
#access-view h2 {
	font-size: 14px;
	color: #FFFFFF;
	margin: 0;
	padding: 0;
	float: left;
}
#access-view ul {
	margin: 0;
	float: left;
}
#access-view ul li {
	list-style: none;
	display: inline;
	font-size: 14px;
	line-height: 14px;
}
#access-view a {
	float: left;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	margin: 0 2px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
#access-view a.fsactive {
	cursor: pointer;
}
#access-view a:after {
	display: inline-block;
}
#access-view a#defaultFont, #access-view a#mediumFont, #access-view a#largeFont {
	background: #E5E5E5;
}
#access-view a#defaultFont:after, #access-view a#mediumFont:after, #access-view a#largeFont:after {
	content: 'ก';
	color: #666666;
}
#access-view a#defaultFont:after {
	font-size: 12px;
	line-height: 16px;
}
#access-view a#mediumFont:after {
	font-size: 14px;
	line-height: 16px;
}
#access-view a#largeFont:after {
	font-size: 16px;
}
#access-view a.white-style,
#access-view a.yellow-style {
	background: #000000;
}
#access-view a.default-style {
	background: #FFFFFF;
}
#access-view a.white-style:after, #access-view a.default-style:after, #access-view a.yellow-style:after {
	content: 'c';
	color: #000000;
}
#access-view a.white-style:after {
	color: #FFFFFF;
}
#access-view a.yellow-style:after {
	color: #FFFF00;
}
/* ===== End additional ===== */

@media (min-width:768px) {
	.mytitle {
		/*text-indent: 6.8em;*/
		margin: 11px 20px;
		float: left;
	}
}

@media (max-width:767px) {
	.hidden-my-div {
		display: none !important;
	}
	#sort-by-menu {
		clear: both;
	}
}

@media (min-width:480px) and (max-width:767px) {
	.main-menu h2 {
		font-size: 25px;
		margin-top: 5px;
		margin-left: 10px;
	}
	.rainbow {
		left: 20px;
	}
	.main-menu-line {
		margin-left: 15px;
	}
	.mytitle {
		/*text-indent: 6.8em;*/
		margin: 11px;
		float: left;
	}
}

@media (max-width:479px) {
	#header .bar {
		display: none;
	}
	.bar-header .box-bow {
		clear: both;
	}
}

@media (min-width:360px) and (max-width:479px) {
	.main-menu h2 {
		font-size: 20px;
		margin-top: 5px;
		margin-left: 10px;
	}
	.rainbow {
		left: 5px;
	}
	.main-menu-line {
		margin-left: 0px;
	}
	.mytitle {
		/*text-indent: 6.8em;*/
		margin: 11px;
		float: left;
	}
}

@media (min-width:320px) and (max-width:359px) {
	.main-menu h2 {
		font-size: 20px;
		margin-top: 5px;
		margin-left: 10px;
	}
	.rainbow {
		left: 10px;
	}
	.main-menu-line {
		margin-left: 10px;
	}
	.mytitle {
		/*text-indent: 6.8em;*/
		margin: 11px;
		float: left;
	}
}


@media (min-width:900px) {
	.small {
		display: none;
	}
}

@media (min-width:768px) and (max-width:900px) {
	.logo_image {
		height: 128px;
	}
	.logo-image-header {
		top: 0px;
	}
	.bar {
		display: none;
	}
	.small {
		display: none;
	}
}

@media (min-width:480px) and (max-width:767px) {
	.text-slider-header-top {
		visibility: hidden;
	}
	.logo_image {
		height: 60px;
	}
	#keyword {
		/*width: 100% !important;*/
		margin-left: 10px;
	}
	.row-red-top {
		height: 10px;
	}
	.bar {
		display: none;
	}
	.big {
		display: none;
	}
	#search-box {
		max-width: 100% !important;
		/*float: right !important;*/
		width: 500px !important;
		padding: 10px 10px 0px 10px!important;
	}
}

@media (min-width:360px) and (max-width:479px) {
	.text-slider-header-top {
		visibility: hidden;
	}
	.logo_image {
		height: 55px;
	}
	#keyword {
		width: 100% !important;/*margin-left: 10px;*/
	}
	.row-red-top {
		height: 10px;
	}
	.big {
		display: none;
	}
	#search-box {
		max-width: 100% !important;
		/*float: right !important;*/
		width: 500px !important;
		padding: 10px 10px 0px 10px!important;
	}
}

@media (min-width:320px) and (max-width:359px) {
	.text-slider-header-top {
		visibility: hidden;
	}
	.logo_image {
		height: 50px;
	}
	#keyword {
		width: 100% !important;
		margin-left: 10px;
	}
	.row-red-top {
		height: 10px;
	}
	.bar {
		display: none;
	}
	.big {
		display: none;
	}
	#search-box {
		max-width: 100% !important;
		/*float: right !important;*/
		width: 500px !important;
		padding: 10px 10px 0px 10px!important;
	}
}

@media (max-width:358px) {
	.text-slider-header-top {
		visibility: hidden;
	}
	.logo_image {
		height: 50px;
	}
	#keyword {
		width: 100% !important;
		margin-left: 10px;
	}
	.row-red-top {
		height: 10px;
	}
	.bar {
		display: none;
	}
	.big {
		display: none;
	}
	#search-box {
		max-width: 100% !important;
		/*float: right !important;*/
		width: 500px !important;
		padding: 10px 10px 0px 10px!important;
	}
}

.mySlides {
	width: 100%;
}
.slide-animation {
	animation: fading 3s infinite;
}
.w3-display-container {
	position: relative;
	display: block;
}
.w3-display-content {
	position: relative;
}
.w3-display-left {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	ms-transform: translate(-0%, -50%);
}
.w3-display-right {
	position: absolute;
	top: 50%;
	right: 0%;
	transform: translate(0%, -50%);
	ms-transform: translate(0%, -50%);
}
.w3-btn-floating {
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	text-align: center;
	color: #fff;
	background-color: #000;
	/*position: relative;*/
	overflow: hidden;
	z-index: 1;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 24px;
}
.w3-hover-dark-grey:hover {
	color: #fff !important;
	background-color: #616161!important;
	text-decoration: none;
}

#footerWrapper {
	font-family: 'thaisans_neueregular', sans-serif;
	background-color: #920728;
}
footer {
	padding: 30px 0px !important;
}
/*.ul-footer {
	list-style: circle !important;
}*/
.ul-footer-social {
	width: 120px;
	height: auto;
	background: #8fcef6;
	border-radius: 20px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.ul-footer-social img {
	width: 40px;
	height: auto;
}


/* ===== Page Book Detail ===== */
.review-title .name {
	 color: #FAA732;
}
.review-title {
	border-left: 6px solid #FAA732;
}
.btn-success {
	background-color: #fff;
	border-color: #000;
	color: #000;
}
.btn-success:hover {
	background-color: #FAA732;
	border-color: #fff;
	color: #fff;
}
.product-sub-title {
	color: #FAA732;
	font-weight: bold;
}
.product-title i:before {
	color: #FAA732;
}
.btn-danger {
	background-color: #FAA732;
	border-color: #FAA732;
	color: #FFFFFF;
}
.status-box .status-box-detail {
	content: "";
	color: #FAA732;
}
.marc-title {
	color: #FAA732;
}

@media (min-width:360px) and (max-width:479px) {
	.product-sub-title-big {
		color: #FAA732 !important;
	}
	.product-title {
		font-size: 20px;
	}
	div.container.status-box {
		font-size: 14px;
		color: #FAA732;
		font-weight: bold;
	}
}


/* ===== Page Book List ===== */
hr {
	color: #000000;
}


@media (min-width:901px) and (max-width:1024px) {
	.head-image {
		position: absolute;
		clip: rect(0,500px,25px,0);
	}
}

@media (min-width:768px) and (max-width:900px) {
	.container {
		width: 700px;
	}
	.bg-gray-box {
		height: 180px;
		width: 335px;
	}
	.shelf-under-book-big {
		margin-top: -40px;
	}
}

@media (min-width:480px) and (max-width:767px) {
	.container {
		width: 400px;
	}
	.img-head-news img {
		width: 350px;
		height: auto;
	}
	.custom-content-home-box .vdo-item, .custom-content-home-box .book-item {
		background: none;
		width: 450px;
	}
	.custom-home-box-seeall h3 {
		font-size: 16px;
	}
	.boxContent {
		padding: 10px;
	}
	.imgWrapper {
		width: 150px;
		height: 200px;
	}
	.imgWrapper img {
		max-width: 100%;
		max-height: 100%;
		border: 1px solid #000;
		position: absolute;
		left: 0px;
		bottom: 2px;
	}
	.shelf-under-book {
		margin-top: -56px;
	}
	.vdoWrapper {
		width: 250px;
		height: 180px;
	}
}

@media (min-width:360px) and (max-width:479px) {
	.container {
		width: 350px;
	}
	.img-head-news img {
		width: 300px;
		height: auto;
	}
	.bg-gray-box {
		width: 350px;
	}
	.custom-content-home-box .vdo-item, .custom-content-home-box .book-item {
		background: none;
		width: 350px;
	}
	.custom-home-box-seeall h3 {
		font-size: 14px;
		margin-top: 5px;
	}
	.boxContent {
		padding: 10px;
	}
	.imgWrapper {
		width: 130px;
		height: 180px;
	}
	.imgWrapper img {
		max-width: 100%;
		max-height: 100%;
		border: 1px solid #000;
		position: absolute;
		left: 0px;
		bottom: 2px;
	}
	.shelf-under-book {
		margin-top: -56px;
	}
	.vdoWrapper {
		width: 200px;
		height: 150px;
	}
}

@media (min-width:320px) and (max-width:359px) {
	.container {
		width: 300px;
	}
	.img-head-news img {
		width: 250px;
		height: auto;
	}
	.bg-gray-box {
		width: 300px;
	}
	.custom-content-home-box .vdo-item, .custom-content-home-box .book-item {
		background: none;
		width: 300px;
	}
	.custom-home-box-seeall h3 {
		font-size: 12px;
		margin-top: 7px;
	}
	.boxContent {
		padding: 10px;
	}
	.imgWrapper {
		width: 100px;
		height: 150px;
	}
	.imgWrapper img {
		max-width: 100%;
		max-height: 100%;
		border: 1px solid #000;
		position: absolute;
		left: 0px;
		bottom: 2px;
	}
	.shelf-under-book {
		margin-top: -56px;
	}
	.vdoWrapper {
		width: 180px;
		height: 150px;
	}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  {
    .ldBar.label-center {
    width: 37% !important;
    height: auto;
    background: transparent;
    position: absolute;
    left: 38px !important;
    bottom: 6px;
    vertical-align: middle;
    z-index: 1;
}

}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
 {
 	.boxContent {
    padding-bottom: 11px;
}
.ldBar.label-center {
    width: 37% !important;
    height: auto;
    background: transparent;
    position: absolute;
    left:30px !important;
    bottom: 6px;
    vertical-align: middle;
    z-index: 1;
}
.ls-s-1.animated.fadeInLeftBig.slide-delay-2.YellowText {
    position: absolute;
    top: 1px;
    right: 2px;
    padding: 30px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.5);
    font-weight: 300;
    width: auto;
    height: auto;
    font-size: 14px;
    border-width: 0px;
    opacity: 1;
    margin-left: 50px;
    margin-top: 40px;
    display: block;
    visibility: visible;
}
.w3-display-container {
    position: relative;
    display: block;
    top: 0px;
}
.w3-content.w3-display-container {
    white-space: normal;
    overflow: hidden;
}
.navbar {
    background-color: #920728 !important;
    /*border-bottom: 3px solid #FF9800;*/
}
.px-4 {
     padding-left: 0em;
    padding-right: 2em;
}
.border-shlf-home {
    margin-top: 5px;
    padding-left: 0px;
    padding-right: 10px;
}
section#content {
    width: 100%;
    overflow: hidden;
}
.logo_image {
    height: 83px !important;
}
.description {
    height: 82px;
    overflow: auto;
    color: #000000;
}
.col-lg-12.col-md-12.review-form.mb20 {
    width: 100%;
}
.review-form .avatar img {
    width: 70px;
    margin-bottom: 10px;
}
.col-lg-12.review-form.mb20 {
    width: 100%;
}
.avatar.col-lg-2 {
    width: 10%;
}
.form.col-lg-10 {
    width: 90%;
}
.col-lg-12.review-form.mb20 {
    display: -webkit-inline-box;
}
.review-form textarea {
    width: 100%;
    height: 152px;
    border: 1px solid #CCCCCC;
    margin-left: 10px;
}
.imgWrapper {
    margin-bottom: 0px;
}
#sidebar2 {
    display: inline-block !important;
}
}