/*
  Mainslider
  Brands Section 
  Hot Product Section
  About Section
  Contact Section
 */

/*--------------------
BEGIN: Mainslider */

.mainslider {
    width: 100%;
    margin: auto;
 }
 
 .slick-slide img {
    width: 100%;
    max-height: 750px;
 }
 
 .slick-active {
    opacity: .5;
 }
 
 .slick-current {
    opacity: 1;
 }
 
 /* END: Mainslider
 --------------------- */
 
/*--------------------
BEGIN: Brands Section */
#brands-section {
	/* padding: 120px 0;
	background-color: #fff; */
	padding: 30px 0 90px 0;
    background-color: #b697c7;
    color: #ffffff;
    margin: 100px 0 50px 0;
}
#brands-section h2 {
	font-weight: 700;
    color: #ffffff;
	font-family: 'Frijole', sans-serif;
}
#brands-section h4 {
	font-weight: 700;
	font-size: 16px;
	/* color: #666; */
	color: #ffffff;
	margin-bottom: 20px;
}
#brands-section hr.bottom-line
{
	background: #fff;
}
.space {
	margin-top: 40px;
}
#brands-section i.fa {
	font-size: 40px;
	margin-bottom: 20px;
	transition: all 0.5s;
	color: #d2c4d6;
}
#brands-section .brand-logo {
   max-height: 60px;
   max-width:80%;
	margin-bottom: 20px;
	transition: all 0.5s;
	color: #d2c4d6;
}
#brands-section .brand_list p{
   font-size: 17px;
   text-align: left;
   width: 75%;
   margin:auto;
}

/* #brands-section .brand{
   margin-top:15px;
   margin-bottom: 15px;
} */

@media (max-width: 767px) {
   #brands-section .brand{
	  margin-top:15px;
	  margin-bottom: 30px;
   }
}
/* END: Brands Section
--------------------- */

/*--------------------
BEGIN: Hot Product Section */
 #hot-product-section {
	padding: 120px 0;
	background-color: #f6f6f6;
}
.categories {
	padding-bottom: 30px;
	text-align: center;
}


/* .container{width: 100%;} */
.categories-img {
	height: calc(100vw * 0.75);
	max-height: calc(100vw * 0.75);
	width: 100%;
  }

  @media (min-width: 576px) {
	/* .container {max-width: 540px;}, 其中包含左右padding 30px, width是510px */
	/* .col-sm {} */
	
	/*Bootstrap 宽度
	col-xl-4 col-lg-4 max-width: 33.333333%;
	col-md-6 max-width: 50%;
	col-sm-12 max-width: 100%; THIS  510px * 100% ≈ 510px, 其中包含左右padding 30px */
	.categories-img {
		/*Bootstrap 宽度
		max-width: 100%;*/
		/* height:  calc(540px * 0.6);
		max-height:  calc(540px * 0.6); */
		height:  490px;
		max-height:  490px;
	}
  }
  
  

  @media (min-width: 768px) {
	/* .container {max-width: 720px;}, 其中包含左右padding 30px, width是690px */
	/* .col-md {} */
	/*Bootstrap 宽度
	col-xl-4 col-lg-4 max-width: 33.333333%;
	col-md-6 max-width: 50%; THIS 690px * 50% ≈ 345px, 其中包含左右padding 30px
	col-sm-12 max-width: 100%;*/
	.categories-img {
		/*Bootstrap 宽度
		max-width: 100%;*/
		/* height:  calc(720px * 0.5 * 0.6);
		max-height:  calc(720px * 0.5 * 0.6); */
		
		height:  315px;
		max-height:  315px;
	}
	
  }
  
  @media (min-width: 992px) {
	/* .container {max-width: 960px;}, 其中包含左右padding 30px, width是930px */
	/* .col-lg {} */
	/*Bootstrap 宽度
	col-xl-4 col-lg-4 max-width: 33.333333%;THIS  930px * 33.333333% ≈ 310px, 其中包含左右padding 30px
	col-md-6 max-width: 50%; 
	col-sm-12 max-width: 100%;*/
	.categories-img {
		/*Bootstrap 宽度
		max-width: 100%;*/
		/* height:  calc(960px * 0.33 * 0.6);
		max-height:  calc(960px * 0.33 * 0.6); */
		height:  280px;
		max-height:  280px;
	}
  }
  
  @media (min-width: 1200px) {
	/* .container {max-width: 1140px;}, 其中包含左右padding 30px, width是1110px */
	/* .col-xl {} */
	/*Bootstrap 宽度
	col-xl-4 col-lg-4 max-width: 33.333333%;THIS =  1110px * 33.333333% ≈ 370px, 其中包含左右padding 30px
	col-md-6 max-width: 50%; 
	col-sm-12 max-width: 100%;*/
	.categories-img {
		/*Bootstrap 宽度
		max-width: 100%;*/
		height:  340px;
		max-height:  340px;
	}
		
  }
  
/* END: Hot Product Section
--------------------- */



/*--------------------
BEGIN: About Section */
#about-section {
	padding: 120px 0;
}
#about-section p {
	margin-top: 20px;
	margin-bottom: 30px;
}
@media (max-width: 767px) {
	.about-text {   
		margin-top:50px;
	}
 }
/* END: About Section
--------------------- */




/*--------------------
BEGIN: Contact Section */
#contact-section {
	padding: 120px 0 120px 0;
	background-color: #f6f6f6;
}
#contact-section h3 {
	font-size: 20px;
	font-weight: 400;
}
#contact-section form {
	padding: 30px 0;
}
#contact-section i.fa {
	color: #b697c7;
	font-size: 16px;
	margin-bottom: 10px;
}
label {
	font-size: 12px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	float: left;
}
#contact-section .form-control {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}
#contact-section .form-control:focus {
	border-color: inherit;
	outline: 0;
	-webkit-box-shadow: transparent;
	box-shadow: transparent;
}
#contact-section .btn {
	background: transparent;
	border: 2px solid #12dbb2;
	border-radius: 4px;
	padding: 10px 20px;
	margin-top: 20px;
	color: #d2c4d6;
}
#contact-section .btn:hover, #contact-section .btn:focus {
	background: #d2c4d6;
	border: 2px solid #d2c4d6;
	color: #fff;
}
#contact-section .text-danger {
	color: #cc3300;
	text-align: left;
}
.btn:active, .btn.active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
	outline: none;
	outline-offset: none;
}


#contact-section a {
	font-family: 'Lato', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	color: #777;
}
#contact-section a:hover, #contact-section a:focus {
	text-decoration: none;
	color: #d2c4d6;
}

/* END: Contact Section
--------------------- */