body{
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0;
			margin:0;
			 background-color: #ffffff;
			/*background-color: rgb(228,232,235);*/
		}
		.main{
			height: auto; 
			width: 1420px;
			margin: auto;
			padding: 1%;
			/*background-color: white;
			border-radius: 4px;*/
		}
		.base .container {
		  margin: auto;
		  height: 70px;
		  width: 1380px;
		  border-radius: 5px;
		  background-color: #003366;
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		  -ms-flex-wrap: wrap;
		  flex-wrap: wrap;
		  -webkit-box-align: center;
		  -ms-flex-align: center;
		  align-items: center;
		  overflow: hidden;
		}

		#myCarousel{
			width: 100%;
			margin-left:0;
		}

		/*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 .price{
		    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{
		    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*/

		/*main content*/
		.all-con{
			width: 78%;
			padding: 0;
			margin-left: 22%;
			z-index: -1;
		}

		/**latest product**/
		.filter-con .dropdown select{
			border-radius: 4px;
			height: 30px;
		}

		.all-con .outsideLates{
			background-color: white;
			width: 100%;
			overflow: hidden;
			margin-top: 1%;
			margin-bottom: 5%;
			position: relative;
		}
		.main .all-con .outsideLates .latestproducts{
			width: 100%;
			margin-top: -5%;
			margin-bottom: 5%;
			padding-top: 5%;
		}
		/*.latestproducts{
			width: 100%;
		}*/
		.latestproducts .row{
			width: 100%;
			padding: 0;
			margin-left: -4px;
		}
		.outsideLates .latestproducts .carousel-inner .col-sm-3{
			width: 23.5%; 
			margin-left: 1.5%; 
			padding: 0;	
			border: 1px solid  	#E8E8E8;
			margin-bottom: 1.5%;
		}
		.outsideLates .latestproducts .carousel-inner .col-item:hover{
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		}

		#p_s{
			display: flex;
		}

		.pr-header{
			height: 40px;
			width: 200px;
			margin-top: 10px;
			position: relative;
		}
		.pr-header h3{
			padding-top: -10px;
			margin-left: 20px;
		}
		.filter-con{
			height: 40px;
			/*margin-left: 71%;*/
			float: right;
			margin-top: -30px;
			margin-bottom: 5px;
			position: relative;
		}
		.filter-con select{
			float: left;
		}
		.txt-sortby{
			position: absolute;
			margin-left: 77%;
			margin-top: -25px;
		}
		.filter-con .dropdown  label{
			margin-left: 20px;
		}
		.txt-sortby label{
			margin-top: -20px;
			position: absolute;
		}
		.line{
			margin-left: 1.2%;
			margin-bottom: 1%;
			margin-top: 1%;
			width: 98.4%;
			height: 1px;
			background-color: #e3e3e3;
			position: relative;
		}
		
		/*ARROW HEADER DESIGN*/
		.outsideLates #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%);
	      margin-left: 2%;
	      padding-left: 3%;
	      padding-top: 2px;
	      margin-bottom: 10px;
	    }
	    .outsideLates #pointer:after {
	      content: "";
	      position: absolute;
	      left: 0;
	      bottom: 0;
	      width: 0;
	      height: 0;
	      border-left: 20px solid white;
	      border-top: 20px solid transparent;
	      border-bottom: 20px solid transparent;
	    }
	    .outsideLates #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;
	    }


	    /*custom dropdown menu*/
		.custom-select-wrapper {
		     position: relative;
		     user-select: none;
		     width: 230px;
		     margin-left: 40%;
		     margin-top: -3%;
		     margin-bottom: 1%;
		     z-index: 90;
		}
		 .custom-select {
		     position: relative;
		     display: flex;
		     flex-direction: column;
		     border-width: 0 1px 0 1px;
		     border-style: solid;
		     border-color: #428bca;
		     border-radius: 3px;
		}
		 .custom-select__trigger {
		     position: relative;
		     display: flex;
		     align-items: center;
		     justify-content: space-between;
		     padding: 0 10px;
		     font-size: 15px;
		     color: #0066cc;
		     height: 35px;
		     line-height: 35px;
		     background: #ffffff;
		     cursor: pointer;
		     border-width: 1px 0 1px 0;
		     border-style: solid;
		     border-radius: 3px;
		     border-color: #428bca;
		}
		 .custom-options {
		     position: absolute;
		     display: block;
		     top: 100%;
		     left: 0;
		     right: 0;
		     border: 1px solid #394a6d;
		     border-top: 0;
		     background: #fff;
		     transition: all 0.5s;
		     opacity: 0;
		     visibility: hidden;
		     pointer-events: none;
		     z-index: 2;
		}
		 .custom-select.open .custom-options {
		     opacity: 1;
		     visibility: visible;
		     pointer-events: all;
		}
		 .custom-option {
		     position: relative;
		     display: block;
		     padding: 0 10px 0 10px;
		     font-size: 12px;
		     color: #3b3b3b;
		     line-height: 25px;
		     cursor: pointer;
		     transition: all 0.5s;
		}
		 .custom-option:hover {
		     cursor: pointer;
		     background-color: #b2b2b2;
		}
		 .custom-option.selected {
		     color: #ffffff;
		     background-color: #305c91;
		}

		.arrow {
		     position: relative;
		     height: 15px;
		     width: 15px;
		}
		 .arrow::before, .arrow::after {
		     content: "";
		     position: absolute;
		     bottom: 0px;
		     width: 0.15rem;
		     height: 100%;
		     transition: all 0.5s;
		}
		 .arrow::before {
		     left: -5px;
		     transform: rotate(45deg);
		     background-color: #0066cc;
		}
		 .arrow::after {
		     left: 5px;
		     transform: rotate(-45deg);
		     background-color: #0066cc;
		}
		 .open .arrow::before {
		     left: -5px;
		     transform: rotate(-45deg);
		}
		 .open .arrow::after {
		     left: 5px;
		     transform: rotate(45deg);
		}
		/*end*/

		/*customize select option*/
		.select-css {
		    display: block;
		    font-size: 12px;
		    font-family: sans-serif;
		    line-height: 1.3;
		    padding: .6em 1.4em .5em .8em;
		    max-width: 100%; 
		    box-sizing: border-box;
		    margin: 0;
		    border: 1px solid #aaa;
		    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
		    border-radius: .5em;
		    -moz-appearance: none;
		    -webkit-appearance: none;
		    appearance: none;
		    background-color: #fff;
		    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
		    background-repeat: no-repeat, repeat;
		    background-position: right .7em top 50%, 0 0;
		    background-size: .65em auto, 100%;
		}
		.select-css::-ms-expand {
		    display: none;
		}
		.select-css:hover {
		    border-color: #888;
		}
		.select-css:focus {
		    border-color: #aaa;
		    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
		    box-shadow: 0 0 0 3px -moz-mac-focusring;
		    color: #222; 
		    outline: none;
		}
		.select-css option {
		    font-weight:normal;
		}


		/*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: 1445px) {
			.main{
				height: auto; 
				width: 1200px;
				margin: auto;
			}
			.side-con{
				width: 250px;
			}
		 	#photo-slider .item{
        		height: 400px;
        		width: 100%;
        	}
        	#photo-slider .item img{
        		height: 400px;
        		width: 100%;
        	}
			.latestproducts .row{
				width: 100%;
				padding: 0;
				margin-left: .7%;
			}
			.latestproducts .carousel-inner .col-sm-3{
				width: 24%; 
				margin-left: 2px; 
				padding: 0;	
				background-color: white;
				z-index: 0;
				border: none;
			}
			.latestproducts .carousel-inner .col-sm-3:hover{
				z-index: 1;
			}
			.outsideLates .latestproducts .carousel-inner .col-sm-3{
				width: 24%; 
				margin-left: .5%; 
				padding: 0;	
				border: 1px solid  	#E8E8E8;
				margin-bottom: 1%;
			}
			.filter-con{
				padding-right: 1%;
			}
			.txt-sortby{
				margin-left: 72%;
			}
			.col-item .btn-details{
			    width: 50%;
			    float: left;
			    padding-left: 5px;
			}
			.col-item .rating{
			    font-size: 13px;
			}
			.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-left: -25%;
			}
		}
		@media screen and (max-width: 1250px) {
			.main{
				height: auto; 
				width: 1000px;
				margin: auto;
			}
			.all-con{
				margin-left: 23%;
			}
			.outsideLates .latestproducts .carousel-inner .col-sm-3{
				width: 23.5%; 
				margin-left: .5%; 
				margin-bottom: 1%;
			}
			.outsideLates .latestproducts{
				margin-left: 0;
			}
			.outsideLates{
				margin-left: 1%;
			}
			.filter-con{
				padding-right: 3%;
			}
			.txt-sortby{
				margin-left: 65%;
			}
			.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;
			}
			.line{	
				width: 95.5%;
				background-color: #e3e3e3;
			}

		}

		/*for mobile responsiveness--------------------------------------------------------------------------*/
			@media screen and (max-width: 600px) {
				.main{
					height: auto; 
					width: 100%;
					margin: auto;
					padding: 0;
				}			
				#myCarousel{
					width: 90%;
					margin-left:5%;
				}
				
				.dropdown-content a{
					height: 35px;
					padding-top: 8px;
				}	
				/*sidebar*/
				#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: 35px;
				}
				.well img, .well a, .well span{
					height: 20px;
					font-size: 12px;
					margin-top: -5px;
				}
				#sidebar li a{
					font-size: 12px;
				}
				.container{
					display: none;
				}
				.side-con{
					width: 90%;
					margin-left: 5%;
					padding: 0;
					position: relative;
				}	

				.all-con{
					display: block;
					position: relative;
					width: 100%;
					margin-left: 0;
					z-index: 1;
				}		
				.outsideLates{
					display: block;
					position: relative;
					margin: 0 auto;
					padding: 0;
					height: auto;
					margin-bottom: 5%;
					background-color: #ffffff;
					border-radius: 2px;		
					margin-left: 0;	
					width: 100%;
				}			
			
				.outsideLates .carousel-inner{
					width: 100%;
					height: auto;
					margin-left: 0;
				}

				.latestproducts .carousel-inner .col-item{
					width: 100%;
					height: auto;
					margin-left: 0;
					/*box-shadow: 0px 0px 2px 2px #D3D3D3;*/
				}
				.latestproducts .carousel-inner .col-item #p_name{
					padding: 0;
				}
				.outsideLates .latestproducts .carousel-inner .col-sm-3{
					width: 90%;
					margin-left: 5%;
					margin-top: 10px;
				}

				.all-con .outsideLates .latestproducts .carousel-example .dropdown{
					margin-top: 100px;
				}

				.outsideLates h3{
					font-size: 14px;
					margin-left: 15px;
				}
				.outsideLates h5{
					font-size: 10px;
				}				
				.col-item .photo .cd-gallery{
				    margin-top: -10%;
				    width: 100%;
				}
				.col-item .photo img{
				    height: auto;
				    margin-top: 3%;
				}

				.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;
				}
		

				.outline-p_brands{
					display: none;
				}
				.filter-con{
					height: 40px;
					margin-left: 1%;
					position: relative;
					margin-top: 5%;
					text-align: center;
				}
				.txt-sortby{
					position: absolute;
					margin-left: 1%;
					margin-top: 5px;
					display: none;
				}
				.filter-con .dropdown .btn{
					width: 140px;
					height: 30px;
					padding: 0;
					margin: 0;
				}
				.filter-con .dropdown label{
					display: none;
				}
				.filter-con .dropdown img{
					width: 25px;
					height: 25px;
				}
				.txt-sortby label{
					display: none;
				}
				.line{	
					margin-left: 6%;
					width: 90%;
					background-color: #e3e3e3;
				}
				#photo-slider .item{
        			height: 150px;
        		}
        		#photo-slider .item img{
        			height: 150px;
        		}
        		.concon:hover .overlay {
				  position: absolute;
				  z-index: 1;
				  width: 100%;
				  right: 0;
				}
			 	/*footer*/
				#footerSection2{
					background-color: #f5f7f6;
					position: absolute;
					width: 100%;
					padding-left: 10%;
					margin-top: 5%;
				}
			}	

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-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%;
    }
    .outsideLates .col-sm-3{
      border: 1px solid  #E8E8E8;
      margin: 15px 0; 
      overflow:hidden;
      padding: 0;
      margin-left: 20px;
      width: 250px;
    }
    .outsideLates .col-sm-3:hover {
    	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        -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%;
      }
      }
    }