@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* --------------------------------

Primary style
/*Css for Style 1*/

/**
 * Table of Contents:
01. Import fonts
02. Import icon
03. Humberger menu
04. Pagging page & button
05. twitter message
06. Search form
07. Header
08. Hot author
09. Title box
10. One book hightlight
11. Slider product
12. Promotion
13. Feature section
14. Testimonial
15. Blog section
16. Slogan text
17. List categories
18. Subcriber
19. List service
20. Home 7
21. Link parthner
22. Blog page
23. Author page
24. For contact form
25. Store page
26. Breadthums
27. Page about
28. 404 page
29. Landing page
30. footer
31. For detail media product

------------------------*/


/*
01. Import fonts
 */
@import '../partials/fonts'; //include fon

 /*
 02. Import icon
  */
@import '../partials/be_icon'; //Beautheme Icon



body{
	font-family: $Ti;
	font-size: $body-size;
	overflow-x:hidden!important;
	max-width: 100%;
	position: relative;
	@include font-smoothing;
	left: 0;
	-webkit-transition: all 0.3s ease-in-out!important;
	-moz-transition: all 0.3s ease-in-out!important;
	-o-transition: all 0.3s ease-in-out!important;
	transition: all 0.3s ease-in-out!important;
	.vc_row{
		margin-left: 0px!important;
		margin-right: 0px!important;
	}
	@include RP(S){
		font-size: 13px;
	}
}

//Reset pading Visualcomposer
.wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .last_toggle_el_margin, .wpb_button{
	margin-bottom: 0px!important;
}
.vc_col-xs-1, .vc_col-sm-1, .vc_col-md-1, .vc_col-lg-1, .vc_col-xs-2, .vc_col-sm-2, .vc_col-md-2, .vc_col-lg-2, .vc_col-xs-3, .vc_col-sm-3, .vc_col-md-3, .vc_col-lg-3, .vc_col-xs-4, .vc_col-sm-4, .vc_col-md-4, .vc_col-lg-4, .vc_col-xs-5, .vc_col-sm-5, .vc_col-md-5, .vc_col-lg-5, .vc_col-xs-6, .vc_col-sm-6, .vc_col-md-6, .vc_col-lg-6, .vc_col-xs-7, .vc_col-sm-7, .vc_col-md-7, .vc_col-lg-7, .vc_col-xs-8, .vc_col-sm-8, .vc_col-md-8, .vc_col-lg-8, .vc_col-xs-9, .vc_col-sm-9, .vc_col-md-9, .vc_col-lg-9, .vc_col-xs-10, .vc_col-sm-10, .vc_col-md-10, .vc_col-lg-10, .vc_col-xs-11, .vc_col-sm-11, .vc_col-md-11, .vc_col-lg-11, .vc_col-xs-12, .vc_col-sm-12, .vc_col-md-12, .vc_col-lg-12{
	padding-left: 0px!important;
	padding-right: 0px!important;
}

//Columnd vissual
// .wpb_column{
// 	@include RP(S){
// 		margin-bottom: 50px;
// 	}
// }
.beau-hidden{
	display: none;
}
.bg-fixed, .bg-fix{
	@include MQ(XL){
		background-attachment: fixed!important;
	}
}

// @include font-smoothing;
.container{
	// @include RP(M){
	// 	margin-left: 0px;
	// 	margin-right: 0px;
	// 	position: relative;
	// 	@include center(x);
	// }
	@include RP(S){
		width: 100%!important;
	}
	&.contain_default{
		padding-top: 40px;
	}
}
.custom-dropdown {
	display: none!important;
}

.is-visible {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
     -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}


.is-fixed {
    position: fixed!important;
    z-index: 999;
    top: 0px;
    @include transition;

}
.is-static{
	position: static!important;
	@include transition;
}
#clear-scroll{
	float: left;
	width: 100%;
}

/*
03. Humberger menu
 */
.button-humberger-menu{
	display: none;
	float: right;
	border: none;
	color: $Black;
	width: 50px;
	height: 50px;
	// background: red;
	background: transparent;
	// margin-left: 10px;
	@include font-size(16px);
	@include center(y);
	position: relative;
	@include RP(M){
		display: block;
		float:right;
		position: relative;
		z-index: 99999;
	}
}

a{
	color: $black_04;
	&:hover{
		color: $active-color;
	}
}
*{
	&:focus{
		outline: none;
		outline-style: none;
	}
}
img{
	@include RP(S){
		max-width: 100%;
	}
}
.subcribe-input{
	@include  placeholder{
		color: #fff!important;
	}
}
.container{
	@include RP(S){
		width: 100%!important;
		padding-left: 15px;
		padding-right: 15px;
	}
}

#beau-go-top{
	display: none;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	@include font-size(20px);
	color: #252525;
	position: fixed;
	left: 95%;
	top: 89%;
	border-radius: 50%;
	background: $White;
	box-shadow: 1px 1px 10px $black_03;
	cursor: pointer;
	// @include transition;
	&:hover{
		box-shadow: 1px 1px 10px $black_08;
	}
	z-index: 9999999;
	// @include RP(M){
		// display: none!important;
	// }
	@include RP(S){
		left: 80%;
	}
}

//For pagging
/*
04. Pagging page & button
 */
.pagging-contain{
	border-top: 1px dashed rgba(102, 102, 102, 0.2);
	padding-top: 35px;
}

.pagging{
	width: 100%;
	float: left;
	text-align: center;
	padding-bottom: 100px;
    margin-top: 30px;
	ul{
		list-style: none;
		display: inline-block;
		padding-left: 0;
		margin-bottom: 0;
		li{
			display: inline;
			text-transform: uppercase;
			margin-right: 5px;
			@include RP(S){
				float: left;
				margin-bottom: 10px;
			}
			.page-numbers{
				display: inline-block;
				color: $black_05;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				box-sizing: border-box;
				font-family: $La;
				font-weight: $Bold;
				&:hover{
					line-height: 26px;
					border: 2px solid $black_02;
					// background: transparent!important;
					// color: $black_05!important;
				}
				&.current{
					background: $active-color;
					color: $White;
					&:hover{
						border-color: $active-color;
					}
				}
				&.prev, &.next{
					width: auto!important;
					&:hover{
						line-height: 30px;
						border:none;
						color: $active-color!important;
					}
				}
				&.prev{
					margin-right: 15px;
				}
				&.next{
					margin-left: 15px;
				}
			}
			&.current{
				&:hover{
					background: none;
					color: $active-color;
				}
			}
		}
	}
}

//Book kits
.book-button, .submit{
	// float: left;
	// display: block;
	border-radius: 50px;
	border:2px;
	border-style: solid;
	text-transform: uppercase;
	background: transparent;
	font-family: $La;
	font-weight: $Heavy;
	@include font-size(16px);
	box-sizing:border-box;
	// padding: 8px 30px 8px 30px;
	// line-height: 30px;
	padding-left: 35px;
	padding-right: 35px;
	height: 40px;
	// line-height: 36px;
	// line-height: 40px;
	.fa{
		margin-right: 10px;
	}
	&:hover{
		background: $active-color;
		border-color: $active-color;
		color: $White;
	}
}
a{
	&.book-button{
		line-height: 37px;
		float: left;
	}
	&.book-button-active-bg{
		background: $active-color!important;
		color: $White!important;
		border-color: $active-color!important;

	}
}
.text-underline{
	text-decoration: underline!important;
}
.no-border{
	border:none!important;
}
.no-left{
	left: 0px!important;
	margin-left: 0px!important;
}
.no-bg{
	background: none!important;
}

.book-button-active{
	border-color: rgba($active-color, 0.9);
	color: $active-color;
	&:hover{
		background: $active-color;
		border-color: $active-color;
		color: $White;
	}
}


.book-button-small, .submit{
	float: left;
	padding: 2px 30px!important;
	height: 34px;
	// line-height: 27px;
	font-weight: $Bold;
	@include font-size(12px);

}

.book-button-line{
	float: left;
	height: 30px;
	margin-top: 5px;
	line-height: 35px;
	text-transform: uppercase;
	font-family: $La;
	font-weight: $Bold;
	color: $black_03;
	@include font-size(16px);
	border-bottom: 2px solid $black_005;
	padding-bottom: 5px;
	&:hover{
		border-color: rgba($active-color, 0.3);
	}
}


/*
05. twitter message
*/
.button-twitter{
	border-color: $black_01;
	font-weight: $Bold;
	@include font-size(12px);
	color: $black_03;
	padding: 3px 15px;
	&:hover{
		background: $active-color;
		border-color: $active-color;
		color: $White!important;
	}
}


.list-social{
	list-style: none;
	float: left;
	padding-left: 0px;
	margin-bottom: 0px;
	border-top: 1px dashed $black_01;
	//border-bottom: 1px dashed $black_01;
	li{
		float: left;
		margin: 8px;
		&:first-child{
			margin-left: 0px;
		}
		&:last-child{
			margin-right: 0px;
		}
		a{
			&:hover{
				color: $active-color;
			}
		}
	}
}

.btn-prev{
	position: absolute;
	@include center(y);
	width: 20px;
	height: 40px;
	background: url(../images/nav-slider.png) no-repeat;
	z-index: 999;
	cursor: pointer;
	left: -40px;
	background-position: left center;
	@include RP(MD){
		left: -20px;
	}
	@include RP(S){
		display: none;
	}
	&.btn-white{
		background: url(../images/nav-slider-white.png) no-repeat;
		opacity: 0.2;
		background-position: left center;
		&:hover{
			opacity: 1;
		}
	}
}
.btn-next{
	position: absolute;
	@include center(y);
	width: 20px;
	height: 40px;
	background: url(../images/nav-slider.png) no-repeat;
	z-index: 999;
	cursor: pointer;
	right: -40px;
	background-position: right center;
	@include RP(MD){
		right: -25px;
	}
	@include RP(S){
		display: none;
	}
	&.btn-white{
		background: url(../images/nav-slider-white.png) no-repeat;
		opacity: 0.2;
		background-position: right center;
		&:hover{
			opacity: 1;
		}
	}
}



//Custom dropdown
.book-center{
	position: relative;
	@include center(x);
	&:before{
		position: relative;
		@include center(x);
	}
	&:after{
		position: relative;
		@include center(x);
	}
}

.book-dropdown{
	line-height: 30px;
	.pull-left{
		line-height: 30px;
		margin-right: 10px;
		font-family: $La;
		color: $black_03;
	}
}

.dropdown-border{
	border-radius: 50px;
	float: left;
	border:2px solid $black_01;
	padding: 1px 10px;
	.sbHolder{
		width: 130px;
		.sbToggle{
			top: 4px;
		}
	}
}


.control-grid{
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
	position: relative;
	padding-bottom: 0px;
	padding-top: 5px;
	// @include center(y);
	li{
		float: left;
		padding:3px 10px;
		border-right: 1px solid $black_01;
		cursor: pointer;
		color: $black_03;
		i{
			@include font-size(16px);
		}
		&:last-child{
			border: none;
		}
		&:hover, &.control-active{
			i{
				color: $active-color;
			}
		}
	}
}




/*
06. Search form
 */
// Form search
.book-search-head{
	float: left;
	width: 330px;
	border: 2px solid $black_005;
	padding: 6px 10px 6px;
	border-radius: 150px;
	margin-top: 8px;
	position: relative;
	color: $black_07;
	font-family: $Ti;
	@include RP(MD){
		width: 315px;
	}
	@include RP(S){
		width: 300px;
	}
	.fa{
		position: absolute;
		left: 15px;
		color: $black_04;
		// @include center(y);
		top: 30%;
		@include font-size(14px);
		// -webkit-transform: rotateY(180deg); /* Safari */
  //   	transform: rotateY(180deg);
	}
	input[type="text"]{
		border: none;
		height: 22px;
		width: 216px;
		background: transparent;
		box-sizing: border-box;
		padding-left: 25px;
		font-style: italic;
		overflow: hidden;
		font-weight: normal;
		border-right: 1px solid $black_005;
		letter-spacing: 0.75px;
		@include font-size(14px);
		@include placeholder{
			color: $black_03;
		}
		@include RP(MD){
			width: 195px;
		}
		@include RP(S){
			width: 66%;
		}
	}
}


//Css for header page



/*
07. Header
 */
header{
	float: left;
	width: 100%;
     .form-search{
        @include RP(S){
            width: 100%;
            position: relative;
            @include center(x);
            z-index: 999;
            form{
                width: 100%;
            }
        }
    }
	&.header-one{
		height: 190px;
		background: $White;
		border-bottom: 1px solid $black_02;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		// position: relative;
		&.stick{
			background:#fff;
			position:fixed;
			height:80px;
			top: 0;
			z-index: 9999;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			@include RP(S){
				height: 60px;
			}
			.humberger-button{
				@include RP(MD){
					top: 38px;
				}
				@include RP(S){
					top: 30px;
				}
			}
			.header-top{
				height: 0;
    			padding-top: 0;
				.pull-left{
					display: none;
				}
				.pull-right{
					display: none;
				}
				.beau-logo{
					position: relative;
				    left: -35px;
				    bottom: -23px;
				    max-width: 200px;
				    -webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
				    @include MQ(SL){
				    	left: -90px;
				    }
				    @include RP(MD){
				    	@include center(x);
				    }
				    @include RP(M){
				    	bottom: 0;
    					margin-top: 25px;
				    }
				    @include RP(S){
				    	margin-top: -17px;
    					left: 57%;
				    }
				    img{
				    	max-width: 120px;
				    }
				}
			}
			.clearfix{
				display: none;
			}
			.header-bottom{
				top: 0;
				.woocomerce-cart{
					top: 13px;
					.be{
						font-size: 2.107692308em;
					}
				}
			}
		}
		.header-top{
			float: left;
			width: 100%;
			height: 115px;
			padding-top: 55px;
			@include RP(M){
				padding-top: 80px;
			}
			.pull-left{
				@include MQ(MD){
					position: relative;
				    margin-top: -10px;
				    left: 45px;
				}
			}
		}
		.humberger-button{
			// line-height: 60px;
			display: none;
			float: left;
			padding-right: 20px;
			margin-right: 16px;
			border-right: 1px solid $black_01;
			@include font-size(20px);
			@include RP(MD){
				position: absolute;
    			top: 70px;
    			display: block;
    			border-right: none;
			}
			@include RP(M){
				top: 40px;
    			left: 30px;
			}
			@include RP(S){
				position: relative;
				top: 72px;
				left: 10px;
			}
			button{
				float: left;
				width: 30px;
				height: 30px;
				padding: 0px;
				background: transparent;
				border:none;
				position: relative;
				@include center(y);
				i{
					float: left;
					width: 100%;
					height: 2px;
					background: $black_03;
					margin: 3px 0px;
					@include transition(fast);
				}
				&:hover{
					i{
						background: $active-color;
						// margin: 0;
					}
				}
			}
		}
	}
	&.header-two{
		&.stick{
			background:#fff;
			position:fixed;
			height:100px;
			top: 0;
			z-index: 9999;
			border-bottom: 1px solid rgba(0,0,0,0.2);
			.header-top{
				display: none;
			}
			.clearfix{
				display: none;
			}
			.header-bottom{
				top: 10px;
				border-bottom: none;
				.full-height{
					height: 80px;
				}
				.woocomerce-cart{
					top: 15px;
					.be{
						font-size: 2.107692308em;
					}
				}
			}
		}
		.header-top{
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: #252420;
			.social-list{
				li{
					&:last-child{
						margin-right: 0px;
					}
				}
			}
		}
		.header-bottom{
			height: 140px;
			float: left;
			width: 100%;
			position: relative;
			z-index: 1;
			border-bottom: 1px solid #b2b2b2;
			@include RP(M){
				height: 180px;
			}

			.full-height{
				height: 140px;
			}
			.humberger-menu-logo{
				float: left;
				position: absolute;
				left: -75px;
				height: 60px;
				width: auto;
				@include center(y);
				@include RP(MD){
					left: 0;
				}
				@include RP(M){
					left: 60px;
				}
				@include RP(S){
					width: 75%;
				}
				.humberger-button{
					// line-height: 60px;
					float: left;
					height: 60px;
					padding-right: 20px;
					margin-right: 16px;
					border-right: 1px solid $black_01;
					@include font-size(20px);
					button{
						float: left;
						width: 30px;
						height: 30px;
						padding: 0px;
						background: transparent;
						border:none;
						position: relative;
						@include center(y);
						i{
							float: left;
							width: 100%;
							height: 2px;
							background: $black_03;
							margin: 3px 0px;
							@include transition(fast);
						}
						&:hover{
							i{
								background: $active-color;
								// margin: 0;
							}
						}
					}
				}
				.book-logo{
					height: 60px;
					position: relative;
					float: left;
					width: 142px;
					@include RP(S){
						@include center(x);
					}
					img{
						max-height: 60px;
						position: absolute;
						float: left;
						@include center(y);
					}
				}
			}
		}
		.search-navigation{
			float: left;
			width: auto;
			height: 46px;
			position: relative;
			// left: -50px;
			@include center(y);
			.search{
				float: left;
				height: auto;
				form{
					width: 520px;
					height: 46px;
					background: rgba(#e9e9e9, 0.7);
					border-radius: 3px;
					@include RP(MD){
						width: 440px;
					}
					@include RP(M){
						width: 350px;
					}
					.sbHolder{
						float: left;
						width: 50px;
						height: 46px;
						padding-right: 50px;
						box-sizing: border-box;
						background: #dadada;
						border-radius: 3px;
						.sbToggle{
							margin-top: 7px;
						}
						.sbSelector{
							margin-top: 13px;
						}
						.sbOptions{
							top: 46px!important;
							width: 150px!important;
							left: 0px!important;
						}
					}
					input{
						border:none;
						background: transparent;
						height: 46px;
						float: left;
						width: 420px;
						border-top: 1px dashed $black_01;
						border-bottom: 1px dashed $black_01;
						text-indent: 20px;
						font-family: $Ti;
						font-weight: $Light;
						@include font-size(18px);
						color: $black_07;
						@include placeholder{
							font-style: italic;
						}
						@include RP(MD){
							width: 340px;
						}
						@include RP(M){
							width: 250px;
						}
					}
					button{
						border: none;
						background: $active-color;
						color: $White;
						width: 50px;
						height: 47px;
						margin: -1px;
						border-radius: 3px;
						@include font-size(18px);
						&:hover{
							background: $black_08;
						}
					}
				}
			}
		}

		.search-navigation-full{
			width: 665px;
			height: 46px;
			background: rgba(#e9e9e9, 0.2);
			position: relative;
			@include center(xy);
			@include RP(MD){
				width: 490px;
			}
			@include RP(S){
				width: 100%;
				margin-top: -75px;
			}
			.search{
				float: left;
				height: auto;
				@include RP(S){
					@include center(x);
					position: relative;
				}
				form{
					width: 100%;
					height: 46px;
					background: rgba(#e9e9e9, 0.7);
					border-radius: 3px;
					.felement{
						border: 1px dashed $black_01;
						float: left;
						height: 46px;
						box-sizing:border-box;
						border-radius: 3px;
						border-right: none;
						position: relative;
						&:hover, &.solid-border{
							border: 1px solid $black_01;
							border-right: none;
						}
						&:before{
							font-family: $Aw;
							content: "\f002";
							@include font-size (18px);
							position: absolute;
							left: 20px;
							// @include center(y);
							top:12px;
							color:$black_03;
							transform: rotateY(180deg);
							-webkit-transform: rotateY(180deg);
							-moz-transform: rotateY(180deg);
							-ms-transform: rotateY(180deg);
							-o-transform: rotateY(180deg);
							@include RP(S){
								left: 5px;
							}
						}

					}
					.sbHolder{
						float: left;
						width: 110px;
						height: 46px;
						padding-right: 50px;
						box-sizing: border-box;
						// background: rgba(#e9e9e9, 0.7);
						background: transparent;
						margin-right: 15px;
						border-radius: 3px;
						position: relative;
						@include RP(S){
							width: 75px;
						}
						&:before{
							content: "";
							border-right: 1px solid $black_01;
							width: 1px;
							position: absolute;
							left: 0px;
							height: 30px;
							@include center(y);
						}
						.sbToggle{
							margin-top: 13px;
							@include RP(S){
								margin-right: -17px;
							}
						}
						.sbSelector{
							margin-top: 13px;
						}
						.sbOptions{
							top: 44px!important;
							width: 150px!important;
							left: -15px!important;
						}
					}
					input{
						border:none;
						background: transparent;
						height: 45px;
						float: left;
						width: 425px;
						padding-left: 50px;
						text-indent: 20px;
						font-family: $Ti;
						font-weight: $Light;
						@include font-size(18px);
						color: $black_07;
						@include placeholder{
							font-style: italic;
						}
						@include RP(MD){
							width: 245px;
						}
						@include RP(S){
							width: 150px;
							font-size: 1em;
							padding-left: 10px;
						}
					}
					button{
						border: none;
						background: $active-color;
						color: $White;
						width: 113px;
						height: 46px;
						border-radius: 3px;
						@include font-size(18px);
						text-transform: uppercase;
						font-family: $La;
						font-weight: 800;
						text-align: center;
						line-height: 42px;
						letter-spacing: 0.25px;
						@include RP(S){
							width: 60px;
							font-size: 0.9em;
						}
						&:hover{
							background: $black_08;
						}
					}
				}
			}
		}

		.nav-right{
			float: right;
			width: auto;
			height: 60px;
			position: relative;
			padding-right: 40px;
			@include center(y);
			@include RP(M){
				top: 0;
			}
			.list-right-nav{
				float: left;
				list-style: none;
				padding-left: 0px;
				margin-bottom: 0px;
				li{
					float: left;
					margin-right: 25px;
					text-align: center;
					height: 60px;
					position: relative;
					font-family: $Ti;
					line-height: 21px;
					color: $black_09;
					@include font-size(14px);
					margin-top: 10px;
					&:hover{
						color: $active-color!important;
						a, &:before, &:after{
							color: $active-color!important;
						}
					}
					a{
						font-weight: $Bold;
						display: inline-block;
						vertical-align: bottom;
					}
					&:first-child{
						&:before{
							content: "\f023";
							font-family: $Aw;
							position: absolute;
							top: 0px;
							left: 0px;
							color: $black_03;
						}
					}
					&:last-child{
						text-align: left;
						&:before{
							content: "\f08a";
							font-family: $Aw;
							float: left;
							width: 100%;
							height: 20px;
							text-align: left;
							color: $black_03;
						}
					}
				}
			}
			.woocomerce-cart{
				top: 15px;
				float: right;
				position: absolute;
				&:before{
					height: 45px;
				}
			}
		}
	}
}
/*Stick menu with search*/
.menu-fix-all {
    .container{
        position: relative;
    }
}
.search-cart{
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: 999;
    width: 180px;
    .search-form{
        position: relative;
        right: -90px;
        i{
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 11;
        }
    }
    form{
        float: left;
        position: relative;
        top: 3px;
        padding-right: 10px;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 50px;
        width: 35px;
        height: 35px;
        z-index: 999;
        background: #fff;
        @include transition(fast);
        &.focus-class{
            width: 130px;
            margin-left: -95px;
        }

    }
    input{
        width: 100%;
        border: none;
        width: 15px;
        position: absolute;
        top: 6px;
        z-index: 33;
        background: transparent;
        @include transition;
        &:focus{
            width: 120px;
            right: 0px;
            @include transition(fast);
        }

    }
    .cart-icon{
        position: relative;
        width: 50px;
        float: right;
        top: 5px;
        i{
            @include font-size(30px);
        }
        p{
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            top:-5px;
            right: 2px;
            border-radius: 50px;
            background: $active-color;
            color: #fff;
            text-align: center;
        }
    }
}
/*End search sticky*/


.beau-logo{
	position: absolute;
	@include center(x);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	@include RP(M){
		margin-top: -55px;
	}
}

#menu-top{
	float: right;
	width: auto;
	height: 35px;
	line-height: 35px;
	&.right-nav{
		.small-nav{
			list-style: none;
			float: right;
			padding-left: 0px;
			li{
				float: left;
				margin-right: 12px;
				margin-left: 12px;
				font-weight: bold;
				position: relative;
				color: $black_04!important;
				&:hover{
					color: $Black;
				}
				&:after{
					content: "";
					border-right: 1px solid $black_01;
					position: absolute;
					right: -15px;
					height: 15px;
					width: 1px;
					@include center(y);
				}
				&:last-child{
					margin-right: 0px;
					border: none;
					&:after{
						border-right: 0px;
					}
				}
				&:nth-child(3){
					&:before{
						font-family: $Aw;
						content: "\f08a";
						margin-right: 5px;
						color: $black_04!important;
					}
				}
				&:first-child{
					margin-left: 0px;
				}
				a{
					color: $black_04!important;
					&:hover{
						color: $black_08!important;
					}
				}
				&:hover{
					&:before{
						color: $black_08!important;
					}
				}
			}
		}
	}
}

.header-bottom{
	float: left;
	width: 100%;
	height: 75px;

	&.stick{
		background:#fff;
		position:fixed;
		box-shadow: 0px 0px 6px #DFDFDF;
		height:100px;
		top: 0;
		z-index: 9;
	}
}
#main-nav{
	float: left;
	width: 100%;
	height: auto;
	@include center(y);
	position: relative;
	// margin-top: 18px;
	z-index: 9999;
	@include RP(T){
		display: none;
	}
	.woocomerce-cart{
		position: absolute;
	}
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{
	font-family: $La;
}
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{
	font-family: $La;
}
a[title~="title-sub"] {
	position: relative!important;
	margin-bottom: 30px!important;
	&.mega-menu-link{
		&:after{
			content: '';
		    border-bottom: 2px solid rgba(255,255,255,0.7);
		    width: 100%;
		    position: absolute;
		    height: 1px;
		    bottom: -13px;
		    left: 0;
		}
	}
}
#main-navigation,#mega-menu-wrap-main-menu{
	list-style: none;
	padding-left: 0px;
	padding-bottom: 0px;
	position: relative;
	line-height: 31px;
	margin-bottom: 0px;
	.menu-item,li{
		float: left;
		margin-right: 43px;
		position: relative;
		&:hover{
			color: $active-color!important;
		}
		&:last-child{
			margin-right: 0px;
		}
		a,.mega-menu-link{
			text-transform: uppercase;
			color: $Black;
			@include font-size(14px);
			font-family: $La;
			font-weight: 700;
			letter-spacing: 0.3px;
			&:hover{
				color: $active-color;
			}
		}
		&.menu-item-has-children{
			&:after{
				font-family: $Aw;
				content: '\f0d7';
				margin-left: 5px;
				color: $black_03;
			}
		}
		&:hover{
			.sub-menu{
				display: block;
				.menu-item{
					a{
						color: $White;
					}
					.sub-menu{
						display: none;
					}
					&:hover{
						.sub-menu{
							display: block;
						}
					}
				}
			}
		}
		.sub-menu{
			display: none;
		}
		.sub-menu,.dhmm-child{
			position: absolute;
			left: -1px;
			padding-left: 0px;
			top: 29px;
			padding-top: 24px;
			z-index: 99999;
			width: 200px;
			background: transparent;
			border: none;
			box-shadow: none;
            li{
                &:after{
                    content:"";
                    display: none;
                }
            }
			.menu-item, .menu-item:hover, &.current-menu-item{
				background: #2f2f2f;
				position: relative;
				padding: 0;
				height: auto;
				// line-height: 50px;
				border: none!important;
				border-radius: 0!important;
				a, a:hover{
					// color: $White;
					border-radius: 0;
					width: 180px;
					margin-left: 20px;
					margin-right: 20px;
					float: left;
					text-align: left!important;
					padding:10px 0!important;
					// height: 50px!important;
					// line-height: 80px;
                    line-height: 18px;
					border-bottom: 1px solid #444;
					&:hover{
						border-color: $active-color;
						color: $active-color!important;
					}
				}
				&:last-child{
					a{
						border-bottom: none;
					}
				}
				.sub-menu{
					position: absolute;
					left: 170px;
					top:0px;
					padding-top:0px;
					z-index: 999;
					li{
						a{
							border-bottom: 1px solid $white_02;
							&:hover{
								border-color: $active-color;
							}
						}
					}
				}
			}
		}
	}
}



//For header two
.header-two{
	#main-navigation{
		line-height: 40px;
		float: left;
		width: auto;
		.menu-item{
			margin-right: 35px;
			a{
				color: $white_05;
				font-family: $La;
				font-weight: $Bold;
				@include font-size(11px);
			}
			&.menu-item-has-children{
				&:after{
					color: rgba($active-color, 0.5);
					@include font-size(11px);
				}
			}
			.sub-menu{
				top:15px;
			}
		}
	}
	.social-contact{
		line-height: 40px;
		width: auto;
		float: right;
		min-width: 330px;
		.header-phone{
			float: right;
			margin-right: 20px;
			height: 40px;
			border-right:1px solid $white_01;
			color: $white_05;
			font-family: $La;
			font-weight: $Bold;
			@include font-size(12px);
			padding-right: 20px;
		}
		ul{
			list-style: none;
			float: right;
			padding-left: 0px;
			margin-bottom: 0px;
			margin-top: -10px;
			li{
				float: left;
				margin-right: 15px;
				a{
					color: $white_05;
					&:hover{
						color: $White;
					}
				}
			}
		}
	}
}

//For slider home page
.book-slider{
	float: left;
	width: 100%;
	height: auto;
	.slider-full{
		float: left;
		width: 100%;
		height: auto;
		img{
			width: 100%;
			float: left;
			height: auto;
		}
	}
}

//For author info

/*
08. Hot author
 */
.hot-author{
	float: left;
	width: 100%;
	height: auto;
	// padding-top: 100px;
	// padding-bottom: 130px;
	@include RP(S){
        .col-md-4{
            img{
                position: relative;
                @include center(x);
            }
        }
    }
    .author-img{
		@include RP(M){
			padding-top: 40px;
		}
	}
	.title-box{
		width: 100%;
		height: auto;
		margin-bottom: 40px;
		text-align: right;
		box-sizing: border-box;
		padding-right: 40px;
        @include RP(S){
            text-align: center;
            padding-right: 0px;
        }
		&:after{
            @include MQ(T){
			     float: right;
            }
            @include RP(S){
                position: relative;
                @include center(x);
            }
		}
	}
	.author-info{
		float: left;
		box-sizing: border-box;
		padding-right: 40px;
        @include RP(S){
            padding-right: 0px;
        }
		span{
			float: right;
			width: 100%;
			height: auto;
			text-align: right;
            @include RP(S){
                text-align: center;
            }
		}
	}
	.author-name{
		font-family: $Ti;
		font-weight: $Bold;
		@include font-size(50px);
		line-height: 53px;
	}
	.author-tags{
		float: right;
		text-align: right;
		margin-bottom: 50px;
		margin-top: 10px;
		text-transform: uppercase;
		color: $black_05;
		font-family: $La;
		@include font-size(12px);
		line-height: 22px;
		a{
			color: $black_05;
			&:hover{
				color: $black_08;
			}
		}
	}
	.author-desc{
		float: right;
		text-align: right;
		font-family: $Me;
		font-weight: $Light;
		@include font-size(13px);
		margin-bottom: 40px;
		line-height: 22px;
		@include RP(S){
			margin-bottom: 20px;
		}
	}
	.author-social{
		float: right;
		width: 100%;
		@include RP(S){
			margin-bottom: 30px;
		}
		ul{
			float: left;
			width: 100%;
			list-style:none;
            @include RP(S){
                padding-left: 0px;
                float: left;
                width: auto;
                position: relative;
                @include center(x);
            }
			li{
				float: right;
				margin-left: 8px;
				a{
					display: block;
					width: 25px;
					height: 25px;
					border-radius: 50%;
					background: $black_01;
					color: $black_07;
					text-align: center;
					line-height: 25px;
					@include transition(fast);
					&:hover{
						background:$active-color;
						i{
							color: $White!important;
						}
					}
				}
			}
		}
	}
	.author-book{
		float: left;
		width: 100%;
		box-sizing: border-box;
		list-style: none;
		padding-left: 30px;
		padding-top: 40px;
		@include RP(S){
			padding-left: 0;
		}
		.author-item{
			float: left;
			width: 49%;
			min-height:250px;
			box-sizing:border-box;
			padding-left: 10px;
			padding-right: 10px;
			// text-align: center;
			// position: relative;
			&:hover{
				.book-info{
					.book-name{
						a{
							color: $active-color;
						}
					}
				}
			}
			.book-item{
				position: relative;
				@include center(x);
				width: 100px;
				height: 150px;
			}
			.book-info{
				text-align: center;
				width: 100%;
				.book-name{
					line-height: 22px;
					@include font-size(16px);
				}
			}
		}
	}
}


/*
09. Title box
 */
//Title
.title-box{
	text-transform: uppercase;
	color: $black_05;
	letter-spacing: 0.1px;
	@include font-size(16px);
	font-family: $La;
	font-weight: $Heavy;
	float: left;
	margin-bottom: 40px;

	&.book-center{
		text-align: center;
	}
	&.title-bold{
		font-weight: 900;
		color: $black_07;
	}
	span{
		float: left;
		width: 100%;
		clear: both;
		a{
			margin-left: 8px;
			font-family: $Ti;
			font-size: ( 14 / 16) * 1em;
			text-transform: none;
			color: $black_05;
			font-style: italic;
			font-weight: normal;
			&:before{
				content: "/";
				margin-right: 8px;
			}
			&:hover{
				color: $active-color;
				&:before{
					color: $active-color;
				}
			}
		}
	}
	&:after{
		border-bottom: 2px solid $black_01;
		width: 60px;
		float: left;
		margin-top: 10px;
		content: "";
	}
	&.title-hightlight{
		width: 89px;
	}
	&.title-feature{
		float: left;
		font-weight: $Bold;
		color: $Black;
		&:after{
			background-color: $black_05;
		}
	}
}

//For section
section{
	float: left;
	width: 100%;
	height: auto;
	// position: relative;
	// z-index: 1;
}


/*
	Class section for extend
 */
.section{
	// border-top: 1px dashed rgba(102, 102, 102, 0.2);
	// padding-top: 100px;
	float: left;
	width: 100%;
}

//Book hightlight
//Can remove with visualcomposer
// .hight-light-tmp{
// 	background: #ede8de;
// 	padding-top: 50px;
// 	float: left;
// 	width: 100%;
// }


/*
10. One book hightlight
 */
.book-hightlight{
	position: relative;
	@include MQ(T){
		top: -120px;
	}
	@include RP(M){
		top: -95px;
	}
    @include RP(S){
        top: 0px;
    }
}

/*Some thing in mobile*/

@include RP(S){
    .bk-list{
        margin-bottom: 40px;
        margin-top: 20px;
        li{
            position: relative;
            @include center(x);
        }
    }

    .wpb_single_image{
        .vc_single_image-wrapper{
             width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        img{
            width: 100%;
            height: auto;

        }
    }
}

.book-today-hightlight{
	float: left;
	width: 100%;
	height: auto;
	.title-box{
		@include RP(S){
			text-align: center;
			width: 100%;
			&:after{
				position: absolute;
				@include center(x);
				top: 15px;
			}
		}
	}
	.book-info{
		box-sizing: border-box;
		padding-left: 15px;
		margin-top: -30px;
		@include RP(MD){
			padding-left: 35px;
		}
		@include RP(M){
			padding-left: 100px;
		}
		@include RP(S){
			padding-left: 0px;
			margin-bottom: 100px;
            text-align: center;
		}
		.book-name{
			@include font-size(45px);
			line-height: 50px;
			margin-bottom: 10px;
			@include RP(S){
				@include font-size(25px);
				width: 100%;
				line-height: 30px;
				text-align: center;
			}
		}
		.book-author{
			margin-bottom: 15px;
			@include font-size(16px);
			line-height: 25px;
			@include RP(S){
				text-align: center;
			}
		}
		.book-price{
			@include font-size(30px);
			@include RP(S){
				text-align: center;
				@include font-size(16px);
			}
		}
	}
	&.big-hightlight{
		.book-info{
			box-sizing: border-box;
			padding-left: 30px;
			@include RP(MD){
				margin-left: 30px;
			}
			@include RP(S){
				margin-left: 0px;
				padding-left: 0px;
			}
			.book-review{
				margin-bottom: 30px;
			}
			.book-price{
				margin-bottom: 30px;
			}
			.book-desc{
				margin-bottom: 30px;
				font-family: $Me;
				font-weight: $Light;
				@include font-size(13px);
				color: #262626;
				line-height: 22px;

			}
			.book-tags{
				text-transform: uppercase;
				font-family: $La;
				@include font-size(12px);
				line-height: 22px;
                @include RP(S){
                    float: left;
                    width: 100%;
                    text-align: center;
                }
			}
		}
	}
}

/*
11. Slider product
 */
.book-slider-feature{
    float: left;
    width: 95%;
    height: 420px;
    .swiper-slide{
        float: left;
        .book-item-slide{
            width: 160px;
            height: auto;
            float: left;
            position:relative;
            @include center(x);
        }
        &:nth-child(even){
            @include MQ(T){
                margin-top: 50px;
            }
        }
        .book-info{
            width: 160px;
            text-align: center;
            margin-top: 20px;
            position: relative;
            @include center(x);
            .book-rate{
                margin-bottom: 10px;
            }
            .book-name{
                @include font-size(18px);
                line-height: 20px;
                margin-bottom: 5px;
                margin-top: 0px;
            }
            .book-price{
                margin-top: 15px;
                line-height: 32px;
            }
        }
    }
    &.book-option2{
        .swiper-slide{
            &:nth-child(even){
                margin-top:0px;
            }
        }
    }
}

//Hightlight with slider
//Option 2
.hightlight-slider-section{
	float: left;
	width: 100%;
	height: auto;
	position: relative;
	background: #ede8de;
	&:after{
		background: $White;
		width: 100%;
		height: 55%;
		content: "";
		position: absolute;
		bottom: 0px;
		left: 0px;
	}
	.container{
		position: relative;
		.btn-prev, .btn-next{
			top: 35%;
            @include RP(MD){
                display: none;
            }
		}

	}
}
.book-slider-hightlight{
	height: 600px;
    @include RP(S){
        height: 450px;
    }
	.swiper-slide{
		// width: 160px!important;
		height: auto;
		// margin-right: 47px;
		margin-top: 40px;
		@include transition;
		.book-item{
			width: 160px;
			position: relative;
			@include center(x);
			@include transition;
		}
		.book-image{
			width: 160px;
			@include transition;
			img{
				width: 160px;
				@include transition;
				// @include center(x);
			}
		}
		.book-info{
			@include transition;
			.book-name{
				@include transition;
			}
		}
		.book-actions{
			width: 160px;
			@include center(x);
			@include transition;
		}
		&.swiper-slide-active{
            @include MQ(T){
                width: 215px!important;
                margin-top:0px;
                @include transition;
                .book-item, .book-actions, .book-image{
                    width: 215px;

                }
                .book-item{
                    @include center(x);
                    @include transition;
                }
                .book-image{
                    img{
                        width: 215px;
                        @include transition;
                        // @include center(x);
                    }
                }
                .book-info{
                    @include transition;
                    .book-name{
                        @include font-size(40px);
                        line-height: 40px;
                        // @include transition;
                        // @include center(x);
                    }
                    .book-author{
                        opacity: 0.7;
                    }
                }
            }
		}
	}
}

.book-hightlight-slider{
	@extend .section;
	// padding-bottom: 85px;
	.title-box{
		text-align: center;
		width: 100%;
		&:after{
			@include center(x);
			position: relative;
		}
	}
	.book-item-slide{
		// position: relative;
		// @include center(x);
		float: left;
		@include RP(S){
			position: relative;
            @include center(x);
		}
		.book-info{
			text-align: center;
			margin-top: 15px;
			.book-rate{
				margin-bottom: 7px;
			}
			.book-name{
				margin-top: 0px;
			}
			.book-author{
				margin-top: 5px;
			}
			.book-price{
				margin-top: 15px;
				img{
					width: auto!important;
				}
			}
		}
	}
}

//Section promotion
//
/*
12. Promotion
 */
.book-promotion{
	float: left;
	width: 100%;
	height: auto;
	// padding-top: 50px;
	// padding-bottom: 50px;
	.promot-item{
		box-sizing: border-box;
		margin-left: 15px;
		margin-right: 15px;
		width: 335px;
		height: 180px;
		overflow: hidden;
		position: relative;
		img{
			max-width: 100%;
			height: auto;
			position: absolute;
			@include center(xy);
		}
		&:first-child{
			margin-left: 0px;
		}
		&:last-child{
			margin-right: 0px;
		}
	}
}


//For feature section
/*
13. Feature section
 */
.feature-section{
	float: left;
	position: relative;
	width: 100%;
	height: auto;
	.container{
		position: relative;
	}
	.products{
		li{
			width: 16%!important;
			&:nth-child(5){
				position: absolute!important;
    			right: 0;
			}
			span{
				&.onsale{
					background-color: $active-color;
					top: 55px!important;
					left: 94.5%;
					width: 40px;
					height: 40px;
					font-family: $La;
					font-weight: bold;
					text-transform: uppercase;
					z-index: 99;
					font-size: .757em;
				}
			}
			.book-item{
				width: 93%;
				.book-image{
					img{
						margin: 0;
						max-width: 160px;
					}
				}

			}
			.book-info{
				position: relative;
				.star-rating{
					color: #dedede;
					position: relative;
					margin-top: 20px;
					margin-bottom: -10px;
					@include center(x);
					span{
						&:before{
							color: $active-color;
						}
					}
				}
				.book-price{
					.price{
						span{
							font-family: $Me;
						    font-style: italic;
						    font-weight: bold;
						    color: $active-color;
						    font-size: 1.538461538em;
						}
						del{
							span{
								color: $black_03;
								@include font-size(12px);
								text-decoration: line-through;
							}
						}
					}
				}
				.book-desc{
					display: none;
				}
			}
		}
	}
	.book-slider-feature{
		position: relative;
		z-index: 11;
	}
	&:after{
		width: 100%;
		height: 50%;
		position: absolute;
		background: $White;
		left: 0px;
		bottom: 0px;
		content: "";
	}
	//Option 2
	&.feature-option2{
		padding-bottom: 85px;

		//Can remove with visual composer
		background: $White;
		&:after{
			display: none;
		}
	}
}
.book-features{
	@extend .section;
	height: auto;
	.title-feature{
		float: left;
		width: 100%;
		margin-bottom: 40px;
	}
	.title-box{
		@include RP(S){
			text-align: center;
			width: 100%;
			&:after{
				position: absolute;
				@include center(x);
				top: 15px;
			}
		}
	}
	&:before{
		width: 100%;
		height: 50%;
		float: left;
		background: #ede8de;
		content: "";
	}
	.feature-button-prev{
		top: 41%;
        @include RP(MD){
            display: none;
        }
		@include RP(S){
			display: block;
			left: initial;
		}
	}
	.feature-button-next{
		top: 41%;
        @include RP(MD){
            display: none;
        }
		@include RP(S){
			display: block;
			right: 20px;
		}
	}
}
.book-slider-feature{
	float: left;
	width: 100%;
}

.swiper-arrow{
	display: none;
	div{
		position: absolute;
		@include center(y);
		&.book-feature-left{
			left: 0px;
		}
	}
}

//For best seller
.best-seller-section{
	max-height: 500px;
}

//Option 2
.best-seller-section-option2{
	@include MQ(T){
		max-height: 500px;
	}
	.book-hot{
		padding-left: 5px;
		@include RP(MD){
			padding-left: 25px;
		}
		@include RP(M){
			padding-left: 5px;
		}
	}
}

.best-seller{
	@extend .section;
	@extend .best-seller-section;
	float: left;
	width: 100%;
	height: auto;
	z-index: 1;
	@include MQ(MD){
		max-height: 440px;
		margin-bottom: 15px;
	}
	@include RP(M){
		padding-bottom: 600px!important;
	}
	@include RP(S){
		padding-bottom: 700px!important;
	}
	//Option 2
	&.book-center{
		@extend .best-seller-section-option2;
		.title-box{
			text-align: center;
			width: 100%;
			&:after{
				@include center(x);
				position: relative;
			}
		}
	}
}

.book-bestseller{
	position: relative;
	z-index: 90;
	.book-info{
		box-sizing: border-box;
		padding-right: 35px;
		text-align: right;
		position: relative;
		//Dang nhap nhang cho nay
		// bottom: -70px;
		@include RP(S){
			padding-right: 0px;
			height: auto;
			margin-bottom: 30px;
		}
		.title-box{
			width: 100%;
			&:after{
				float: right;
			}
			@include RP(S){
				// @include center(x);
				width: 100%;
				text-align: center;
				margin-bottom: 10px;
				&:after{
					position: absolute;
					top: 15px;
					@include center(x);
				}
			}
		}
		.book-name{
			@include font-size(50px);
			line-height: 53px;
			@include RP(S){
				@include font-size(25px);
				line-height: 30px;
				text-align: center;
				width: 100%;
			}
		}
		.book-author{
			margin-top: 10px;
			margin-bottom: 15px;
			@include font-size(16px);
			line-height: 25px;
			@include RP(S){
				@include font-size(14px);
				text-align: center;
				margin-bottom: 0px;
			}
		}
		.book-price{
			margin-top: 30px;
			@include font-size(30px);
			@include RP(S){
				@include font-size(25px);
				width: 100%;
				text-align: center;
				margin-top: 15px;
			}
		}
	}
	.book-description{
		min-height: 340px;
		@include RP(M){
			float: right;
		}
		@include RP(S){
			display: none;
		}
		.book-description-content{
			position: absolute;
			left: 30px;
			bottom: 0px;
			@include MQ(MD){
				width: 100%;
			}
			height: auto;
			@include RP(MD){
				box-sizing:border-box;
				padding-left: 15px;
				padding-right: 20px;
				@include RP(M){
					padding-left: 0px;
					float: right;
				}
			}
			.book-desc{
				font-family: $Me;
				font-weight: $Light;
				color:$black_07;
				box-sizing: border-box;
				line-height: 22px;
				letter-spacing: 0.1px;
				@include font-size(13px);
				@include RP(M){
					padding-right: 15px;
				}
			}
			.book-tags{
				float: left;
				text-transform: uppercase;
				margin-top: 20px;
				color: $black_04;
				a{
					font-family: $La;
					@include font-size(12px);
					line-height: 22px;
					font-weight: normal;
					letter-spacing: 0.5px;
				}
			}
		}
	}
}

//Option 2
.best-center{
	.book-bestseller{
		.book-info{
			margin-top: 60px;
		}
	}
	.book-description{
		min-height: 320px;
	}
}

//Section testimonial

.book-testimonial{
	height: 240px;
}


/*
14. Testimonial
 */

.testimonial-section{
	// padding-top: 210px;
	// padding-bottom: 60px;
	float: left;
	width: 100%;
	min-height: 250px;
	// background: $black_07;
	//
	text-align: center;
	.container{
		position: relative;
	}
}
.testimonial-author{
	.author-name{
		margin-right: 15px;
		text-transform: uppercase;
		font-family: $La;
		font-weight: $Bold;
		color: #fff;
	}
	.author-avatar{
		display: inline-block;
		width: 80px;
		height: 80px;
		img{
			width: 80px;
			height: 80px;
			border-radius: 50%;
			@include grayscale();
		}
	}
	.author-job{
		margin-left: 15px;
		font-family: $La;
		font-weight: $Light;
		font-style: italic;
		color: $white_08;
	}
}

.testimonial-message{
	width: 70%;
	margin-top: 35px;
	position: relative;
	@include center(x);
	font-family: $Ti;
	@include font-size(20px);
	color: $white_08;
	font-style: italic;
	letter-spacing: 0.2px;
    @include RP(M){
        width: 90%;
    }
	@include RP(S){
		width: 100%;
		line-height: 20px;
		@include font-size(16px);
	}
}

.testimonial-half{
	// background: url(../images/home5/left-testi.jpg) no-repeat center center;
	background-size: cover;
	height: 400px;
	float: left;
	position: relative;
	.book-half-testimonial{
		float: left;
		position: absolute;
		width: 560px;
		@include center(xy);
		height: 200px;
		color: $White;
		text-align: center;
        @include RP(M){
            width: 100%;
        }
		.testi-message{
			font-family: $Ti;
			@include font-size(20px);
			line-height: 25px;
			color: $white_07;
			font-style: italic;
			padding-left: 6.5%;
			padding-right: 6.5%;
			padding-top: 20px;
			position: relative;
			padding-bottom: 30px;
            @include RP(M){
                @include font-size(18px);
            }
			@include RP(S){
                @include font-size(16px);
			}
			&:after{
				content: "";
				height: 2px;
				position: absolute;
				bottom: 0px;
				@include center(x);
				width: 60px;
				border-bottom: 2px solid $white_03;
			}
		}
		.testi-author{
			ul{
				margin-top: 25px;
				list-style: none;
				padding-left: 0px;
				margin-bottom: 0px;
				// width: 100%;
				float: left;
				position: relative;
				@include center(x);

				li{
					float: left;
					font-family: $La;
					// color: $white_07;
					&:after{
						content: "/";
						margin-left: 10px;
						margin-right: 10px;
						color: $white_03;
					}
					&:first-child{
						@include font-size(14px);
						text-transform: uppercase;
						color: $white_07;
					}
					&:last-child{
						color: $white_03;
						font-style: italic;
						&:after{
							display: none;
						}
					}
				}
			}
		}
	}
}

//Subcribe and testimonial
.subcribe-testimonial{
	float: left;
	width: 100%;
	height: auto;
}

.subcribe-half{
	@extend .testimonial-half;
	// background: url(../images/home5/right-testi.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	.form-subcrible{
		position: relative;
		@include center(xy);
		text-align: center;
	}
	.subcribe-message-title{
		color: $white_07;
		float: left;
		font-family: $Me;
		margin-bottom: 30px;
		.subcribe-title{
			text-transform: uppercase;
			font-family: $La;
			font-weight: $Heavy;
			@include font-size(25px);
			float: left;
			width: 100%;
			margin-bottom: 20px;
		}
		.subcribe-message{
			float: left;
			width: 100%;
			font-family: $Me;
			@include font-size(13px);
			line-height: 20px;
		}
	}
}

.testimonial-black {
    .subcribe-half{
        height: 155px!important;
        .subcribe-message-title{
            color: $black_05!important;
        }
        *{
            border-color: $black_01!important;
            color:$black_05!important;
            &:hover{
                color: $black_03!important;
            }
        }
    }
}


/*
15. Blog section
 */
//Secton blog
.book-blogs-section{
	@extend .section;
	border-top: none;
	float: left;
	width: 100%;
	height: auto;
}

.list-blog{
	float: left;
	width: 100%;
	padding-left: 0px;
	margin-bottom: 0px;
	list-style: none;
	// margin-bottom: 125px;
	.blog-item{
		@include MQ(T){
			width: 23%;
			margin-right: 2.6%;
			@include transition(fast);

		}
		@include RP(S){
			width: 100%;
			text-align: center;
			margin-bottom: 30px;
		}
		&:last-child{
			margin-right: 0px;
		}
		img{
			opacity: 1;
			width: 245px;
			height: auto;
			position: relative;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			@include RP(S){
				width: 100%;
			}
		}
		&:hover{
			img{
				-webkit-box-shadow: 10px 8px 14px -5px rgba(105, 104, 104, 0.75);
				-moz-box-shadow: 10px 8px 14px -5px rgba(105, 104, 104, 0.75);
				box-shadow: 10px 8px 14px -5px rgba(105, 104, 104, 0.75);
				-webkit-transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
			}
			.title-blog{
				a{
					color: $active-color!important;
				}
			}
		}
		.title-blog{
			box-sizing: border-box;
			float: left;
			width: 100%;
			margin-top: 15px;
			font-family: $Ti;
			font-weight: $Bold;
			@include font-size(20px);
			line-height: 24px;
			padding-right: 25px;
			a{
				color: $black_08;
				&:hover{
					color: $active-color;
				}
			}
		}
		.blog-timeup{
			box-sizing: border-box;
			float: left;
			width: 100%;
			font-family: $Me;
			text-indent: 0px;
			@include font-size(12px);
			color: $black_04;
			margin-top: 10px;
			// @include filter(blur,0.5px);
		}

	}
}


/*
16. Slogan text
 */
//Home 3
.slogan-text{
	float: left;
	width: 100%;
	padding-top: 240px;
	padding-bottom: 250px;
	// background: url(../images/slogan-text.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	color: $White;
	font-family: $Ti;
	font-style: italic;
	@include font-size(50px);
	line-height: 60px;
	background-attachment: fixed;
	@include RP(S){
		@include font-size(30px);
		line-height: 30px;
	}
	strong{
		font-weight: bold;
		font-style: normal;
	}
}
//For section book description
.book-cover-description{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/bg-cover-book.jpg) no-repeat center center;
	background-size: cover;
	.container{
		position: relative;
		min-height: 660px;
	}
	.book-cover-preview{
		float: left;
		width: 825px;
		height: 660px;
		position: absolute;
		top: 0px;
		left: -150px;
		background: url(../images/book-ipad-cover.png) no-repeat center center;
	}
	.book-cover-descirption{
		float: right;
		position: absolute;
		width: 70%;
		color: $White;
		@include RP(S){
			width: 100%;
			padding: 0 25px!important;
    		text-align: center;
		}
		.book-description{
			float: left;
			width: 100%;
			height: auto;
			font-family: $Ti;
			.title-desc{
				float: left;
				@include font-size(60px);
				font-weight: $Bold;
				line-height: 65px;
				margin-bottom: 28px;
				@include RP(MD){
					font-size: 3.6em;
				}
				@include RP(M){
                    width: 100%;
                    float: left;
					@include font-size(40px);
					line-height: 40px;
				}
			}
			.text-desc{
				float: left;
				@include font-size(20px);
			}
		}
		.book-button{
			margin-top: 40px;
			border-color: $White;
			color: $White;
			font-weight: $Bold;
			@include font-size(12px);
			@include RP(S){
                position: relative;
                @include center(x);
				margin-top: 40px;
                margin-bottom: 40px;

			}
			&:hover{
				border-color: $active-color;
				background-color: $active-color;
			}
		}
	}
}

//Home 5

/*
17. List categories
 */
.list-categories{
	float: left;
	width: 100%;
	height: auto;
	@include MQ(T){
		padding-top: 100px;
	}
	// background: #ede8de;
}
.description-categories{
	float: left;
	width: 100%;
	height: auto;
	text-align: center;
	@include RP(S){
		padding-top: 50px;
	}
	.title-box{
		@include font-size(30px);
		color: $black_07;
		margin-bottom: 30px;
		&:after{
			display: none;
		}
	}
}
.categories-description{
	float: left;
	width: 100%;
	height: auto;
	padding-bottom: 95px;
	text-align: center;
	width: 55%;
	position: relative;
	@include center(x);
	font-family: $Me;
	@include font-size(18px);
	line-height: 28px;
	font-weight: $Light;
    @include RP(M){
        width: 90%;
    }
	strong{
		font-weight: $Bold;
		font-style: italic;
	}
}

.cat-list-random{
	float: left;
	width: 100%;
	// height: 603px;
	// background: $black_05;
	position: relative;
	@include center(x);
	padding-left: 0px;
	margin-left: -1px;
	margin-bottom: 0px;
	list-style: none;
	.cat-items{
		float: left;
		width: 25%;
		// width: 24.95%;
		height: 200px;
		box-sizing: border-box;
		border: none;
		overflow: hidden!important;
		@include RP(M){
			height: 130px;
		}
		@include RP(S){
			width: 100%;
		}
		.category-image{
			float: left;
			background: #333;
			width: 100%;
			height: 100%;
			img{
				opacity: 0.3;
				@include transition(fast);
			}
		}
		img{
			position: absolute;
			@include center(xy);
			min-width: 100%;
			min-height: 200px;
            @include RP(S){
                width: auto;
            }
		}
		&.cat-width2{
			width: 50%;
			@include RP(S){
				width: 100%;
			}
		}
		&.cat-height2{
			height: 400px;
			@include RP(M){
				height: 260px;
			}
            @include RP(S){
                height: 130px;
            }
			img{
				min-width: 100%;
				min-height: 400px;
				@include RP(M){
					min-height: 260px;
				}
                @include RP(S){
                    min-height: 130px;
                }
			}
		}
		&:hover{
			.category-image{
				img{
					opacity: 1;
					min-width: 110%;
					min-height: 210px;
				}
			}
		}
		a{
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			overflow: hidden!important;
			.category-info{
				display: block;
				position: absolute;
				width: 100%;
				@include center(y);
				text-align: center;
				z-index: 99;
				span{
					float: left;
					width: 100%;
					&.category-name{
						font-variant: $Ti;
						line-height: 22px;
						@include font-size(20px);
						color: $White;
						margin-bottom: 10px;
						// box-shadow: 1px 1px $White;
						// font-weight: $Bold;
					}
					&.category-number{
						font-family: $La;
						@include font-size(12px);
						color: $white_05;

					}
				}
			}
			&.view-more{
				background: #ede8de;
				@include transition(fast);
				.category-name{
					font-family: $Ti;
					color: $active-color!important;
					font-weight: 300;
					font-size: 6em!important;
				}
				&:hover{
					background: $active-color;
					.category-name{
						color: $White!important;
						font-weight: 300;
					}
				}
			}
		}
	}
}


/*
Author book style
*/
#author-book-slide{
	float: left;
	width: 100%;
	.book-item-slide{
		width: 100px;
		min-height: 210px;
		margin-bottom: 15px;
		.author-info{
			float: left;
			margin-top: 10px;
			a{
				color: $white_07;
			}
			.book-year{
				color: $white_02;
			}
		}

	}
}
.beau-author-book-item{
	float:left;
	width: 170px;
}




/*
18. Subcriber
 */
//Form subcribe
.book-subcribe-form{
	float: left;
	position: relative;
	width: 360px;
	@include center(x);
	@include RP(S){
		width: 90%;
	}
	&.search-on-menu{
		width: 422px;
		height: 55px;
		box-sizing:border-box;
		@include RP(S){
			width: 95%;
		}
	}
	form{
		position: relative;
		border: 2px solid $white_02;
		border-radius: 50px;
		padding: 5px 10px;
		height: 40px;
		&:hover{
			background: $white_02;
			border: none;
			border: 2px solid transparent;
			input{
				color: $White;
				border-color: $white_07!important;
				@include placeholder{
					color: $White;
				}
			}
		}
		input{
			float: left;
			border:none;
			background: transparent;
			color: $white_05;
			position: relative;
			@include center(y);
		}
		input[type="text"]{
			width: 145px;
			font-family: $Me;
			// float: left;
			padding-left: 10px;
			@include font-size(12px);
			border-right: 1px solid $white_02;
			margin-right: 5px;
			font-weight: $Bold;
			@include placeholder(){
				font-style: italic;
			}
			@include RP(MD){
				width: 280px;
			}
			@include RP(M){
				width: 145px;
			}
			@include RP(S){
				width: 75%;
				border-radius: 0px!important;
			}
			@include MQ(SL){
				width: 290px;
			}
		}
		input[type="submit"]{
			text-transform: uppercase;
			float: right;
			font-family: $La;
			font-weight: $Bold;
			@include font-size(14px);
		}
	}
}









//Home 6
/*
List service list icon and short desc
*/
/*
19. List service
 */

.list-services{
	padding-bottom: 100px;
	float: left;
	width: 100%;
	height: auto;
	&.sec-border-top{
		float: left;
		border-top: 1px dashed $black_01;
		padding-top: 80px;
	}
}
.service-item{
	text-align: center;
	@include transition(fast);
	box-sizing:border-box;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	@include RP(S){
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 20px;
	}
	.service-icon{
		position: relative;
		@include center(x);
		margin-bottom: 15px;
		float: left;
		width: 100px;
		height: 70px;
	}
	i{
		@include font-size(65px);
		margin-bottom: 10px;
		font-weight: $Light;
		float: left;
		position: relative;
		@include center(x);
		color: $black_04;
	}

	&:hover{
		// color: $active-color;
		.service-title, i{
			color: $active-color;
		}
	}
	.service-title{
		font-family: Ti;
		font-weight: $Bold;
		width: 100%;
		@include font-size(20px);
		height: auto;
		text-align: center;
		margin-bottom: 35px;
		position: relative;
		&:after{
			content:"";
			width: 60px;
			border-bottom: 2px solid $black_02;
			position: absolute;
			@include center(x);
			bottom: -10px;

		}
	}
	.service-desc{
		font-family: $Me;
		@include font-size(13px);
		line-height: 22px;
		font-weight: $Light;
	}
}



/*
20. Home 7
 */
.slider-with-scroll{
	float: left;
	width: 100%;
	//padding-bottom: 40px;
	margin-bottom: 35px;
	.swiper-scrollbar-drag {
		background: $black_01;
		border-radius: 50px;
		height: 8px;
	}
	.book-item-slide{
		float: left;
		width: 105px;
		height: auto;
		margin-right: 40px;
		.book-info{
			margin-top: 10px;
		}
		.book-rate{
			margin-bottom: 5px;
		}
		.book-name{
			margin-top: 0px;
			@include font-size(14px);
			line-height: 18px;
			margin-bottom: 5px;
		}
		.book-price{
			margin-top: 5px;
			@include font-size(16px);
		}
	}
	.swiper-slide{
		padding-bottom: 50px;
		.book-item-slide{
			&:last-child{
				margin-right: 0px;
			}
		}
	}
	&:hover{
		.swiper-scrollbar{
			opacity: 1!important;
		}
	}
}
.swiper-scrollbar {
	width: 100%;
	height: 4px;
	position: absolute;
	left: 0;
	bottom: 8px;
	background: transparent;
}


.left-full{
	float: left;
	@include RP(M){
		display: none;
	}
	#list-cat-scroll{
		float: left;
		position: relative;
		width: 240px;
		z-index: 999;
		@include RP(MD){
			width: 171px;
		}
		@include MQ(SL){
			width: 320px;
		}
		&.fixed{
			position: fixed;
		}
		&.is-fixed{
			width: 100%;
		}
		&.stick-list-cat-scroll{
			position: fixed;
			top: 0;
			border-right: 1px solid #DEDEDE;
			height: 100vh;
    		background-color: #2D2D2B;
		}
		&.stick-list-cat-scroll-after{
			position: absolute;
			top: 380vh!important;
			border-right: 1px solid #DEDEDE;
			height: 100vh;
    		background-color: #2D2D2B;
    		@include MQ(SL){
    			top: 280vh!important;
    		}
		}
	}
	.list-full-categories{
		float: left;
		width: 100%;
		list-style: none;
		padding-left: 0px;
		margin-bottom: 0px;
		.items-category{
			float: left;
			width: 100%;
			max-width: 100%!important;
			height: 130px;
			background: #333;
			position: relative;
			overflow: hidden;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			@include RP(MD){
				height: 100px;
			}
			&.stick-cat{
				-webkit-transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				height: 65px;
				background: #2D2D2B;
				border-bottom: 1px solid rgba(140, 140, 140, 0.1);
				&:hover{
					img{
						opacity: 1;
						-webkit-transition: all 0.2s ease-in-out;
						-moz-transition: all 0.2s ease-in-out;
						-o-transition: all 0.2s ease-in-out;
						transition: all 0.2s ease-in-out;
					}
				}
				&:first-child{
					padding-top: 10px;
    				height: 80px;
				}

				img{
					opacity: 0;
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
				span{
					color: #fff;
				}
			}
			img{
				@include transition(fast);
				position: absolute;
				@include center(xy);
				min-width: 100%;
				min-height: 130px;
				width: auto;
				height: auto;
				opacity: 0.3;
			}
			&:hover{
				img{
					opacity: 1;
					min-width: 120%;
					min-height: 140px;
				}
			}
			a{
				float: left;
				width: 100%;
				height: 100%;
				position: absolute;
				// @include center(y);
				div{
					position: absolute;
					width: 100%;
					text-align: center;
					@include center(xy)
				}
				span{
					float: left;
					width: 100%;
					height: auto;
					text-align: center;
					color: $white_07;
					font-weight: $Bold;
					&.cat-title{
						font-family: $Ti;
						@include font-size(16px);
					}
					&.cat-num{
						font-family: $La;
						font-weight: $Light;
					}
				}
			}
		}
	}
}
.middle-full{
	box-sizing:border-box;
}
.right-full{
	background: rgba(#f4f3f1, 0.7);
	box-sizing:border-box;
	padding-top: 85px;
	.title-box{
		box-sizing:border-box;
		// padding-left: 30px;
		width: 100%;
		&.title-yellow{
			color: $active-color!important;
			&:after{
				// background-color: $active-color!important;
				border-color: $active-color!important;
				opacity: 0.8!important;
			}
		}
	}
}
.content-widget{
		float:left;
		width: 100%;
		box-sizing:border-box;
		margin-bottom: 50px;
		.list-top-book{
			padding-left: 0px;
			@include RP(S){
                padding-left: 15px;
			}
			li{
				list-style-position: inside;
				float: left;
				width: 100%;
				margin-bottom: 10px;
				&:hover{
					color: $active-color;
					.book-name{
						color: $active-color;
					}
				}
                @include RP(S){
                     list-style-position: outside;
                }
			}
			.book-item-widget-best{
				float: right;
				width: 85%;
				font-family: $Ti;
				@include font-size(14px);
				margin-bottom: 10px;
				font-weight: $Bold;
                @include RP(S){
                    float: none;
                }
				p{
					color: $black_08;
					margin-bottom: 0px;
					line-height: 18px;
					&.book-auth{
						@include font-size(11px);
						color: rgba(#999999, 0.7);
						font-weight: normal;
						font-family: $La;
						&:hover{
							color: $black_08!important;
						}
					}
				}
			}
		}
	}
// Sidebar-widget-home06
	
.name-widget{
		text-transform: uppercase;
		color: $Black;
		letter-spacing: 0.1px;
		@include font-size(16px);
		font-family: $La;
		font-weight: $Heavy;
		float: left;
		margin-bottom: 40px;
		position: relative;
		@include RP(S){
			border-bottom: 2px solid $Black;
			line-height: 30px;
		}
		&:after{
			content: "";
			position: absolute;
			border-bottom: 2px solid $Black;
		    width: 60px;
		    top: 30px;
		    left: 0;
		    @include RP(S){
		    	display: none;
		    }
		}
	}
	.product_list_widget{
		clear: both;
		padding: 0;
		position: relative;
		margin-left: -10px!important;
		@include RP(S){
			margin-left: 0!important;
		}
		li{
			list-style: decimal!important;
			padding: 15px 0 0px 50px!important; //truoc de 15 0 0 13% ? kho hieu o cho 13%
			position: relative;
			text-align: left;
		    font-style: italic;
		    font-weight: bold;
		    font-size: 1.9em;
		    max-width: 230px;
			&:before {
			    content: "";
			    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
			    bottom: 0px;
			    left: 0;
			    width: 100%;
			    height: 1px;
			    position: absolute;
			}
			a{
				font-size: 0.6em;
				font-style: normal;
			}
			.star-rating{
				display: none;
			}
			img{
				display: none;
			}
			&:hover{
				background: rgba(255, 255, 255, 0.7);
				.book-best-right{
					.name-best{
						.b-name{
							color: #f07c29;
						}
					}
				}
			}
			.book-best-right{
				.book-item{
					max-width: 40px;
					.book-image{
						img{
							display: block;
							width: 100%;
							height: auto;
						}
					}
				}
				.name-best{
					margin-left: 50px;
					font-style: normal;
					position: relative;
					top: -35px;
					.b-name{
						font-size: 0.98em !important;
						color: #000;
						margin-bottom: 8px !important;
						max-height: 40px;
						overflow: hidden;
					}
					.b-author{
						display: none;
					}
					.b-price{
						font-family: $Me;
						font-size: 0.8em !important;
					    color: rgba(38, 38, 38, 0.7) !important;
					    margin-bottom: 0px;
					    font-weight: normal;
					}
				}
			}
		}
	}
	.content-widget{

		.list-deal-day{
			padding-top:15px;
			padding-left: 0;
		   li{
				list-style: decimal;
				padding-bottom: 30px;
				max-width: 220px;
				.book-best-right{
					.book-item{
						max-width: 60px;
						&:after{
							display: none;
						}
						.book-image{
							img{
								width: 100%;
								height: auto;
							}
						}
					}
					.name-best{
						 padding-left: 75px;
						 .b-name{
						 	@include font-size(16px);
						 	font-weight: normal;
						 	font-weight: bold;
						 	margin-bottom: 5px;
						 	a{
						 		color: $Black;
						 		&:hover{
							 		color: $active-color;
							 	}
						 	}
						 }

						 .b-author{
						 	font-family: $La;
						 	font-weight: normal;
						 	color: $black_03;
						 	@include font-size(13px);
						 	height: 30px;
    						overflow: hidden;
						 	span{
						 		float: left;
						 	}
						 }
						 .b-price{
						 	color: $active-color;
						 	font-weight: bold;
						 	font-family: $Me;
						 	@include font-size(16px);
						 }
					}
				}
			}
		}
		.list-top-book{
			padding-top: 10px;
			li{
				margin-bottom: 0;
				.book-item-widget-best{
					width: 92%;
					.book-name{
						a{
							color: $Black;
							@include font-size(14px);
							font-weight: normal;
							&:hover{
						 		color: $active-color;
						 	}
						}
					}
				}
				span{
					width: 92%;
					a{
						color: $Black;
					}
				}
			}
		}
	}
.sidebar-widget{
	float:left;
	width: 100%;
	box-sizing:border-box;
	margin-bottom: 50px;
	@include MQ(XL){
		padding-left: 30px;
	}
	ol{
		list-style: decimal;
			// display:list-item;
		padding-left: 0px;
		li{
			list-style-position: inside;
			float: left;
			width: 100%;
			margin-bottom: 10px;
		}
	}
	.list-best-seller{
		float: left;
		height: auto;
		padding-left: 0px;
		list-style-position: inside;
		position: relative;
		left: -30px;
		@include MQ(MD){
			width: 115%;
		}
		li{
			padding-left: 30px;
			float: left;
			font-family: $Ti;
			font-weight: $Bold;
			font-style: italic;
			text-align: left;
			font-style: italic;
			width: 100%;
			position: relative;
			padding-top: 20px;
			padding-bottom: 20px;
			margin-bottom: 0px!important;
			overflow: hidden;
			&:before{
				content: "";
				border-bottom: 1px dashed $black_01;
				top: 0px;
				left: 35px;
				width: 70%;
				height: 1px;
				position: absolute;
			}
			@include font-size(25px);
			a{
				float: right;
				width: 100%;
			}
			&:hover{
				background: $white_07;
				color: $active-color;
				.b-name, .b-price{
					color: $active-color!important;
				}
			}
			.book-best-right{
				float: right;
				width: 75%;
				line-height: 22px;
				// @include font-size(0.1em);
				font-style: normal;
				line-height: 18px;
				.book-item{
					margin-right: 10px;
					// margin-bottom: 20px;
					float: left;
				}
				.name-best{
					float: left;
					width: 50%;
				}
				p{
					&.b-name{
						font-size: (14 / 25) * 1em!important;
						color: $Black;
						margin-bottom: 8px!important;
					}
					&.b-price{
						font-family: $Me!important;
							font-size: (12 / 25) * 1em!important;
						color: rgba(#262626, 0.7)!important;
						margin-bottom: 0px;
					}
				}
			}
			a{
				display: block;
			}
		}
	}
}
.book-deal{
	background: url(../images/bg-widget.png) no-repeat center center;
	clear: both;
	min-height: 300px;
	padding: 0 5%;
	@include RP(M){
		padding: 0 18%;
	}
	@include RP(S){
		padding: 0 23%;
	}
	.book-item{
		.book-actions{
			.list-action{
				.book-addtocart{
					&:hover{
						background:none;
					}
				}
				.yith-wcwl-add-to-wishlist{
					margin-top: 55px;
				}
			}
		}
	}
	.book-info{
		.book-rate{
			.star-rating{
				float: left;
			}
		}
	}
}
.sidebar-ad{
	img{
		width: 100%;
		height: auto;
	}
}


/*
21. Link parthner
 */
.parthner-full{
	margin-top: 100px;
}

.list-author-full{
	padding-left: 60px;
	padding-right: 60px;
	float: left;
	padding-top: 30px;
	@include RP(S){
		padding-right: 0;
		padding-left:10%;
	}
	.list-author-name{
		li{
			float: left;
			// width: 20%!important;
			width:120px;
			margin-right: 6.6%;
			margin-bottom: 30px;
			&:nth-child(5n){
				// margin-right: 0px;
			}
			a{
				float: left;
				width: 100%;
				height: auto!important;
			}
			p{
				float: left;
				width: 100%;
				margin-bottom: 0px;
			}
		}
	}
}

.list-full{
	float: left;
	width: 100%;
	box-sizing:border-box;
	padding-left: 60px;
	padding-right: 60px;
	@include RP(M){
		padding-left: 20px;
		padding-right: 20px;
	}
	@include RP(S){
		padding-left: 15px;
		padding-right: 15px
	}
}

.box-dark{
	background: #252420;
	color: $White;
	float: left;
	//padding-top: 80px;
	.title-box{
		color: $white_09;
		margin-bottom: 30px;
		&:after{
			display: none;
		}
	}
	.book-info{
		.star-rating{
			left: 25%!important;
		}
		span{
			&.book-name{
				// font-weight: normal;
				// @include font-size(14px);
				// margin-bottom: 5px;
				&:hover{
					a{
						color: $active-color;
					}
				}
				a{
					color: #fff;
				}
			}
			&.book-author{
				color: rgba(102,102,102,0.7) !important;
				a{
					color: rgba(102,102,102,0.7) !important;
					&:hover{
						color: $white_07!important;
					}
				}
				// @include font-size(10px);
				// font-family: $La;
				// font-weight: $Light;
			}
		}
	}
	.swiper-scrollbar-drag {
		background: $white_01;
	}
}

.book-list-full-feature{
	//padding-top: 80px;
	float: left;
	width: 100%;
	height: auto;
	@include RP(S){
		margin-left: 7%;
	}
}

//Monthly feature

.book-full-mothly-with-scroll{
	float: left;
	width: 100%;
	height: 270px;
	.swiper-scrollbar-drag{
		height: 8px;
		border-radius: 50px;
		background: $black_01;
	}
	.swiper-slide{
		width: 2990px;
		.item-month-slide{
			float: left;
			width: 290px;
			height: auto;
			@include RP(S){
				width: 240px;
			}
			.book-item, .book-info{
				float: left;
				// margin-right: 10px;
			}
			.book-item{
				width: 60px;
			}
			.book-info{
				width: 160px;
				margin-left: 15px;
				clear: inherit;
				.book-name{
					@include font-size(16px);
					line-height: 16px;
					margin-top: 0px;
				}
				.book-author{
					margin-bottom: 5px;
					@include font-size(12px);
				}
				.book-price{
					// font-style: normal;
					@include font-size(16px);
				}
			}
			.clearfix{
				margin-bottom: 25px;
			}
		}
	}
}
/*
List service bottom
 */
.list-services-bottom{
	float: left;
	width: 100%;
	height: 130px;
	background: #252420;
	position: relative;
}

.service-fitem{
	height: 130px;
	padding-left: 8%;
	float: left;
	cursor: pointer;
	@include transition;
	i{
		@include font-size(23px);
		color: $white_02;
	}
	i, span{
		position: relative;
		@include center(y);
		float: left;
	}
	.text-service{
		font-family: $La;
		// font-weight: $Bold;
		margin-left: 20px;
		line-height: 30px;
		text-transform: uppercase;
		color: $white_02;
		@include RP(M){
			font-size: 0.78em;
		}
	}
	&:hover{
		i,span{
			color: $white_08!important;
		}
	}
}



/*
22. Blog page
 */
//For blogs page
.header-page{
	float: left;
	width: 100%;
	height: 250px;
	.container{
		position: relative;
	}
	.title-page{
		text-transform: uppercase;
		font-family: $La;
		font-weight: $Light;
		@include font-size(30px);
		line-height: 22px;
		color: $white_09;
		position: absolute;
		left: 0px;
		top: 170px;
		letter-spacing: 0.25px;
		span{
			font-size: 0.75em;
		}
		@include RP(S){
			top: 110px;
			padding: 0 20px;
			line-height: 35px;
		}
	}
	&.blog-header{
		// background: url(../images/blog-header.jpg) no-repeat center center;
		margin-bottom: 100px;
		background-size: cover;
	}
	&.blog-header-grid{
		// background: url(../images/grid_1/banner-grid.jpg) no-repeat center center;
		background-position:center center;
		background-repeat: no-repeat;
		margin-bottom: 70px;
		background-size: cover;
	}
	&.blog-header-classic{
		margin-bottom: 60px;
		// background: url(../images/blog_right/banner.jpg) no-repeat center center;
		background-size: cover;
	}
	&.header-author{
		margin-bottom: 65px;
		// background: url(../images/banner-author.jpg) no-repeat center center;
		background-size: cover;
	}
	&.store-header{
		margin-bottom: 0px;
		// background: url(../images/banner-store.jpg) no-repeat center center;
		background-size: cover;
	}
	&.header-shop{
		margin-bottom: 0px;
		// background:url(../images/banner-shop.jpg) no-repeat center center;
		background-size: cover;
	}
}


//Page blog list
//Kiem sua
.blog-items{
	float: left;
	position: relative;
	.sticky-note{
		position: absolute;
		width: 70px;
		height: auto;
		padding: 5px;
		background: $active-color;
		color: $White;
		display: none;
		left: 5%;
		top: 21px;
		@include font-size(16px);
		font-family: $La;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		@include transition;
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}
	&.sticky{
		.sticky-note{
			display: block;
		}
		&:hover{
			.sticky-note{
				background-color: $black_07;
			}
		}
	}
	@include RP(S){
		text-align: center;
	}
	.news-thumbs{
		display: block;
		margin-bottom: 20px;
	}
	.news-description{
		box-sizing: border-box;

		.news-title{
			float: left;
			font-family: $Ti;
			font-weight: $Bold;
			width: 100%;
			@include font-size(20px);
			line-height: 24px;
			margin-bottom: 10px;
			color: $Black;
			&:hover{
				color: $active-color;
			}
		}
		.news-dateup{
			width: 100%;
			float: left;
			color: $Black;
			opacity: 0.5;
			font-family: $La;
			font-weight: $Light;
			margin-bottom: 20px;
			@include font-size(12px);
			color: #262626;
			margin-bottom: 20px;
		}
		.short-desc{
			float: left;
			font-family: $Me;
			width: 100%;
			@include font-size(13px);
			line-height: 22px;
		}
	}
}

.page-blogs-list{
	float: left;
	width: 100%;
	height: auto;
	.blog-items{
		margin-bottom: 50px;
		.news-description{
			box-sizing: border-box;
			.news-title, .news-dateup, .short-desc{
				width: 80%;
			}
			.news-title{
				@include font-size(40px);
				line-height: 40px;
				margin-bottom: 20px;
				margin-top: 30px;
			}
		}
		&:nth-child(odd){
			.news-thumbs{
				float: left!important;
			}
			.news-description{
				float: right!important;
				text-align: left;
				padding-left: 35px;
			}
		}
		&:nth-child(even){
			.news-thumbs{
				float: right!important;
			}
			.news-description{
				float: left!important;
				text-align: right;
				padding-right: 35px;
				.news-title, .news-dateup, .short-desc{
					float: right;
				}
			}
		}
	}

}


//Page blog blog grid 1
.page-blogs-grid{
	box-sizing:border-box;
	width: 100%;
	// padding-right: 8px;
	float: left;
	// margin-bottom: 70px;
	&.grid-2columns{
		.clearfix{
			clear: both;
			&:before{
				position: absolute;
				width: 47.2%;
				content: "";
				left: 0px;
				border-top: 1px dashed $black_01;
			}
			&:after{
				position: absolute;
				width: 47.2%;
				content: "";
				right: 8px;
				border-top: 1px dashed $black_01;
			}
		}
		.blog-items{
			padding-bottom: 30px;
			margin-top: 30px;
			position: relative;
			box-sizing: border-box;
			img{
				width: 380px;
				height: auto;
			}
			@include MQ(T){
				&.item-even{
					padding-right: 15px;
				}
				&.item-odd{
					padding-left: 15px;
				}
			}

		}
	}
	&.grid-3columns{
		.blog-items{
			height: 305px;
			width: 245px;
			margin-top: 30px;
			margin-right: 30px;
			position: relative;
			border-bottom: 1px dashed $black_01;
            @include RP(MD){
                width: 222px;
            }
			@include RP(S){
				width: 100%;
                margin-right: 0px;
			}
			img{
				width: 245px;
				height: auto;
			}
			&:nth-child(3n){
				margin-right: 0px;
				@include RP(M){
					margin-right: 30px;
				}
			}
			&.last{
				border-bottom: none;
			}
		}
	}
	&.grid-fullcolumns{
		@include RP(M){
			margin-left: 55px;
		}
		@include RP(S){
			margin-left: 0;
		}
		.blog-items{
			height: 360px;
			width: 325px;
			margin-top: 30px;
			margin-right: 30px;
			position: relative;
			border-bottom: 1px dashed $black_01;
			@include RP(MD){
				width: 310px;
				margin-right: 20px;
			}
			@include RP(M){
				margin-right: 30px;
			}
			@include RP(S){
				width: 100%;
				height: auto;
			}
			img{
				width: 325px;
				height: auto;
                @include RP(S){
                    width: 100%;
                    height: auto;
                }
			}
			&:nth-child(3n){
				margin-right: 0px;
				@include RP(M){
					margin-right: 30px;
				}
			}
			&.last{
				border-bottom: none;
			}
		}
	}
	&.grid-random-columns{
		.blog-items{
			// height: 325px;
			height: auto;
			width: 245px;
			padding-bottom: 70px;
			margin-top: 30px;
			// position: relative;
			border-bottom: 1px dashed $black_01;

			@include RP(S){
				width: 100%;
			}
			img{
				width: 243px;
				height: auto;
                @include RP(S){
                    width: 100%;
                }
			}
			&:nth-child(3n){
				margin-right: 0px;
			}
			&.last{
				border-bottom: none;
			}
		}
	}
	&.blogs-classic-colums{
		.blog-items{
			float: left;
			width: 100%;
			height: auto;
			padding-bottom: 40px;
			margin-top: 40px;
			border-bottom: 1px dashed $black_01;
			img{
				width: 380px;
				height: auto;
			}
			&:last-child{
				border-bottom: none;
			}
			.news-title{
				padding-top: 30px;
				@include font-size(25px);
				font-weight: $Bold;
			}
			.news-thumbs{
				float: left;
				// margin-right: 35px;
				margin-bottom: 0px!important;
				//Kiem sua
			}
			.news-description{
				float: left;
				box-sizing: border-box;
				padding-right: 25px;
				padding-left: 10px;
			}
			&.rightbar-item{
				.news-description{
					padding-right: 0px;
					padding-left: 35px;
				}
			}
		}
	}
}




//for sidebar
.right-sidebar{
	float: right;
	box-sizing:border-box;
	padding-top: 25px;
	@include MQ(T){
		padding-left: 30px;
	}
    @include RP(S){
        padding-top: 0px;
    }
	.sidebar-widget{
		float: left;
		width: 100%;
		height: auto;
		border-bottom: 1px dashed $black_01;
		padding-bottom: 45px;
		margin-bottom: 45px;
		ul{
			float: left;
			width: 100%;
		}
		a{
			color: $black_05;
			&:hover{
				color: $active-color;
			}
		}
		&:last-child{
			border-bottom: none;
		}
		.title-sidebar-widget{
			width: 100%;
			box-sizing:border-box;
			@include MQ(T){
				padding-left: 20px;
			}
		}
		.sidebar-content-widget{
			float: left;
			box-sizing:border-box;
			@include MQ(T){
				padding-left: 20px;
			}
		}
		.twitter-follow-button{
			color: $black_05;
			border-color: $black_01;
			padding: 5px 13px;
			&:hover{
				color: $active-color;
			}
		}
		.list-category{
			list-style: none;
			padding-left: 0px;
			li{
				float: left;
				margin-bottom: 20px;
				float: left;
				width: 100%;
				@include font-size(16px);
				color: $black_04;
				font-family: $La;
				@include font-size(12px);
				a{
					margin-right: 5px;
					font-family: $Ti;
					color: $black_08;
					font-size: 1.35em;
				}
				&:hover{
					color: $active-color;
					a{
						color: $active-color;
					}
				}
			}
		}
		.list-recent{
			list-style: none;
			padding-left: 0px;
			li{
				float: left;
				width: 100%;
				margin-bottom: 24px;
			}
			.recent-thumbs{
				float: left;
				width: 60px;
				height: 60px;
				margin-right: 15px;
			}
			.title-news{
				line-height: 20px;
				color: $black_07;
				@include font-size(14px);
				font-weight: $Bold;
			}
		}
		.items-comment{
			float: left;
			width: 100%;
			margin-bottom: 40px;
			.comment{
				font-family: $Me;
				@include font-size(13px);
				line-height: 22px;
				color: $black_09;
				float: left;
				width: 100%;
				margin-bottom: 10px;
				strong{
					font-weight: $Bold;
				}
			}
			.date-comment{
				float: left;
				width: 100%;
				font-family: $La;
				font-weight: $Light;
				@include font-size(11px);
				color: $black_05;
			}
		}
		.list-tags{
			a{
				float: left;
				border-bottom: 2px solid $black_005;
				margin-right: 30px;
				margin-bottom: 15px;
				@include font-size(14px);
				line-height: 20px;
				&:hover{
					color: $active-color;
					border-color: $active-color;
				}
			}
		}
	}
}

//Left blog
.left-bar{
	padding-left: 0px;
	padding-right: 30px;
	.sidebar-widget{
		.title-sidebar-widget{
			padding-left: 0px;
			@include MQ(T){
				padding-right: 20px;
			}
		}
		.sidebar-content-widget{
			float: left;
			padding-left: 0px;
			@include MQ(T){
				padding-right: 20px;
			}

		}
	}
}
.right-bar{
	padding-left: 10px;
    @include RP(S){
        padding-left: 0px;
    }
}

//For detail blogs
.section-blog-detail{
	float: left;
	width: 100%;
	height: auto;
	// border-top: 1px solid $black_03;
	padding-top: 70px;
	.blogs-detail{
		padding-top: 30px;
		&.blogs-detail{
			padding-top: 30px;
		}
		img{
			max-width: 100%;
			height: auto;
		}
		.news-feature-image{
			float: left;
			width: 100%;
			height: auto;
			margin-bottom: 80px;
			img{
				width: 100%;
			}
		}
		.news-title{
			float: left;
			width: 100%;
			height: auto;
			font-family: $Ti;
			@include font-size(40px);
			font-weight: $Bold;
			line-height: 47px;
			margin-bottom: 25px;
		}
		.news-dateup{
			float: left;
			width: 100%;
			font-family: $La;
			font-weight: $Light;
			@include font-size(12px);
			line-height: 24px;
			margin-bottom: 40px;
			color: $black_05;
		}
		.news-content{
			font-family: $Me;
			@include font-size(13px);
			color: $black_07;
			font-weight: $Light;
			line-height: 25px;
			float: left;
			width: 100%;
			border-bottom:2px solid $black_02;
			padding-bottom: 100px;
			margin-bottom: 30px;
			@include RP(MD){
				padding-bottom: 350px;
			}
			@include RP(S){
				padding-bottom: 0;
			}
			img, div{
				max-width: 100%;
				height: auto;
				margin-bottom: 50px;
				@include RP(S){
					position: relative;
				}
			}
			blockquote{
				float: left;
				width: 100%;
				margin: 50px auto 50px;
				padding-top: 50px;
				padding-bottom: 50px;
				padding-left: 125px;
				border-top: 1px dashed rgba( $active-color, 0.5);
				border-bottom: 1px dashed rgba( $active-color, 0.5);
				border-left: none;
				position: relative;
				font-family: $La;
				font-style: italic;
				font-weight: $Light;
				color: $black_08;
				&:before{
					content: "“";
					font-family: $Ti;
					font-style:normal;
					@include font-size(111px);
					font-weight: bold;
					color: $active-color;
					position: absolute;
					width: 50px;
					height: 65px;
					line-height: 111px;
					@include center(y);
					// top: 90%;
					left:20px;
				}

			}
		}
	}
	.nav-detail{
		float: left;
		width: 100%;
		height: 165px;
		margin-bottom: 40px;
		.next-back{
			font-family: $Ti;
			font-style: italic;
			font-weight: $Bold;
			@include font-size(20px);
			width: 30%;
			.fa{
				float: left;
				width: 100%;
				font-weight: $Light!important;
				color: $black_02;
			}
			&:hover{
				color: $active-color;
				.fa{
					color: $active-color;
				}
			}
			&.prev-post{
				float: left;
			}
			&.next-post{
				float: right;
				text-align: right;
			}
		}
	}
	&.blogs-detail-full{
		padding-top:0px;
		.container{
			border-bottom: 1px dashed $black_01;
			.book-comment-form{
				margin-bottom: 70px;
			}
		}
		.full-feature-image{
			position: relative;
			height: 400px;
			width: 100%;
			float: left;
			overflow: hidden;
			margin-bottom: 40px;
			.image-cover-detail{
				position: absolute;
				@include center(xy);
				min-width: 100%;
				min-height: 400px;
			}
		}
	}
}
.banner-detail{
    float: left;
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    img{
        position: absolute;
        width: 100%;
        min-height: 400px;
        @include center;
    }
}




//For comment page
.book-about-author{
	float: left;
	width: 100%;
	height: auto;
	border-top: 1px dashed $black_02;
	border-bottom: 1px dashed $black_02;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	.author-avatar{
		img{
			float: left;
			width: 103px;
			height: 103px;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	.about-post-author{
		box-sizing:border-box;
		span{
			float: left;
			width: 100%;
			&.author-name{
				font-family: $Ti;
				@include font-size(18px);
				font-weight: $Bold;
				margin-bottom: 8px;
				a{
					color: $Black;
					&:hover{
						color: $active-color;
					}
				}
			}
			&.author-desc{
				font-family: $Me;
				@include font-size(12px);
				color: $black_07;
				margin-bottom: 20px;
				font-weight: $Light;
			}
			&.author-link{
				a{
					color: $black_08;
					font-family: $La;
					font-weight: $Light;
					@include font-size(12px);
				}
			}
		}
	}

}

.comment-list{
	float: left;
	width: 100%;
	height: auto;
	margin-top: 15px;
	border-bottom: 1px dashed $black_02;
	padding-bottom: 50px;
	margin-bottom: 30px;
	.title-comment-box{
		float: left;
		width: 100%;
		height: auto;
		margin-bottom: 20px;
		&:after{
			border: none;
		}
	}
	.comment{
		padding-bottom: 30px;
		width: 90%;
		float: left;
		position: relative;
		&:after{
			content: "";
			border-bottom: 1px dashed $black_01;
			width: 60px;
			position: absolute;
			bottom: 10px;
			left: 0px;
		}
		&:last-child{
			&:after{
				display: none;
			}
		}
		.comment-body{
			box-sizing: border-box;
			padding-left: 30px;
			font-family: $Me;
			color: $black_09;
			font-weight: $Light;
		}
	}
	.title-comment{
		float: left;
		width: 100%;
		margin-bottom: 20px;
		span{
			float: left;
			margin-right: 20px;
			font-family: $Me;
			@include font-size(13px);
			&.comment-name{
				font-weight: $Bold;
				color: $Black;
			}
			&.comment-posted-in{
				font-weight: $Light;
				font-style: italic;
				color: $black_05;
			}
		}
	}
	.sub-comment{
		box-sizing: border-box;
		padding-left: 30px;
	}
}
//For author page

/*
23. Author page
 */
.title-and-fillter{
	float: left;
	width: 100%;
	.title-box{
		letter-spacing: 0.1px;
		color: $black_03;
		&:after{
			border: none;
		}
	}
}

.imgleft, .imgright{
    width: 330px;
    @include RP(MD){
        width: 310px;
    }
}

.hidden-alphabeta{
    // position: absolute;
    display: none;
    @include center(y);
    position: fixed;
    left: 20px;
    width: 30px;
    line-height: 22px;
    @include RP(MD){
    	display: none!important;
    }
    ul{
        float: left;
        list-style: none;
        padding-left: 0px;
        li{
            float: left;
            width: 100%;
            text-align: center;
        }
    }
}

.fillter-alphabeta{
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 40px;
	border-top: 1px dashed $black_01;
	padding-top: 15px;
	ul{
		list-style: none;
		padding-left: 0px;
		padding-right: 0px;
		li{
			float: left;
			text-align: center;
			padding:5px 10px;
			font-family: $Ti;
			@include font-size(14px);
			color: #666666;
			cursor: pointer;
			// font-weight: $Bold;
			&:hover, &.active{
				// padding:5px 10px;
				a{
					color: $active-color;
				}
			}
            .item-text{
                float: left;
                width: 15px;
                height: 15px;
            }
			&:first-child{
				border-right: 1px solid $black_01;
			}
		}
	}
	#alphabeta-list{
		list-style: none;
		padding-left: 0px;
		margin-bottom: 0px;
		li{
			float: left;
            padding: 5px;
            a{
                padding: 5px;
            }
			&:first-child{
				text-align: left;
				padding-left: 0px;
			}
		}
	}

}

.single-authorbook{
	.fillter-alphabeta{
		border-top:none!important;
	}
}
.end-authorview{
    float: left;
    width: 100%;
    clear:both;
}
.list-name-author{
	float: left;
	width: 100%;
	height: auto;
	&.last-child{
		margin-bottom: 100px;
	}
	.title-alpha{
		font-family: $La;
		font-weight: $Bold;
		@include font-size(40px);
		margin-bottom: 30px;
		@include RP(S){
			margin-left: 15px;
		}
		span{
			font-weight: $Light;
			color: #999999;
			font-size: 0.75em;
			margin-left: 5px;
		}
	}
	.list-author-name{
		float: left;
		width: 100%;
		height: auto;
		list-style: none;
		padding-left: 0px;
		margin-bottom: 50px;
		padding-bottom: 50px;
		border-bottom: 1px dashed $black_01;
		&:first-child{
			margin-top: 30px;
		}
		li{
			line-height: 30px;
			margin-bottom: 5px;
			img{
				width: 120px;
				height: auto;
			}
			&.clearfix{
				float: left;
				width: 100%!important;
				clear: both!important;
				height: 1px!important;
			}
			a{
				@include font-size(16px);
				font-family: $Ti;
				font-weight: $Bold;
				color: $black_07;
				letter-spacing: 0.1px;
				&:hover{
					color: $active-color;
				}
				span{
					font-weight: $Light;
					font-family: $La;
					color: #999;
				}
			}
		}
		&.author-list-avatar{
			float: left;
			width: 100%;
			@include RP(S){
				margin-left: 15px;
			}
			.author-item{
				float: left;
				margin-right: 38px;
				margin-bottom: 10px;
				width: 120px;
				max-height: 175px!important;
				@include RP(S){
					margin-right: 20px;
				}
				&.last{
					margin-right: 0px;
					@include RP(MD){
						margin-right: 38px;
					}
				}
				p{
					min-height: 40px;
					float: left;
					margin-top: 5px;
					@include font-size(14px);
					color: $black_06;
					line-height: 15px;
				}
				&:hover{
					img{
						@include grayscale();
					}
					p{
						color: $active-color;
					}
				}
				&.view-more-author{
					a{
						float: left;
						width: 120px;
						height: 120px;
						background: #ede8de;
						position: relative;
						&:before{
							position: absolute;
							content: "+";
							@include center;
							@include font-size(40px);
							font-weight: $Light;
							color: $Black;
							opacity: 0.3;
							@include transition;
						}
						&:hover{
							&:before{
								opacity: 0.7;
							}
						}
					}
				}
			}
		}
	}

}
/*
24. For contact form
*/
//For contact page
.book-contact{
	float: left;
	width: 100%;
	height: auto;
	@include MQ(T){
		padding-top: 100px;
	}
    @include RP(S){
        padding-top: 30px;
    }
	// border-top: 1px solid $black_01;
	.book-contact-form{
		.success-form-message{
	        position: absolute;
	        padding: 10px 30px;
	        background: rgba(green, .5);
	        color: $White;
	        @include font-size(14px);
	        @include center(xy);
	        top: 30%;
	        @include transition;
	        border-radius: 50px;
	        opacity:0;
	        cursor: pointer;
	        &.active{
	            z-index: 999;
	            opacity:1;
	        }
	        &.error{
	            background: rgba(red, .5)!important;
	        }
	    }
	}

	.book-form-contact{
		float: left;
		position: relative;
		
		@include MQ(T){
			padding-right: 60px;
		}
		.title-box{
			width: 100%;
		}
		.book-address{
			float: left;
			width: 100%;
			span{
				width: 100%;
			}
			.book-place-name{
				font-family: $Ti;
				float: left;
				width: 100%;
				@include font-size(35px);
				font-weight: $Bold;
				color: $Black;
				line-height: 30px;
				padding-bottom: 30px;
			}
			.book-contact-add{
				float: left;
				margin-bottom: 30px;
				font-family: $Me;
				line-height: 30px;
				font-weight: $Light;
			}

		}
		.list-social{
			float: left;
			width: 100%;
			@include font-size(16px);
		}
		.contact-content{
			float: left;
			width: 100%;
			font-family: $Me;
			line-height: 22px;
			@include font-size(14px);
			font-weight: $Light;
			margin-top: 90px;
			width: 80%;
			&.content-contact-3{
				margin-top: 70px;
			}
		}
		.book-contact-form{
			float: left;
			width: 100%;
			height: auto;
			margin-top: 40px;
			margin-bottom: 120px;
			.txt-contact, .txt-message{
				margin-bottom: 20px;
				border: none;
				border-bottom: 2px solid $black_02;
				float: left;
				width: 100%;
				resize:none;
				box-sizing:border-box;
				padding-left: 15px;
				font-family: $Me;
				padding-bottom: 10px;
				@include font-size(12px);
				@include placeholder{
					font-style: italic;
					color: $black_03;
				}
				&:focus{
					border-bottom: 2px solid $black_03;
				}
			}
		}
	}
	.book-map-address{
		float: left;
		height: auto;
		#book-map-contact{
			float: left;
			width: 100%;
			height: 700px;
		}
	}
	&.full-column{
		padding-top: 0px;
		.book-map-address{
			#book-map-contact{
				float: left;
				width: 100%;
				height: 500px;
			}
		}
		.book-form-contact{
			padding-top: 100px;
			.text-form-contact{
				float: left;
				// width:
			}
		}
		.form-content{
			position: relative;
			.success-form-message{
				position: absolute;
				padding: 10px 30px;
				background: rgba(green, .5);
				color: $White;
				@include font-size(14px);
				@include center(xy);
				top: 30%;
				@include transition;
				border-radius: 50px;
				opacity:0;
				cursor: pointer;
				&.active{
					z-index: 999;
					opacity:1;
				}
			}
			&.form-contact2{
				padding-top: 73px;
				.contact-content{
					margin-bottom: 5px;
				}
			}
			.contact-content{
				margin-top: 0px;
				color: #262626;
				margin-bottom: 50px;
			}
			.txt-contact{
				width: 47%;
				margin-right: 6%;
				@include RP(S){
					margin:0px;
					width: 100%;
					margin-bottom: 30px;
				}
				&:nth-child(even){
					margin-right: 0px;
					float: right;

				}
			}
		}
	}
	&.full-center{
		.title-box{
			text-align: center;
			&:after{
				@extend .book-center;
			}
		}
		.text-form-contact {
			padding-bottom: 60px;
			border-bottom: 1px dashed $black_01;
		}
		.book-address{
			text-align: center;
		}
		.list-social{
			width: auto;
		}
		.contact-content{
			width: 95%;
			padding-top: 80px;
		}
	}
}

//Book comment form
//
.book-comment-form{
	float: left;
	width: 100%;
	height: auto;
	margin-top: 30px;
	margin-bottom: 150px;
	border-top: 1px dashed rgba(#000, .1);
	.comment-reply-title{
		float: left;
		width: 100%;
		margin-bottom: 30px;
		margin-top: 60px;
		text-transform: uppercase;
		font-family: $Ti;
		@include font-size(18px);
		letter-spacing:0.5px;
		@include RP(S){
			text-align: center;
		}
		&:after{
			border:none;
		}
	}
	.comment-form{
		float: left;
		width: 100%;
		ul{
			list-style: none;
			padding-left: 0px;
			margin-bottom: 0px;
		}
		.logged-in-as{
			margin-bottom: 60px;
		}
		li{
			float: left;
			box-sizing: border-box;
			margin-bottom: 30px;
			list-style: none;
			input[type="text"], textarea{
				border: none;
				border-bottom: 2px solid $black_01;
				float: left;
				width: 100%;
				padding-left: 15px;
				resize:none;
				max-height: 45px;
				@include placeholder(){
					font-family: $Me;
					font-style: italic;
					@include font-size(12px);
					color: $black_02;
					font-weight: $Light;
				}
			}
			&.txt-input-1st{
				padding-right: 20px;
				@include RP(S){
					padding-right: 0px;
				}
			}
			&.txt-input-2nd{
				padding-left: 20px;
				@include RP(S){
					padding-left: 0px;
				}
			}
		}
		.form-submit{
			float: left;
			width: 100%;
			height: auto;
			margin-top: 30px;
			.submit{
				float: right;
				border-color: $active-color;
				color: $active-color;
				@include RP(S){
					position: absolute;
					@include center(x);
				}
				&:hover{
					color: $White;
					// background: transparent;
				}
			}
		}
	}
}



//Page store
/*
25. Store page
 */
.list-store{
	padding-top: 30px;
	padding-bottom: 100px;
	height: auto;
	float: left;
	width: 100%;
	.clearfix{
		border-bottom: 1px dashed $black_01;
	}
	.item-store{
		text-align: center;
		padding: 50px;
	    height: 265px;
	    overflow: hidden;
		.store-title{
			font-family: $Ti;
			@include font-size(30px);
			font-weight: $Bold;
			color: $Black;
			text-transform: uppercase;
			margin-bottom: 25px;
		}
		.store-address{
			float: left;
			width: 100%;
			height: auto;
			color: $black_05;
			font-family: $La;
			@include font-size(12px);
			line-height: 21px;
		}

	}
}

/*
26. Breadthums
 */
.breadthums-navigation{
	float: left;
	width: 100%;
	height: 120px;
	// position: relative;
    @include RP(S){
        display: none;
    }
	.container{
		position: relative;
		height: 120px;
		padding-top: 5px;
		border-bottom: 1px dashed $black_01;
		z-index: 9;
	}
	.navigation-listcat{
		position: relative;
		float: left;
		@include center(y);
		.title-subcat{
			font-weight: $Heavy;
			@include font-size(16px);
			font-family: $La;
			text-transform: uppercase;
			color: $black_09;
			cursor: pointer;
			.fa{
				margin-right: 10px;
				color: $active-color;
			}
		}
	}
	.breadthums{
		position: relative;
		float: left;
		@include center(y);
		.list-breadthum{
			list-style: none;
			padding-left: 0px;
			margin-bottom: 0px;
			float: left;
			li{
				float: left;
				// margin-right: 10px;
				// margin-left: 10px;
				font-family: $La;
				color: $black_02;
				a{
					color: $black_03;
					&:hover{
						color: $active-color;
					}
				}
				&:first-child{
					margin-left: 0px;
				}
				&:after{
					content:"/";
					margin-left: 10px;
					margin-right: 10px;
				}
				&:last-child{
					&:after{
						content: "";
					}
				}
			}
		}
	}
	.fillter-navigation{
		position: relative;
		@include center(y);
		float: right;
		width: auto;
		height: 30px;
		.book-dropdown{
			margin-left: 20px;
		}
		.view-perpage{
			.sbHolder{
				padding-right: 0px;
				width: 45px;
			}
		}
		.control-grid{
			margin-top: 5px;
			margin-left: 20px;
		}
	}
}

/*
27. Page about
 */
//For page about
.image-magin-top{
	margin-top: 30px;
	position: relative;
	float: left;
	width: 100%;
	height: 570px;
	img{
		position: absolute;
		top: 0px;
		&:first-child{
			left: 0px;
		}
		&:last-child{
			right: 0px;
		}
	}
}
.book-ourteam{
	float: left;
	width: 100%;
	height:auto;
	padding-top: 100px;
	margin-bottom: 100px;
	.ourteam-list{
		float: left;
		width: 100%;
		height: auto;
	}
	.title-book{
		width: 100%;
		height: auto;
	}
}
.member-list{
	float: left;
	width: 100%;
	list-style: none;
	padding-left: 0px;
	.member-item{
		box-sizing:border-box;
		margin-left: 15px;
		margin-right: 15px;
		width: 244px;
		&:first-child{
			margin-left: 0px;
		}
		&:last-child{
			margin-right: 0px;
		}
		span{
			float: left;
			width: 100%;
			height: auto;
		}
		.member-name{
			font-family: $Ti;
			font-weight: $Bold;
			@include font-size(20px);
			line-height: 24px;
			margin-bottom: 0px;
			margin-top: 15px;
		}
		.member-job{
			font-family: $Me;
			font-weight: $Light;
			@include font-size(12px);
			line-height: 23.15px;
			margin-bottom: 10px;
			color: $black_05;
		}
		&:hover{
			color: $active-color;
			img{
				@include grayscale();
			}
		}
		.member-social{
			.list-social{
				li{
					margin: 3px;
					&:first-child{
						margin-left: 0px;
					}
				}
			}
			a{
				display: block;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background: $black_01;
				color: $black_05;
				text-align: center;
				line-height: 25px;
				&:hover{
					color: $White;
					background: $active-color;
				}
			}
		}
	}
}


//Section parthner slier
.parthner-slider{
	float: left;
	width: 100%;
	height: 120px;
	// margin-top: 40px;
	padding-top: 40px;
	@extend .section;
	margin-bottom: 40px;
	a{
		display: block;
	}
	.swiper-wrapper{
		a{
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			overflow: hidden;
			img{
				position: absolute;
				@include center(xy);
				opacity: 0.5;
				-webkit-transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				&:hover{
					opacity: 1;
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
			}
		}
	}

}


//For cart page
/*
28. 404 page
 */

//For 404 page
.section-404{
	background: url(../images/bg-404.jpg) no-repeat fixed center center;
	background-size: cover;
	float: left;
	width: 100%;
	height: auto;
}
.page-404{
	float: left;
	width: 100vw;
	height: 100vh;
	position: relative;
	-webkit-transition: height 2s  ease-out; /* Safari */
    transition: height 2s  ease-out;
    transition-timing-function: ease;
	.markup-404{
		float: left;
		width: 100%;
		height: 100%;
		position: relative;
		.info-page-404{
			position: absolute;
			@include center(xy);
			text-align: center;
			color: $White;
			font-family: $Ti;
			.title-page{
				@include font-size(50px);
				line-height: 30px;
				font-weight: $Bold;
			}
			.desc-page-404{
				font-style: italic;
				@include font-size(25px);
				line-height: 30px;
				margin-bottom: 50px;
			}
			.book-search-head{
				border-color: $white_05;
				@include center(x);
				width: 580px;
				padding:12px 20px 12px 20px;
				z-index: 89;
				i{
					color: $White;
					@include font-size(18px);
					left: 25px;
				}
				input{
					background:transparent;
					color: $White;
					width: 445px;
					@include font-size(18px);
					line-height: 18px;
					@include placeholder{
						// @include font-size(18px);
						color: $white_07;
					}
				}
				input[type="text"]{
					padding-left: 40px;
				}
				.sbHolder{
					color: $White;
					border-left: 1px solid $white_07;
					@include font-size(16px);
					text-align: left;
				}
				.sbSelector{
					color: $white_07!important;
					// @include font-size(18px);
				}
				.sbToggle {
					color: $white_07;
				}
				.sbOptions{
					background: #252420;
					text-align: left;
					a{
						color: $white_07;
					}
				}

			}
		}
	}
}

.cat-sugets{
	// position: relative;
	float: left;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 245px;
	background: $White;
	// z-index:99999999;
	// @include center(x);
	.cat-container{
		float: left;
		width: auto;
		@include center(x);
		position: absolute;
	}
	.list-sugest{
		float: left;
		width: 100%;
		list-style: none;
		padding-top: 25px;
		// white-space: nowrap;
		// display: inline-ta;
		padding-left: 0px;
		.items-category{
			float: left;
			width: 250px;
			height: 145px;
			position: relative;
			margin-right: 22px;
			background: #666;
			// display: flex;
			overflow: hidden;
			@include transition(fast);
			&:last-child{
				margin-right: 0px;
			}
			img{
				min-width: 100%;
				min-height: 145px;
				width: auto;
				position: absolute;
				@include center(xy);
				opacity: 0.3;
				@include transition;
			}
			&:hover{
				img{
					opacity: 1;
					min-width: 102%;
					min-height: 160px;
				}
			}
			a{
				float: left;
				width: 100%;
				height: 100%;
				text-align: center;
				// position: absolute;
				// @include center(y);
				position: relative;
				.c-item{
					position: relative;
					@include center(xy);
					float: left;
					width: 100%;
					height: auto;
				}
				span{
					float: left;
					width: 100%;
					&.cat-title{
						font-family: $Ti;
						font-weight: $Bold;
						@include font-size(16px);
						color: $White;
					}
					&.cat-num{
						@include font-size(12px);
						font-family: $La;
						color: $white_05;
					}
				}
				// &:hover{
				// 	span{
				// 		color: $active-color;
				// 	}
				// }
			}
		}
	}
}

.select2-container .select2-choice{
	border:none;
	border-bottom: 1px solid $black_01;
	border-radius: 0px;
}

/*
27. Shop cart
 */
//Cart page
@include RP(MD){
    .woocommerce-shipping-fields{
        box-sizing: border-box;
        padding-left: 15px;
        width: 95%;
        @include RP(S){
            width: 100%;
        }
    }
}
.shopping-cart{
	float: left;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	.woocommerce-checkout{
		.box-check-out{
			#customer_details{
				.form-row-first{
					width: 100%;
				}
				.form-row-last{
					width: 100%;
				}
			}
			input[type="text"]{
				float: left;
			    background: transparent;
			    border: none;
			    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			    padding-left: 10px;
			    box-sizing: border-box;
			    height: 30px;
			    font-family: "Merriweather", serif;
			    width: 100%;
			    font-size: 0.92308em;
			    font-weight: 300;
			    font-style: italic;
			    margin-bottom: 20px;
			}
			textarea{
				float: left;
			    background: transparent;
			    border: none;
			    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			    padding-left: 10px;
			    box-sizing: border-box;
			    height: 30px;
			    font-family: "Merriweather", serif;
			    width: 100%;
			    font-size: 0.92308em;
			    font-weight: 300;
			}
			#billing_email{
				float: left;
			    background: transparent;
			    border: none;
			    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			    padding-left: 10px;
			    box-sizing: border-box;
			    height: 30px;
			    font-family: "Merriweather", serif;
			    width: 100%;
			    font-size: 0.92308em;
			    font-weight: 300;
			}
			#billing_phone{
				float: left;
			    background: transparent;
			    border: none;
			    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			    padding-left: 10px;
			    box-sizing: border-box;
			    height: 30px;
			    font-family: "Merriweather", serif;
			    width: 100%;
			    font-size: 0.92308em;
			    font-weight: 300;
			}
			.shipping-address{
				clear: inherit;
    			width: initial;
                @include RP(S){
                    width: 100%;
                }
			}
			.billing-address{

			}
		}
	}
	.title-page{
		font-family: $La;
		@include font-size(30px);
		line-height: 22px;
		text-transform: uppercase;
		color: $Black;
		margin-bottom:80px;
		font-weight: $Bold;
        @include RP(S){
            @include font-size(18px);
        }
	}
	.main-cart{
		// padding-right: 40px;
		box-sizing: border-box;

	}
	#payment{
		background-color:transparent;
		#place_order{
			background: $active-color;
			border-color: $active-color;
			color: $White;
			margin-right: 15px;
			border-radius: 25px;
			padding: 11px 30px;
			&:hover{
				background: $active-color;
				border-color: $active-color;
				opacity: 0.8;
			}
		}
	}
	.shop_table{
		float: left;
		width: 100%;
		height: auto;
		border: none;
		background-color: #fff;
		border:none!important;
		&.wishlist_table{
			border-top: none;
			tr{
				font-size: 1.3em;
				th{
					border-top: none;
				}
			}
			.product-name{
				padding: 16px 12px;
			}
		}
		&.woocommerce-checkout-review-order-table{
			tbody{
				tr{
					td{
						.book-item{
							width: 100px;
							.book-image{
								img{
									width: 100px;
								}
							}
						}
						&.product-name{
							padding:0;
						}
						.product-info-name{
							font-size: 1.53846em;
							font-weight: bold;
							margin-bottom: 10px;
    						line-height: 22px;
						}
						.product-quantity{
							font-size: 1.53846em;
						}
						&.product-total{
						    font-size: 1.07692em;
						    font-weight: bold;
						    color: rgba(0, 0, 0, 0.7);
							font-family: $Me;
						}
					}
				}
			}
		}
		tr{
			float: left;
			width: 100%;
			padding-top: 30px;
			padding-bottom: 30px;
			border-bottom: 1px dashed $black_02;
			&:last-child{
				border:none;
			}
			&.border-bottom{
				border-bottom: 2px solid $black_02;
			}
		}
		thead{
			border-bottom: 2px solid $black_01;
			tr{
				border:none;
				padding-left: 0px;
				padding-right: 0px;
				&:first-child{
					padding-top: 0px;
					border-bottom: 2px solid rgba(0, 0, 0, 0.2);
				}
				th{
					text-align: center!important;
					float: left!important;
					font-family: $Me;
					font-weight: $Light;
					color: $black_07;
					&:first-child{
						text-align: left!important;
					}
					&.product-name{
						text-align: left!important;
						padding: 9px 0;
					}
				}
			}
		}

		tbody{
			float: left;
			width: 100%;
			height: auto;
			border-bottom: 2px solid rgba(0, 0, 0, 0.2);
			.number-pro{
				float: left;
				width: 20px;
				margin-right: 10px;
				height: 100%;
				font-family: $Ti;
				font-weight: $Bold;
				@include font-size(18px);
			}
			.product-info-name{
				float: left;
				margin-left: 15px;
				width: 184px;
				text-align: left;
				@include RP(S){
					width: 120px;
					margin-left: 0;
				}
				&.name-full{
					width: 70%;
				}
				a, span{
					float: left;
					width: 100%;
				}
				a{
					font-family: $Ti;
					font-weight: $Bold;
					@include font-size(20px);
					color: $Black;
					margin-bottom: 10px;
					line-height: 22px;
					@include RP(S){
						font-size: 1.3em;
					}
					&:hover{
						color: $active-color;
					}
				}
				span{
					color: $black_05;
					font-family: $La;
					@include font-size(14px);
					&.book-desc{
						margin-top: 10px;
					}
				}

			}
			tr{
				&.cart_item{
					.product-thumbnail{
						padding: 6px 0;
						display: block;
						.book-item{
							width: 60px;
							@include RP(M){
								margin-left: 55px;
							}
							@include RP(S){
								margin-left: 20px;
							}
							.book-image{
								img{
									width:60px;
								}
							}
						}
					}
				}
				td{
					text-align: center;
					float: left!important;
					border-top: none;
					@include RP(S){
						max-width: 25%;
						padding: 0;
					}
					&:first-child{
						text-align: left;
						@include RP(M){
							display: block;
						}

					}
					&.product-price, &.product-subtotal{
						font-family: $Me;
						@include font-size(14px);
						font-weight: $Bold;
						color: $black_07;
						.remove_from_wishlist{
							color: rgba(0, 0, 0, 0.4)!important;
							font-size: 0.8em;
							font-weight: 300;
							width: initial;
							padding: 10px 0;
							&:hover{
								background: none;
								color: $active-color;
							}

						}
					}
					&.product-add-to-cart{
						a{
							background: $active-color;
							border-color: $active-color;
							color: $White;
							margin-right: 15px;
							border-radius: 25px;
							padding: 11px 30px;
                            @include RP(MD){
                                padding: 11px 6px;
                            }
                            @include RP(S){
                            	margin-right: 0;
                            }
							&:hover{
								background: $active-color;
								border-color: $active-color;
								opacity: 0.8;
							}
						}
					}
					&.product-stock-status{
						span{
							color: rgba(0, 0, 0, 0.4);
						}
					}
					&.product-name{
						min-width: 280px;
					}
					&.product-quantity{
						.quantity{
							.book-quanlity{
								display: none;
							}
						}
						a{
							color: rgba(0, 0, 0, 0.4)!important;
							@include font-size(13px);
							font-weight: 300;
							width: initial;
							padding: 10px 0;
							&:hover{
								background: none;
								color: $active-color;
							}
						}
					}
					input{
						width: 50px;
						padding-left: 10px;
						padding-right: 10px;
						border: 1px solid $black_02;
						border-radius: 150px;
						text-align: center;
						font-family: $La;
						margin-bottom: 10px;
					}
				}
			}
		}

		tfoot{
			border-top: 2px solid $black_01;
			text-transform: uppercase;
			font-family: $La;
			font-weight: $Bold;

			th{
				border-top: none!important;
			}
			tr{
				padding-top: 20px;
				padding-bottom: 20px;
				&:last-child{
					padding-top: 30px;
				}
				td{
					border-top: none;
					padding-left: 0;
				}
			}
			.checkout-button{
				background: $active-color;
				border-color: $active-color;
				color: $White;
				margin-right: 15px;
				border-radius: 25px;
				padding: 11px 30px;
				&:hover{
					background: $active-color;
					border-color: $active-color;
					opacity: 0.8;
				}
			}
			span{
				font-family: $Me;
				@include font-size(12px);
				color: $black_07;
				text-transform: none;
				font-weight: $Bold;
				line-height: 40px;
			}
		}
		.amount-center{
			float: left!important;
			text-align: center!important;
			font-family: $Me;
			font-weight: $Bold;
			@include font-size(18px);
			line-height: 23px;
		}
	}
}

@include RP(S){
    .login-page, .col-2{
        h2{
            padding-left: 15px;
            padding-right: 15px;
        }
        form{
            border:none!important;
        }
    }
    .wishlist_table{
        thead{
            display: none!important;
        }
        td{
            width: 100%!important;
        }
    }
}
.info-cart{
	box-sizing:border-box;
	// padding-left: 30px;
	.title-box-cart{
		font-family: $La;
		font-weight: $Bold;
		text-align: right;
		float: left;
		width: 100%;
		float: left;
		text-transform: uppercase;
		margin-bottom: 20px;
		&.text-left{
			text-align: left!important;
			max-width: 50%!important;
		}
		@include font-size(16px);
		a{
			color: $active-color;
		}
		i{
			font-size:1.2em;
		}
	}
	.box-info-cart{
		float: left;
		width: 100%;
		padding-top: 110px;
		.title-cart-total{
			margin-top: 10px;
			font-family: $La;
			font-weight: $Bold;
			color: $black_07;
			text-transform: uppercase;
			margin-bottom: 5px;
			@include font-size(16px);
		}
		&.cart-type-2{
			padding-top: 30px;
			table{
				tr{

					td{
						box-sizing: border-box;
						font-family: $La;
						@include font-size(12px);
						&:first-child{
							text-align: right!important;
							padding-right: 5px;
						}
						&:last-child{
							padding-left: 5px;
							text-align: left!important;
						}
					}
					&.no-border{
						td{
							font-weight: $Bold;
							&:first-child{
								color: $black_07;
							}
						}
					}
					&.grand-total{
						text-transform: uppercase;
						color: $active-color;
						td{
							font-weight: $Bold;
							line-height: 25px;
							&:last-child{
								font-family: $Me;
								@include font-size(25px);
							}
						}
					}
				}
			}
		}
		table{
			float: left;
			width: 100%;
			tr{
				float: left!important;
				width: 100%;
				&.shipping{
						color: #000;
						td:last-child{
							width: 100%;
						}
					}
				&:first-child{
					border-top: 1px dashed $black_01;
					padding-top: 15px;
				}
				td{
					float: left!important;
					padding-top: 5px;
					padding-bottom: 5px;
					font-family: $Me;
					font-weight: $Light;
					@include font-size(12px);
					&:first-child{
						width: 75%;
					}
					&:last-child{
						width: 25%;
						text-align: center;
					}
				}
			}
			.total-cart-preview{
				float: left;
				padding-top: 15px;
				margin-top: 15px;
				border-top: 1px dashed $black_01;
				td{
					text-transform: uppercase;
					font-family: $La;
					font-weight: $Bold;
					line-height: 23px;
				}
			}
		}
		.content-box-cart{
			float: right;
			background: #f1f1f1;
			margin-top: 10px;
			box-sizing: border-box;
			padding:20px;
			&.box-half{
				width: 100%;
			}
		}
		.footer-box-cart{
			float: left;
			margin-top: 20px;
			&.box-half{
				width: 100%;
			}
			.coupon-cart{
				font-family: $La;
				font-weight: $Bold;
				color: $black_05;
				text-transform: uppercase;
				@include font-size(16px);
				margin-bottom: 10px;
				margin-top: 20px;
			}
			.input-coup-on{
				float: left;
				width: 100%;
				border: 2px solid $black_02;
				// height: 32px;
				box-sizing: border-box;
				padding:3px 10px 3px 10px;
				border-radius: 150px;

				input{
					background: transparent;
					border:none;
					max-width: 138px;
                    @include RP(M){
                        max-width: 50%;
                    }
				}
				input[type='submit']{
					border-left: 1px solid $black_02;
					font-weight: $Bold;
					text-transform: uppercase;
					font-family: $La;
					// height: 15px;
					// line-height: 15px;
					@include font-size(11px);
					padding-right: 0px;
					color: $black_05;
                    @include RP(MD){
                        width: 48px;
                    }
				}
			}
		}
	}
}
//footer for button in shoping cart 2
.foot-button{
	float: left;
	width: 100%;
	td{
		float: left!important;
		text-align: right!important;
		white-space: nowrap!important;
		font-weight: normal!important;
		float: left;
		width: 100%!important;
		// margin-right: 73%;
		span{
			color: $black_07;
			float: right;
			line-height: 30px;
		}
		a{
			margin-left: 15px;
			float: right;
			color: $black_08;
			border-color: $black_08;
			&:hover{
				background-color: $active-color;
				color: $White;
			}
		}
	}
}



/*
29. Landing page
 */

//For landingpage
.humberger{
	width: 22px;
	height: auto;
	position: absolute;
	right: 0px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0px;
	@include center(y);
	i{
		float: left;
		margin-top: 5px;
		height: 2px;
		background: $White;
		width: 100%;
		&:first-child{
			margin-top: 0px;
		}
	}
}

.header-landing{
	float: left;
	width: 100%;
	height: auto;
	position: relative;
	.top-header{
		float: left;
		width: 100%;
		height: 100px;
		top: 40px;
		left: 0px;
		position: absolute;
		.container-fluid{
			position: relative;
			height: 100%;
		}
		#logo{
			position: absolute;
			float: left;
			@include center(y);
		}
		.humberger-landing{
			position: absolute;
			right: 0px;
			@include center(y);
		}
	}
	.slider-landing{
		float: left;
		width: 100%;
		height: auto;
		img{
			width: 100%;
			height: auto;
		}
	}
}

.about-book-landing{
	float: left;
	width: 100%;
	height: 1px;
	.container{
		position: relative;
	}
	.book-item-intro{
		position: absolute;
		left: 0px;
		top: -465px;
		.book-info-show{
			box-sizing:border-box;
			padding-left: 40px;
			color: $White;
			a{
				color: $White;
			}
		}
		.book-info{
			.book-name{
				font-family: $Ti;
				@include font-size(60px);
				line-height: 70px;
				margin-bottom: 10px;
			}
			.book-author{
				font-family: $La;
				@include font-size(16px);
				line-height: 25px;
				color:$White;
				margin-bottom: 40px;
				a{
					color: $White!important;
					text-transform: uppercase;
					&:hover{
						color: $active-color!important;
					}
				}
			}
			.book-desc{
				font-family: $Me;
				font-weight: $Light;
				line-height: 25px;
				letter-spacing: 0.1;
				margin-bottom: 35px;
			}
			.book-buy{
				.book-button{
					line-height: 35px;
					@include font-size(14px);
				}
			}
		}
	}

}



//For section instagram
.landing-author-instagram{
	float: left;
	width: 100%;
	min-height: 450px;
	position: relative;
	.title-instagram{
		position: absolute;
		@include center(xy);
		@include font-size(60px);
		font-family: $Ti;
		color: $Black;
		font-style: italic;
		font-weight: $Bold;
		z-index: 999999;
		.fa{
			margin-right: 25px;
		}
	}
	.list-image-instagram{
		float: left;
		width: 100%;
		height: auto;
		list-style: none;
		overflow: hidden;
		padding-left: 0px;
		position: relative;
		@include center(x);
		.insta-image{
			float: left;
			width: 16.666%;
			box-sizing:border-box;
			border: 1px solid #fff;
			height: auto;
			overflow: hidden;
			&.insta-width2{
				width:33.3333%;
			}
			img{
				opacity: 0.4;
				width: 100%;
				@include transition(fast);
				min-height: 100%;
				&:hover{
					opacity: 1;
				}
			}
		}
	}
}


//For blog page landing
.landing-book-blog{
	float: left;
	width: 100%;
	height: auto;
	padding-top: 100px;
	padding-bottom: 150px;
	.landing-list-news{
		float: left;
		width: 100%;
		height: auto;
		padding-left: 0px;
		list-style: none;
		li{
			float: left;
			width: 50%;
			box-sizing:border-box;
			&:hover{
				a{
					color: $active-color;
				}
				img{
					opacity: 0.8;
				}
			}
			.news-landing-book{
				float: left;
				margin-right: 30px;
				width: 46%;
			}
			div{
				float: left;
				width: 35%;
				a{
					font-family: $Ti;
					@include font-size(20px);
					line-height: 24px;
					font-weight: bold;
					color: $Black;
					margin-bottom: 20px;
					float: left;
					width: 100%;
				}
				.time-up{
					float: left;
					width: 100%;
					font-family: $Me;
					font-weight: $Light;
					@include font-size(12px);
					color: $black_05;
				}
			}
		}
	}
}


//Contact page landding

.story-about-book{
	float: left;
	width: 100%;
	height: auto;
	padding-top: 100px;
	padding-bottom: 100px;
	.title-box{
		margin-bottom: 50px;
	}
	.book-story-list{
		float: left;
		width: 100%;
		height: auto;
		.row{
			float: left;
			width: 100%;
			height: auto;
			margin-bottom: 75px;
			div{
				box-sizing:border-box;
				h2{
					font-weight: $Bold;
					@include font-size(40px);
					margin-top: 0px;
				}
				h3{
					font-weight: $Bold;
					@include font-size(20px);
					margin-top: 0px;
				}
				p{
					font-family: $Me;
					font-weight: $Light;
					@include font-size(13px);
					line-height: 25px;
				}
				&:first-child{
					padding-right: 15px;
				}
				&:last-child{
					padding-left: 15px;
				}
			}
			&:nth-child(1){
				text-align: right;
				img{
					float: left;
				}
			}
			&:nth-child(2){
				text-align: left;
				img{
					float: right;
				}
			}
		}
	}
}


//book-player-video
.book-player-video{
	float: left;
	width: 100%;
	height: auto;
	// position: relative;
	// background: url(../images/landing/bg-video.jpg) no-repeat center center;
	// background-attachment: fixed;
	background-size: cover;
	padding-top: 155px;
	padding-bottom: 155px;
	.container{
		position: relative;
	}
	.desc-book-player{
		font-family: $Ti;
		@include font-size(40px);
		line-height: 55px;
		font-style: italic;
		color: $White;
		float: left;
		height: auto;
		position: absolute;
		@include center(y);
		left: 0px;
		text-align: right;
		box-sizing: border-box;
		padding-right: 30px;
	}
	.player-image{
		box-sizing:border-box;
		padding-left: 15px;
		position: relative;
		.button-play{
			background: url(../images/landing-play.png) no-repeat;
			background-position: left center;
			width:70px;
			height: 70px;
			position: absolute;
			@include center(xy);
			cursor: pointer;
			&:hover{
				background-position: right center;
			}
		}
	}

}

//For count down
.count-down-beboo{
	float: left;
	width: 100%;
	height: auto;
	// background: url(../images/landing/bg-countdown.jpg) no-repeat;
	// background-attachment: fixed;
	padding-top: 280px;
	padding-bottom: 80px;
	background-size: cover;
	.countdown-section{
		float: left;
		width: 100%;
		height: auto;
		.count-down-time{
			float: left;
			display: inline-block;
			position: relative;
			@include center(x);
			list-style: none;
			padding-left: 0px;
			margin-bottom: 70px;
			li{
				float: left;
				width: 180px;
				height: auto;
				color: $White;
				text-align: center;
				font-family: $La;
				h3{
					@include font-size(60px);
					line-height: 60px;
					font-weight: $Light;
				}
				p{
					@include font-size(20px);
					line-height: 60px;
					font-weight: 300;

				}
			}
		}
	}
	.text-subcribe{
		float: left;
		width: 100%;
		height: auto;
		margin-top: 30px;
		font-family: $Me;
		@include font-size(13px);
		line-height: 20px;
		font-weight: $Light;
		text-align: center;
		color: $white_04;
	}
}

.images-absolute{
	float: left;
	width: 100%;
	height: 300px;
	position: relative;
	margin-top: 30px;
	img{
		position: absolute;
		&:first-child{
			left: 0px;
			top: 0px;
		}
		&:last-child{
			right: 0px;
			top: 0px;
		}
	}
}

//Section advertising
.book-advertising{
	@extend .section;
	padding-top: 30px;
	padding-bottom: 30px;
}

.form-subcribe{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	padding-top: 155px;
	padding-bottom: 155px;
	@include RP(S){
		float: left;
		width: 100%;
	}
	.mail-subcribe{
		float: left;
		content: "";
		width: 30px;
		height: 19px;
		background: url(../images/subcribe-mail.png) no-repeat center center;
		position: absolute;
		margin-top: 10px;
		margin-left: 30px;
		@include RP(M){
			bottom: 15px;
		}
		@include RP(S){
			bottom: 55px;
		}
	}
	.subcribe-form-view{
		float: left;
		@include center(xy);
		position: absolute;
		// display: table-cell;
		text-align: center;
		@include RP(MD){
			width: 100%;
		}
		.title-subcribe{
			text-transform: uppercase;
			margin-bottom: 20px;
			@include MQ(MD){
				white-space: nowrap;
			}
			strong{
				font-family: $Ti;
				font-weight: $Bold;
				@include font-size(45px);
				color: $active-color;
				letter-spacing: 0.3px;
				margin-right: 5px;
				@include MQ(T){
					white-space: nowrap;
				}
				@include RP(M){
					width: 100%;
					float: left;
				}
				@include RP(S){
					margin-top: -30px;
					@include font-size(25px);
				}
			}
			span{
				font-style: italic;
				font-family: $La;
				// font-weight: 300;
				@include font-size(25px);
				color: #848484;
				letter-spacing: 0.5px;
				@include MQ(T){
					white-space: nowrap;
				}
				@include RP(M){
					width: 100%;
					float: left;
				}
				@include RP(S){
					margin-bottom: 20px;
					@include font-size(16px);
				}
			}
		}
		.txt-subcrible-text{
			border: none;
			background: transparent;
			border-bottom: 1px solid $black_01;
			box-sizing: border-box;
			width: 486px;
			height: 30px;
			padding-left: 80px;
			margin-right: 20px;
			font-family: $Me;
			line-height: 16px;
			// padding-top: 15px;
			padding-bottom: 15px;
			@include RP(S){
				position: relative;
				@include center(x);
				width: 90%;
				padding-left: 0px;
				padding-right: 0px;
				text-indent: 80px;
			}
		}
		.book-button{
			position: relative;
			top: 5px;
			@include RP(S){
				top: 25px;
			}
			// margin-top: 2px;
		}
	}
}


/*
Get info author
 */
.row-full-info{
	float: left;
	width: 100%;
	// height: 0px;
	height: 0px;
	background: #252420;
	position: absolute;
	left: 0px;
	overflow: hidden;
	/*// @include transition;*/
	opacity:0;
	&.active{
		height: 670px;
		opacity: 1;
		animation-name: expand;
		animation-duration: 1.5s;
		animation-timing-function: ease-out;
	}
}

@keyframe expand {
      0% { height: 0px; }
    100% { height: 670px; }
}


.fill-result{
	float: left;
	width: 100%;
	// display: none;
	position: relative;
	min-height: 670px;
	// margin-bottom: 10px;
	// animation-name: expand;
	// animation-duration: 1.5s;
	// animation-timing-function: ease-out;

}

#result-author{
	.detail-author-book{
		padding-bottom: 0px;
		// position: relative;
		.close-detail-author{
			position: absolute;
			top: 25px;
			right: 25px;
			width: 25px;
			height: 25px;
			cursor: pointer;
			background: url(../images/icon-x-hover.png) no-repeat center center;
			opacity: 0.2;
			&:hover{
				opacity: 1;
			}
		}
	}
}


/*//Box half cart type 2*/
.box-cart-left{
	float: left;
}

.no-results{
	padding-top: 50px;
	text-align: center;
	.searchform{
		position: relative;
		margin-top: 30px;
		@include center(x);
	}
}

.footer-suppertop{
	float: left;
	width: 100%;
	padding-bottom: 50px;
	font-family: $Me;
	font-weight: $Light;
}
.super-ftop{
	text-align: center;
	vertical-align: text-bottom;
	height: auto;
	@include RP(M){
		display: none;
	}
	&.social{
		@include RP(M){
			display: block;
		}
	}
	*{
		border-color: $black_01;
	}
	.title-language{
		float: left;
		width: 100%;

	}
	.title-box{
		float: left;
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
		&:after{
			display: none;
		}
	}
	&:nth-child(2){
		box-sizing: border-box;
		border-left: 1px dashed $black_01;
		border-right: 1px dashed $black_01;
		padding-left: 3%;
		padding-right: 3%;
		min-height: 160px;
		display: table;
		.content-ftop{
			float: left;
			width: 100%;
			height: auto;
			display: table-cell;
			vertical-align: bottom;
		}
	}
	.list-link{
		float: left;
		position: relative;
		@include center(x);
		padding-bottom: 20px;
		li{
			height: 62px;
			float: left;
			a{
				float: left;
				height: auto;
				margin-top: 45px;
			}
			&:first-child{
				margin-right: 20px;
				width: 122px;
				text-align: right;
                @include RP(M){
                    width: auto;
                }
				a{
					float: right;
				}
			}
			&:last-child{
				margin-left: 20px;
			}
		}
	}
	.list-lang{
		li{
			margin-right: 25px;
			@include RP(S){
				width: 100%;
				float: left;
			}
			img{
				margin-right: 10px;
			}
			&:last-child{
				margin-right: 0px;
			}
		}
	}
	ul{
		float: left;
		list-style: none;
		padding-left: 0px;
		margin-bottom: 0px;
		li{
			float: left;
		}
	}

	//Detail element on this
	.book-subcribe-form{
		margin-top: 15px;
		.subcribe-message{
			color: $black_05;
		}
		form{
			input{
				color: $black_05;
			}
			input[type="submit"]{
				border-left: 2px solid $black_01;
			}
		}
	}
	.app-list{
		float: left;
		width: 100%;
		height: auto;
		border-bottom: 1px dashed $black_01;
		margin-bottom: 25px;
	}
	.language-footer{
		.title-language{
			margin-bottom: 15px;
		}
	}
	.social-list{
		li{
			margin-right: 5px;
			a{
				display: block;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				line-height: 26px;
				text-align: center;
				background: rgba(#ccc, 0.6);
				color: $White;
				&:hover{
					background: rgba(#4c4c4c, 0.7);
				}
			}
		}
	}

	}
/*
30. footer
 */

//For footer
footer{
	float: left;
	width: 100%;
	height: auto;
	padding-top: 100px;
	border-top: none;

	&.footer-landing{
		padding-top: 0px;
	}
	.top-footer{
		float: left;
		width: 100%;
		padding-bottom: 100px;
		.footer-logo{
			margin-bottom: 30px;
		}
	}
    @include RP(M){
        @include MQ(T){
            .col-sm-2{
                width: 30%!important;
                margin-bottom: 30px;
                box-sizing: border-box;
                padding-right: 30px;
            }
        }
    }
    .footer-column{
        padding-left: 15px;
        padding-right: 15px;
        &:first-child{
            padding-left: 0px;
        }
        &:last-child{
            padding-right: 0px;
        }
    }
	.footer-widget{
		float: left;
		width: 100%;
		height: auto;
        box-sizing:border-box;
        padding-left: 15px;
        padding-right: 15px;
        &:first-child{
            padding-left: 0px;
        }
        &:last-child{
            padding-right: 0px;
        }
		@include RP(S){
			margin-bottom: 50px;
		}
		.widget-title{
			width: 100%;
		}
		.widget-body{
			font-family: $Me;
			line-height: 20px;
			color: $black_05;
			.menu, .product-categories{
				list-style: none;
				padding-left: 0px;
				margin-bottom: 0px;
				li{
					float: left;
					width: 100%;
					height: auto;
					margin-bottom: 5px;
					line-height: 25px;
					&.col-md-6, &.col-sm-6{
						width: 50%;
					}
					a{
						font-weight: $Light;
						color: $black_05;
						&:hover{
							color: $active-color;
						}
					}
				}
			}
			.book-info{
				width: 50%;
				box-sizing: border-box;
				padding-left: 15px;
				.book-rate{
					margin-top: 5px;
				}
				.book-price{
					margin-top: 12px;
					@include font-size(16px);
					color: $black_07;
				}
			}
		}
		.widget-footer{
			float: left;
			width: 100%;
			margin-top: 20px;
		}

	}

	//Footer for landinpage

	.landing-social-author{
		float: left;
		width: auto;
		position: relative;
		@include center(y);
		a{
			color: $white_04;
			&:hover{
				color: $White;
			}
		}
	}
	//End footer for landing

	.bottom-footer{
		float: left;
		width: 100%;
		background: #252420;
		height: 80px;
		position: relative;
		z-index: 9999;
		.container, .container-fluid{
			position: relative;
			height: 100%;
		}
		.payment{
			left: 0px;
			position: absolute;
			@include center(y);
			@include RP(S){
				display: none;
			}
			a{
				display: inline-block;
				margin-right: 15px;
				opacity: 0.4;
				&:hover{
					opacity: 0.9;
				}
			}
		}
		.copyright{
			right: 0px;
			position: absolute;
			@include center(y);
			color: $white_02;
			@include RP(S){
				text-align: center;
				width: 100%;
			}
			a{
				color: $white_02;
			}
		}
	}
}



//For playlist on product detail
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

.gradient{
    background: rgba(51,89,172,1);
    background: -moz-linear-gradient(left, rgba(51,89,172,1) 0%, rgba(27,163,217,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,89,172,1)), color-stop(100%, rgba(27,163,217,1)));
    background: -webkit-linear-gradient(left, rgba(51,89,172,1) 0%, rgba(27,163,217,1) 100%);
    background: -o-linear-gradient(left, rgba(51,89,172,1) 0%, rgba(27,163,217,1) 100%);
    background: -ms-linear-gradient(left, rgba(51,89,172,1) 0%, rgba(27,163,217,1) 100%);
    background: linear-gradient(to right, rgba(51,89,172,1) 0%, rgba(27,163,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3359ac', endColorstr='#1ba3d9', GradientType=1 );
}

$jplayer-images-base-url: "../image/" !default;
$player-height: 50px;

.jp-audio *:focus,
.jp-audio-stream *:focus,
.jp-video *:focus {
    /* Disable the browser focus highlighting. */
    outline:none;
}

.jp-audio button::-moz-focus-inner,
.jp-audio-stream button::-moz-focus-inner,
.jp-video button::-moz-focus-inner {
    /* Disable the browser CSS3 focus highlighting. */
    border: 0;
}
#jquery_jplayer_2{
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.jp-type-playlist{
    float: left;
    width: 100%;
}
.jp-audio{
    float: left;
    width: 100%;
    // margin-top: 35%;
    bottom: 0px;
    height: $player-height;
    margin-left: auto;
    margin-right: auto;
    background:$white_08;
    position: fixed;
    z-index: 99999999;
    button{
        border: none;
        background: transparent;
        font-family: $Aw;
        line-height: $player-height;
        padding-top: 0px;
        padding-bottom: 0px;
        cursor: pointer;
        color: $black_05;
        @include font-size(14px);
        border-radius: 0;
    }
    .jp-current-song{
        float: left;
        width: 15%;
        height: $player-height;
        p{
            line-height: $player-height*0.5;
            float: left;
            width: 100%;
            margin-bottom: 0px;
            margin-top: 0px;
        }
    }
    .jp-type-playlist{
        float: left;
        margin-left: 15px;
        .jp-gui{
            float: left;
            width: 100%;
            height: auto;
            .jp-controls{
                float: left;
                width: 12%;
            }
            .jp-progress{
                float: left;
                width: 45%;
                height: $player-height;
                cursor: pointer;
                .jp-seek-bar{
                    float: left;
                    width: 100%;
                    position: relative;
                    @include center(y);
                    height: 2px;
                    background: rgba(#fff, .8);
                    border-radius: 5px;
                    .jp-play-bar{
                        float: left;
                        @extend .gradient;
                        height: 2px;
                    }
                }
            }
            button{
                // display: block;
                &.jp-previous{
                    &:before{
                        content: "\f04a";
                    }
                }
                &.jp-play{
                    &:before{
                        content: "\f04b";
                    }
                }
                &.jp-next{
                    &:before{
                        content: "\f04e";
                    }
                }
                &.jp-stop{
                    &:before{
                        content: "\f04d";
                    }
                }
            }
        }
    }
    &.jp-state-playing{
        .jp-type-playlist{
            .jp-gui{
                button{
                    &.jp-play{
                        &:before{
                            content: "\f04c";
                        }
                    }
                }
            }
        }
    }
    .jp-volume-controls{
        font-family: $Aw;
        float: left;
        width: 40px;
        line-height: $player-height;
        margin-left: 10px;
        .jp-mute{
            &:before{
                content: "\f028";
                // content: "\f026";
            }
        }
        .jp-volume-max{
            display: none!important;
            &:before{
                content: "\f028";
            }
        }
        .jp-volume-bar{
            display: none!important;
            float: left;
            height: 2px;
            width: 100px;
            background: #fff;
            cursor: pointer;
            .jp-volume-bar-value{
                float: left;
                height: 2px;
                @extend .gradient;
            }
        }
    }
    &.jp-state-muted{
        .jp-volume-controls{

            .jp-mute{
                &:before{
                    content: "\f026";
                }
            }
        }
    }
    .jp-time-holder{
        float: left;
        width: 10%;
        line-height: 50px;
        .jp-current-time{
            &:after{
                content: "/";
                margin-left: 10px;
            }
            padding-right: 10px;
        }
        .jp-current-time, .jp-duration{
            float: left;
        }
    }
    .jp-toggles{
        float: left;
        // width: 5%;
        button{
            float: left;
            &.jp-repeat{
                &:before{
                    content: "\f01e";
                }
            }
            &.jp-shuffle{
                &:before{
                    content: "\f074";
                }
            }
            &.jp-toshow{
                &:before{
                    content: "\f001";
                }
                &.active{
                    color: $active-color;
                }
            }
        }
    }
    &.jp-state-looped{
        .jp-toggles{
            button{
                &.jp-repeat{
                    color: $active-color;
                }
            }
        }
    }
    &.jp-state-shuffled{
        .jp-toggles{
            button{
                &.jp-shuffle{
                    color: $active-color;
                }
            }
        }
    }
    .jp-playlist{
        display: none;
        height: auto;
        // opacity: 0;
        position: absolute;
        background:rgba(#fff,.5);
        bottom: $player-height+$player-height*0.5;
        right: 0px;
        padding:15px;
        // padding: 15px;
        // border-radius: 5px;
        // max-height: 200px;
        overflow: hidden;
        overflow-y: scroll;
        z-index: 9999;
        .contain-playlist{
            max-height: 200px;
            height: 200px;
            overflow: hidden;
            overflow-y:scroll;
            float: left;
            width: 100%;
            height: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            float: left;
        }
        ul{
            // padding: 15px;
            padding-left: 0px;
            // pxheight: 200;
            max-height: 200px;
            float: left;
            @include font-size(13px);
            list-style: none;
            width: 200px;
            li{
                // background: rgba(#000, 0.4);
                float: left;
                margin-bottom: 5px;
                width: 100%;
                a{
                    text-decoration: none;
                    color: $black_05;
                    float: left;
                    &:hover{
                        color: $active-color;
                    }
                    &.jp-playlist-item-remove{
                        display: block!important;;
                        color: red;
                        float: left;
                        margin-right: 5px;
                    }
                }
                .jp-artist{
                    @include font-size(11px);
                }
                &.jp-playlist-current{
                    a{
                        color:$active-color;
                        &.jp-playlist-item-remove{
                            color: red;
                        }
                    }
                }
            }
        }

    }
}

/*
31. For detail media product
 */



//For playlist on product detail
.audio-iconplay{
    float: left;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-family: $La;
    font-size: 12px;
    margin-top: 20px;
    cursor:pointer!important;

    i{
        line-height: 30px;
        float: left;
        width: 25px;
        height: 30px;
        @include font-size(25px);
        &.fa-pause{
            color: $active-color;
        }
    }
    a{
        color: $black_07;
    }
}

.modal-play{
    width: 780px!important;
    max-height: 400px!important;
    @include RP(S){
        width: 100%!important;
        min-height: 200px!important;
    }
}


.mejs-container, .mejs-container *{
    max-width: 780px!important;
    max-height: 440px!important;
}
.mejs-controls{
    // float: left;
    width: 100%;
}

.modal-dialog {
    background: #000;
    background: transparent;
}

.modal-dialog{
    width: 780px;
}

@media only screen and (max-width: 780px) {
    .modal-dialog {
        width: 89%!important;
    }
}

.modal-content {
    height: 440px;
    background: transparent;
}


@media only screen and (max-width: 780px) {
    .modal-dialog.beau-gallery-image {
        width: 89%!important;
    }
}

.modal-dialog.beau-gallery-image img {
    width: 100%;
}

.modal-dialog .modal-content {
    border: none;
}

.modal-dialog .modal-content .modal-header .close {
    position: absolute;
    right: -21px;
    top: 0px;
    font-size: 1.5em;
}

.modal-dialog .modal-body {
    width: auto;
    height: auto;
    position: relative;
    text-align: center;
}

.modal-dialog .modal-body img {
    max-width: 100%;
}

.modal-dialog .modal-body iframe {
    width: 780px !important;
    height: 450px !important;
}

@media only screen and (max-width: 780px) {
    .modal-dialog .modal-body iframe {
        width: 100% !important;
    }
}

.modal-dialog .modal-body .beau-arrg {
    position: relative;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-left: '50px' solid transparent;
    border-right: '50px' solid transparent;
    border-bottom: '50px' solid '#2f2f2f';
}

.modal-dialog .modal-body .beau-back, .modal-dialog .modal-body .beau-next {
    position: absolute;
    width: 25%;
    height: 100%;
    background: transparent;
    top: 0px;
    cursor: pointer;
}

.modal-dialog .modal-body .beau-back {
    left: 0px;
}

.modal-dialog .modal-body .beau-next {
    right: 0px;
}
.list-playlist{
    float: left;
    width: 100%;
    padding-left: 0px;
    list-style: none;
    margin-top: 20px;
    li{
        float: left;
        width: 65%;
        height: 40px;
        line-height: 16px;
        @include RP(MD){
            width: 70%;
            @include RP(M){
                width: 100%;
            }
        }
        .list-play{
            float: left;
            width: 100%;
            border:1px solid $black_02;
            margin-bottom: 10px;
        }
        p{
            font-family: $La;
            line-height:16px;
            color: $black_07;
            &.audio-name{
                float: left;
                width: 80%;
            }
            &.audio-time{
                width: 17%;
                float: right;
                @include RP(MD){
                    width: 20%;
                }
            }
        }
        i{
            float: left;
            margin-right: 10px;
            line-height:16px;
            cursor: pointer;
        }
        &.active{
            p{
                color: $Black;
            }
            i{
                color: $active-color;
            }
        }
    }

}


.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode:
  th;
          animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

$jplayer-images-base-url: "../image/" !default;
$player-height: 50px;

.jp-audio *:focus,
.jp-audio-stream *:focus,
.jp-video *:focus {
    /* Disable the browser focus highlighting. */
    outline:none;
}

.jp-audio button::-moz-focus-inner,
.jp-audio-stream button::-moz-focus-inner,
.jp-video button::-moz-focus-inner {
    /* Disable the browser CSS3 focus highlighting. */
    border: 0;
}
#jquery_jplayer_2{
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.jp-type-playlist{
    float: left;
    width: 100%;
}
.jp-book-thumbs{
    float: left;
    width: 22%;
    img{
        max-height: $player-height - 10;
        margin-top: 4px;
        width: auto;
        float: left;
    }
    span{
        float: left;
        width: 80%;
        margin-left: 14px;
        line-height: 14px;
        padding-top: 10px;
        @include RP(M){
            display: none;
        }
        p{
            margin-bottom: 2px;
        }
    }
}
.jp-audio{
    float: left;
    width: 100%;
    // margin-top: 35%;
    bottom: 0px;
    height: $player-height;
    margin-left: auto;
    margin-right: auto;
    background:$White;
    position: fixed;
    z-index: 99999999;
    border-top: 1px solid rgba($Black, .25);
    font-family: $La;
    @include RP(S){
        display: none;
    }
    button{
        border: none;
        background: transparent;
        font-family: $Aw;
        line-height: $player-height;
        padding-top: 0px;
        padding-bottom: 0px;
        cursor: pointer;
        color: $black_05;
        @include font-size(14px);
        border-radius: 0;
        margin-right: 14px;
        &:last-child{
            margin-right: 0px;
        }
    }
    .jp-current-song{
        float: left;
        width: 15%;
        height: $player-height;
        p{
            line-height: $player-height;
            float: left;
            width: 100%;
            margin-bottom: 0px;
            margin-top: 0px;
        }
    }
    .jp-type-playlist{
        float: left;
        margin-left: 15px;
        .jp-gui{
            float: left;
            width: 100%;
            height: auto;
            .jp-controls{
                float: left;
                width: 12%;
                @include RP(M){
                    width: 15%;
                }
            }
            .jp-progress{
                float: left;
                width: 35%;
                height: $player-height;
                cursor: pointer;
                @include RP(M){
                    width: 25%;
                }
                .jp-seek-bar{
                    float: left;
                    width: 100%;
                    position: relative;
                    @include center(y);
                    height: 2px;
                    background: $black_02;
                    border-radius: 5px;
                    .jp-play-bar{
                        float: left;
                        background: $active-color;
                        height: 2px;
                    }
                }
            }
            button{
                // display: block;
                &.jp-previous{
                    &:before{
                        content: "\f048";
                    }
                }
                &.jp-play{
                    &:before{
                        content: "\f04b";
                    }
                }
                &.jp-next{
                    &:before{
                        content: "\f051";
                    }
                }
                &.jp-stop{
                    &:before{
                        content: "\f04d";
                    }
                }
            }
        }
    }
    &.jp-state-playing{
        .jp-type-playlist{
            .jp-gui{
                button{
                    &.jp-play{
                        &:before{
                            content: "\f04c";
                        }
                    }
                }
            }
        }
    }
    .jp-volume-controls{
        font-family: $Aw;
        float: left;
        width: 40px;
        line-height: $player-height;
        margin-left: 10px;
        .jp-mute{
            &:before{
                content: "\f028";
                // content: "\f026";
            }
        }
        .jp-volume-max{
            display: none!important;
            &:before{
                content: "\f028";
            }
        }
        .jp-volume-bar{
            display: none!important;
            float: left;
            height: 2px;
            width: 100px;
            background: #fff;
            cursor: pointer;
            .jp-volume-bar-value{
                float: left;
                height: 2px;
            }
        }
    }
    &.jp-state-muted{
        .jp-volume-controls{

            .jp-mute{
                &:before{
                    content: "\f026";
                }
            }
        }
    }
    .jp-time-holder{
        float: left;
        width: 10%;
        line-height: 50px;
        @include RP(M){
            width: 14%;
        }
        .jp-current-time{
            &:after{
                content: "/";
                margin-left: 5px;
            }
            padding-right: 5px;
        }
        .jp-current-time, .jp-duration{
            float: left;
        }
    }
    .jp-toggles{
        float: left;
        // width: 5%;
        button{
            float: left;
            &.jp-repeat{
                &:before{
                    content: "\f01e";
                }
            }
            &.jp-shuffle{
                &:before{
                    content: "\f074";
                }
            }
            &.jp-toshow{
                &:before{
                    content: "\f001";
                }
                &.active{
                    color: $active-color;
                }
            }
        }
    }
    &.jp-state-looped{
        .jp-toggles{
            button{
                &.jp-repeat{
                    color: $active-color;
                }
            }
        }
    }
    &.jp-state-shuffled{
        .jp-toggles{
            button{
                &.jp-shuffle{
                    color: $active-color;
                }
            }
        }
    }
    .jp-playlist{
        display: none;
        height: auto;
        // opacity: 0;
        position: absolute;
        background:rgba(#fff,.5);
        bottom: $player-height+$player-height*0.5;
        right: 0px;
        padding:15px;
        // padding: 15px;
        // border-radius: 5px;
        // max-height: 200px;
        overflow: hidden;
        overflow-y: scroll;
        z-index: 9999;
        .contain-playlist{
            max-height: 200px;
            height: 200px;
            overflow: hidden;
            overflow-y:scroll;
            float: left;
            width: 100%;
            height: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            float: left;
        }
        ul{
            // padding: 15px;
            padding-left: 0px;
            // pxheight: 200;
            max-height: 200px;
            float: left;
            @include font-size(13px);
            list-style: none;
            width: 200px;
            li{
                // background: rgba(#000, 0.4);
                float: left;
                margin-bottom: 5px;
                width: 100%;
                a{
                    text-decoration: none;
                    color: $black_05;
                    float: left;
                    &:hover{
                        color: $active-color;
                    }
                    &.jp-playlist-item-remove{
                        display: block!important;;
                        color: red;
                        float: left;
                        margin-right: 5px;
                    }
                }
                .jp-artist{
                    @include font-size(11px);
                }
                &.jp-playlist-current{
                    a{
                        color:$active-color;
                        &.jp-playlist-item-remove{
                            color: red;
                        }
                    }
                }
            }
        }

    }
}