body{
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0;
			margin:0;
			 background-color: #ffffff;
		}
		.main{
			height: auto; 
			width: 1400px;
			margin: auto;
			padding: 10px;
		}
	
		#photo-slider .item{
			height: 500px;
			width: 100%;
		}
		#photo-slider .item img{
			height: 500px;
			width: 100%;
		}
		
		#myCarousel{
			width: 100%;
		}

		/*css of product slider*/
		.col-item .photo img{
		    margin: 0 auto;
		    width: 100%;
		    height: 200px;
		    border: none;
		}
		.col-item .info{
		    padding: 10px;
		    border-radius: 0 0 5px 5px;
		}
		.col-item .info .row .price h6{
			width: 190px;
			color: #428bca;
		}
		.col-item:hover{
		    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		}
		.col-item .price{
		    /*width: 50%;*/
		    float: left;
		    margin-top: 5px;
		}

		.col-item .price h5{
		    line-height: 20px;
		    margin: 0;
		}

		.price-text-color{
		    color: #00990E;
		}

		.col-item .info .rating{
		    color: #003399;
		}

		.col-item .rating{
		    /*width: 50%;*/
		    float: left;
		    font-size: 17px;
		    text-align: right;
		    line-height: 52px;
		    margin-bottom: 10px;
		    height: 52px;
		}

		.col-item .separator{
		    border-top: 1px solid #FFCCCC;
		}

		.clear-left{
		    clear: left;
		}

		.col-item .separator p{
		    line-height: 20px;
		    margin-bottom: 0;
		    margin-top: 10px;
		    text-align: center;
		}

		.col-item .separator p i{
		    margin-right: -15px;
		    margin-top: 3px;
		    float: left;
		}
		.col-item .btn-add{
		    width: 50%;
		    float: left;
		}

		.col-item .btn-add{
		    border-right: 1px solid #CC9999;
		}

		.col-item .btn-details{
		    width: 50%;
		    float: left;
		    padding-left: 10px;
		}
		.controls{
		    margin-top: 20px;
		}
		[data-slide="prev"]{
		    margin-right: 10px;
		}
		/*end*/

		/*container of barnds and products*/
		.all-con{
			width: 78.5%;
			padding: 0;
			margin-left: 21.5%;
			z-index: -1;
			margin-top: 1%;
			background-color: #f4f6f8; 
			border: solid 1px #dfe3e8;
			/*border-top: solid 1px #dfe3e8;
			border-bottom: solid 1px #dfe3e8;*/
		}

		
		/**latest product**/
		.latestproduct{
			width: 100%;
			height: 440px;
			padding: 0;
		}
		.latestproducts .row{
			width: 100%; 
			padding: 0;
			margin: 0; 
			position: relative;
		}
		.latestproducts .carousel-inner{
			/*padding-right: 3%;*/
			height: 350px;
			margin-left: 0;
		}
		.latestproducts .carousel-inner .col-sm-3{
			/*width: 24.7%;*/ 
			width: 23.5%; 
			margin-left: 1.2%; 
			padding: 0;	
			border: 1px solid  	#E8E8E8;
			background-color: #ffffff;
		}
		.latestproducts .carousel-inner .row{
			width: 100%;
			margin-left: 0%;
		}
		.outsideLates{
			position: relative;
			width: 100%;
			height: 450px;
			margin-top: 1%;
			margin-bottom: 5%;
			border-radius: 2px;
		}
		.latestproduct .photo .cd-gallery{
			margin-top: 0;
			margin-bottom: 0;
			padding: 0;
			width: 100%;
		}
		.latestproduct  .photo .cd-gallery .products-container {
			padding-top: 0;
			width: 100%;
			margin: 0;
		    width: 100%;
		    height: 200px;
		}
		.latestproduct .photo .cd-gallery .products-container .cd-item-wrapper {
			padding-top: 30px;
			padding-bottom: 0;
			width: 100%;
			height: 300px;
			margin: 0;
		}
		.latestproduct .photo img{
			height: 200px;
		}


		/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
		 .outline-p_brands{
			width: 100%;
			height: auto;
			margin-top: 1%;
			padding-top: 10px;
			border-radius: 2px;
			position: relative;
			margin-left: 0;
		 }
		.outline-p_brands h3{
			margin-left: 15px;
		}
		 .outline-p_brands .brands_row{
			width: 100%;
			height: 350px;
			margin-left: 0;
		}
		.brands_container{
		 	width: 23.5%;
		 	height: 320px;
		 	float: left;
		 	margin-left: 1.2%; 
			padding: 0;	
			border: 1px solid  	#E8E8E8;
			background-color: #ffffff;
		 }
		 .brand-toleft{
		 	margin-left: 2%;
		 }
		 .brands_container:hover{
		 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		 }
		 .brands_container h5{
		 	margin-left: 15px;
		 	color: #337ab7;
		 	padding-right: 10px;
		 }
		 .brands_container h6{
		 	margin-left: 15px;
		 	color: #337ab7;
		 	padding-right: 10px;
		 }
		 .brands_row .line{
		 	width: 90%;
		 	height: 1px;
		 	position: relative;
		 	background-color: #cc7000;
		 	margin: auto;
		 	margin-top: 5px;
		 }
		 .b_plist{
		 	margin-left: 53%; 
		 	padding-top: 10px;
		 }

		 /*image flip*/
		.flip-box {
		  background-color: transparent;
		  margin-top: 2px;
		  width: 100%;
		  height: auto;
		  position: relative;
		  perspective: 1000px; /* Remove this if you don't want the 3D effect */
		}
		/* This container is needed to position the front and back side */
		.flip-box-inner {
		  position: relative;
		  width: 100%;
		  height: 100%;
		  text-align: center;
		  transition: transform 0.8s;
		  transform-style: preserve-3d;
		}
		/* Do an horizontal flip when you move the mouse over the flip box container */
		.flip-box:hover .flip-box-inner {
		  transform: rotateY(180deg);
		}
		/* Position the front and back side */
		.flip-box-front, .flip-box-back {
		  position: absolute;
		  width: 100%;
		  backface-visibility: hidden;
		}
		/* Style the front side (fallback if image is missing) */
		.flip-box-front {
		  background-color: #bbb;
		  color: black;
		}
		/* Style the back side */
		.flip-box-back {
		  background-color: dodgerblue;
		  color: white;
		  transform: rotateY(180deg);
		  position: relative;
		} 

		/*ARROW HEADER DESIGN*/
		#pointer {
	      width: 230px;
	      height: 40px;
	      position: relative;
	      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(6,60,101,1) 24%, rgba(87,122,150,1) 84%);
	      padding-left: 3%;
	      padding-top: 2px;
	      margin-left: 1.5%;
	      margin-bottom: 1%;
	    }
	    #pointer p{
	    	color: white;
	    	margin-left: 10px; 
	    	font-size: 22px;
	    }
	    #pointer:after {
	      content: "";
	      position: absolute;
	      left: 0;
	      bottom: 0;
	      width: 0;
	      height: 0;
	      border-left: 20px solid  #f4f6f8;
	      border-top: 20px solid transparent;
	      border-bottom: 20px solid transparent;
	    }
	    #pointer:before {
	      content: "";
	      position: absolute;
	      right: -20px;
	      bottom: 0;
	      width: 0;
	      height: 0;
	      border-left: 20px solid rgb(87,122,150);
	      border-top: 20px solid transparent;
	      border-bottom: 20px solid transparent;
	    }



	    /*dropdown login*/
		.navbar-default{background:#3285D1;border-color: #3285D1;}
	    .navbar-default .navbar-nav > li > a{color:#FFF;}
	    .nav > li > a{margin:15px; font-size: 17px; color:#FFF;}
	    .nav .open > a, .nav .open > a:hover, 
	    .nav .open > a:focus,
	    .nav > li > a:hover, .nav > li > a:focus{background-color:transparent !important;}

      	.navbar-brand{    
          margin: 15px !important;
          padding: 13px !important;
          color: #fff !important;
          font-size: 2em !important;
          font-weight: bold !Important;
        }
          
	    .navbar-toggle{margin-top:20px !important;}
	    .dropdown-menu{background:#fff !important;}
	    .navbar-login
	    {
	        width: 300px;
	        padding: 10px;
	        padding-bottom: 0px;
	    }

      	.navbar-login-session
      	{
            padding: 10px;
            padding-bottom: 0px;
        	padding-top: 0px;
      	}

	    .icon-size
	    {
	        font-size: 87px;
	    }

      	.dropdown-container{
      		position: absolute; 
      		margin-left: 1240px;
      	}
      	/*end of dropdown login*/

      	

		
		
		@media screen and (max-width: 1400px) {
			.main{
				height: auto; 
				width: 1200px;
				margin: auto;
			}
			.side-con{
					width: 250px;
			}
			.latestproducts .col-item .photo img{
				margin-top: -10px;
				width: 100%;
				height: 170px;
			}
			.brands_container{
			 	height: 310px;
		 	}

		 	#photo-slider .item{
        		height: 400px;
        		width: 100%;
        	}
        	#photo-slider .item img{
        		height: 400px;
        		width: 100%;
        	}

		}
		
		@media screen and (max-width: 1250px) {
			.main{
				height: auto; 
				width: 1000px;
				margin: auto;
			}
			.side-con{
					width: 200px;
			}
			#photo-slider .item{
        		height: 350px;
        		width: 100%;
        	}
        	#photo-slider .item img{
        		height: 350px;
        		width: 100%;
        	}
			.b_plist{
			 	margin-left: 46%; 
			 	padding-top: 8px;
			}

			.col-item .info{
				height: 50px;
			}
			.col-item .info .row{
				margin-left: -5%;
				margin-top: -5%;
				margin-bottom: 0;
				padding: 0;
				width: 170px;
			}
			.btn-add a{
				font-size: 10px;
				margin-left: 10px;
			}
			.btn-details a{
				font-size: 10px;
				margin-left: -5px;
			}
			.btn-details i{
				margin-left: 2px;
			}
			.col-item .btn-details{
				width: 50%;
			    float: left;
			    padding-left: 0;
			    margin-left: 0px;
			}
			.col-item .info .rating{
			    color: #003399;
			    font-size: 10px;
			}
			.col-item .info .row .price h6{
				width: 170px;
				margin-left: -25%;
				font-size: 10px;
			}
			.col-item .price h5{
			    line-height: 20px;
			    font-size: 12px;
			    margin-top: -10px;
			    margin-left: -25%;
			}
			.col-item .photo img{
				margin-top: -7%;
				height: 150px;
			}

		}

		/*for mobile responsiveness--------------------------------------------------------------------------*/
			@media screen and (max-width: 600px) {
				body{
					background-color: white;
				}
				.main{
					height: auto; 
					width: 100%;
					margin: auto;
					padding: 0;
					margin-top: 10%;
				}

				#myCarousel{
					width: 90%;
					margin-left: 5%;
					margin-top: 2%;
				}
				/*sidebar*/
				.side-con{
					position: relative;
					width: 90%;
				}
				#sidebar{
					width: 100%;
					margin-left: 0;
					margin-top: 1%;
					background-color: #ffffff;
					box-shadow: 0px 0px .5px .2px gray;
					position: relative;
					margin-bottom: 10px;
				}
				/*font size*/				
				.well{
					height: 45px;
				}
				.well img, .well a, .well span{
					height: 20px;
					font-size: 12px;
					margin-top: -5px;
				}
				#sidebar li a{
					font-size: 12px;
				}
				.all-con{
					display: block;
					width: 100%;
					margin-left: 0;
					height: auto;
					z-index: 0;
					box-shadow: none;
				}

				/**product slider container*/			
				.latestproducts .carousel-inner{
					width: 100%;
					height: auto;
				}
				.latestproducts .carousel-inner .col-sm-3{
					width: 95%;
					margin-left: 4%;
					margin-bottom: 15px;
				}
				.latestproducts .carousel-inner .col-item{
					width: 100%;
					height: auto;
					box-shadow: 0px 0px 2px 2px #D3D3D3;
				}
				.latestproducts .col-item .info .row .price h6{
					width: 150px;
				}
				.latestproducts .col-item:hover{
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				}

				.latestproducts .controls{
					margin-top: -10px;
					margin-right: 15px;
				}			
				.latestproducts .col-item .photo img{
				    margin-top: -10px;
				    width: 100%;
				    height: auto;
				}
				.latestproducts .info{
					height: 60px;
				}
				/* end ofproduct slider sizing*/

				.outsideLates{
					position: relative;
					margin-left: 0;
					height: auto;
					margin-bottom: 5%;
					border-radius: 2px;			
					width: 100%;
				}			
			
				.outsideLates .carousel-inner{								
					width: 100%;
					height: auto;
					position: relative;
				}
				.latestproducts .col-sm-3{
					width: 100%; 
					margin-left: 2.4%; 
					padding: 0;
				}
				.outsideLates .carousel-inner .col-item{
					width: 100%;
					height: auto;
				}						
				.outsideLates .col-item .photo img{
				    margin-top: -10px;
				    width: 100%;
				    height: auto;
				}
				.outsideLates .info{
					height: 60px;			
				}		

				.product_slider{
					position: relative;
					margin-left: 0;
					height: auto;
					margin-bottom: 5%;
					border-radius: 2px;			
					width: 100%;
				}
				.product_slider .row{	
					width: 100%;
				}
				/**product slider container*/			
				.product_slider .carousel-inner{
					width: 105%;
					height: auto;
				}
				.product_slider .carousel-inner .col-sm-3{
					width: 90%;
					margin-left: 5%;
					margin-bottom: 15px;
				}
				.product_slider .carousel-inner .col-item{
					width: 100%;
					height: auto;
					margin-left: 3%;
					box-shadow: 0px 0px 2px 2px #D3D3D3;
				}
				.product_slider .col-item .info .row .price h6{
					width: 150px;
				}
				.product_slider .col-item:hover{
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				}

				.product_slider .controls{
					margin-top: -10px;
					margin-right: 15px;
				}
				.product_slider h3{
					font-size: 14px;
					margin-left: 15px;
				}
				.product_slider h5{
					font-size: 10px;
				}
				.product_slider .separator a{
					font-size: 10px;
				}						
				.product_slider .col-item .photo img{
				    margin-top: -10px;
				    width: 100%;
				    height: auto;
				}
				.product_slider .info{
					height: 60px;
				}

				.col-item .info .row{
					margin-left: 0;
					margin-top: 0;
					margin-bottom: 0;
					padding: 0;
					width: 100%;
					height: 70px;
				}
				.col-item .rating{
				    margin-right: 5%;
				}
				.btn-add a{
					font-size: 14px;
					margin-left: 10px;
				}
				.btn-details a{
					font-size: 14px;
					margin-left: -5px;
				}
				.col-item .info .row .price h6{
					width: 170px;
					margin-left: 0;
					margin-top: 10%;
					font-size: 12px;
				}
				.col-item .price h5{
				    line-height: 20px;
				    font-size: 12px;
				    margin-top: 10px;
				    margin-left: 0;
				}


        		/*brands*/
        		.outline-p_brands{
					width: 100%;
					margin: auto;
					height: 1600px;
					margin-top: 1%;
					padding: auto;
					position: relative;
				}
				.outline-p_brands:hover{
					background-color: white;	
					box-shadow: none;			
				}
				.outline-p_brands .brands_row{
					height: auto;
					margin-bottom: 5%;
					height: auto;
				}			
				.outline-p_brands .brands_container{
					width: 90%;
					height: 370px;;
					margin-left: 5%;
					margin-top: 10px;
					box-shadow: 0px 0px 2px 2px #D3D3D3;
					border: none;
					position: relative;
				}	
				.brands_container:hover{
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				}
				.brands_row .line{
				 	width: 90%;
				 	height: 1px;
				 	position: relative;
				 	background-color: #cc7000;
				 	margin: auto;
				 	margin-top: 5px;
				 }
				.b_plist{
				 	margin-left: 58%; 
				}
				  /*image flip*/
				.flip-box {
				  background-color: transparent;
				  margin-top: 2px;
				  width: 100%;
		  		  height: auto;
		  		  position: relative;
				  border: 1px solid #f1f1f1;
				  perspective: 1000px; /* Remove this if you don't want the 3D effect */
				}
				/* This container is needed to position the front and back side */
				.flip-box-inner {
				  position: relative;
				  width: 100%;
				  height: 100%;
				  text-align: center;
				  transition: transform 0.8s;
				  transform-style: preserve-3d;
				}
				/* Position the front and back side */
				.flip-box-front, .flip-box-back {
				  position: absolute;
				  width: 100%;
				  backface-visibility: hidden;
				}
				/* Style the front side (fallback if image is missing) */
				.flip-box-front {
				  background-color: #bbb;
				  color: black;
				}
				/* Style the back side */
				.flip-box-back {
				  background-color: dodgerblue;
				  color: white;
				  transform: rotateY(180deg);
				  position: relative;
				} 
				#photo-slider .item{
        			height: 150px;
        			width: 100%;
        		}
        		#photo-slider .item img{
        			height: 150px;
        			width: 100%;
        		}
			}	

a.btn-social,
.btn-social
{
    border-radius: 5%;
    color: #ffffff !important;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s;
    webkit-transition: background-color .3s;
    width: 34px;
}
.btn-social .fa,.btn-social i
{
    backface-visibility: hidden;
    moz-backface-visibility: hidden;
    ms-transform: scale(1);
    o-transform: scale(1);
    transform: scale(1);
    transition: all .25s;
    webkit-backface-visibility: hidden;
    webkit-transform: scale(1);
    webkit-transition: all .25s;
}
.btn-social:hover,.btn-social:focus
{
    color: #fff;
    outline: none;
    text-decoration: none;
}
.btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i
{
    ms-transform: scale(1.3);
    o-transform: scale(1.3);
    transform: scale(1.3);
    webkit-transform: scale(1.3);
}
.btn-social.btn-sm
{
    font-size: 13px;
    height: 36px;
    line-height: 18px;
    margin: 6px 2px;
    width: 36px;
}
.btn-twitter
{
    background-color: #55acee;
}
.btn-twitter:hover
{
    background-color: #83c3f3;
}
.btn-facebook
{
    background-color: #3b5998;
	
}
.btn-lazada
{
    background-color: #3b5998;
	
}
.btn-facebook:hover
{
    background-color: #4c70ba;
}
.btn-instagram
{
    background-color: #0976b4;
}
.btn-instagram:hover
{
    background-color: #0b96e5;
}

/*product item enlarge*/
/*    .shape{    
      border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
      -ms-transform:rotate(360deg); 
      -o-transform: rotate(360deg);  
      -webkit-transform:rotate(360deg); 
      transform:rotate(360deg);
      position: absolute;
      margin-left: 71%;
    }
    .latestproducts .col-sm-3{
      border: 1px solid  #E8E8E8;
      margin: 15px 0; 
      overflow:hidden;
    }
    .latestproducts .col-sm-3:hover {
        -webkit-transform: scale(1.1); 
        -moz-transform: scale(1.1); 
        -ms-transform: scale(1.1); 
        -o-transform: scale(1.1); 
        transform:rotate scale(1.1); 
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .shape {
      border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
    }
    .offer-radius{
      border-radius:7px;
    }
    .offer-danger { border-color: #d9534f; }
    .offer-danger .shape{
      border-color: transparent #d9534f transparent transparent;
    }
    .offer-success {  border-color: #5cb85c; }
    .offer-success .shape{
      border-color: transparent #5cb85c transparent transparent;
    }
    .offer-default {  border-color: #999999; }
    .offer-default .shape{
      border-color: transparent #999999 transparent transparent;
    }
    .offer-primary {  border-color: #428bca; }
    .offer-primary .shape{
      border-color: transparent #428bca transparent transparent;
    }
    .offer-info { border-color: #5bc0de; }
    .offer-info .shape{
      border-color: transparent #5bc0de transparent transparent;
    }
    .offer-warning {  border-color: #f0ad4e; }
    .offer-warning .shape{
      border-color: transparent #f0ad4e transparent transparent;
    }

    .shape-text{
      color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
      -ms-transform:rotate(30deg);
      -o-transform: rotate(360deg); 
      -webkit-transform:rotate(30deg);
      transform:rotate(30deg);
    } 
    .offer-content{
      padding:0 20px 10px;
    }
    @media (min-width: 487px) {
      .container {
        max-width: 750px;
      }
      .col-sm-6 {
        width: 50%;
      }
    }
    @media (min-width: 900px) {
      .container {
        max-width: 970px;
      }
      .col-md-4 {
        width: 33.33333333333333%;
      }
    }

    @media (min-width: 1200px) {
      .container {
        max-width: 1170px;
      }
      .col-lg-3 {
        width: 25%;
      }
    }*/