:root {
  --content_width: 990px;
  --font_color:#444;
  --font_lable_color:#fff;
  --menu_bar:#408E54;
  --menu_bar_hover:#377948;  
  --body_bg_color:#DDD;
  --header_text_color:#408E54;
  --white: #ffffff;
}



@charset "UTF-8";



.customhead{

	font-size:36px;
	float:right;
	display:block; 
	width:60px;
	padding:10px;
	color:#AAA;
	
	}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	 
	font-weight:300;
	-webkit-font-smoothing: antialiased;
	font-family: sans-serif,tahoma;


}
body {
	background-color:#FFF; 
	color:var(--font_color);
	margin-top:-1px;
	min-width:370px


}

h3{
	
  color:var(--header_text_color);

  display:table-cell;
  line-height:32px;
  font-size:30px;
  font-weight:100;

  
  text-shadow: 0px 0px 5px #BBB;
  letter-spacing: -0.04em;
}



/*=================== HEADER===================*/

.top-header{
	
/*	
	background-image:url(../../upload/infoimage/savernake-knives-c8zAsv-7Gzk-unsplash.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
*/	
	
	/*
	 filter: blur(1px);
 	 -webkit-filter: blur(1px);
	*/
/*	background-color:#333;*/

background-image: linear-gradient(to right, #434343 0%, black 100%);
	
	height:210px;
	display:flex;
	align-items: center;
	
}

.top-header .head-text{
	
	

		width:100%;
		height:auto;
		margin-left: auto;
		margin-right: auto;		
		max-width: var(--content_width);
		color:#FFF;
		
		
		
	
		display: grid;
		grid-template-columns: 60% auto ;
		gap: 4px;	
  

	
	
	}
	
	
.top-header .head-text div{
	vertical-align:middle;
	margin-top:auto;
	margin-bottom:auto;
	padding-left:30px;
	padding-right:30px;
	
	
	}	
	
	
.top-header h1{
	
	
  font-size: 48px;
  line-height: 50px;
  text-shadow: 0px 0px 5px #222;
  letter-spacing: -0.03em;
  font-weight: 100;


  
	
  
	
}	






/*=================== Top Menu===================*/

.top-menu{
	
	width:100%;
	background-color:var(--menu_bar);
	height:40px;
	
	display:flex;
	justify-content: space-between;

	position: -webkit-sticky; /* Safari */
	position: sticky;
	top:0px;
	vertical-align:middle;
	z-index:4;

	transition: top 0.4s;
	overflow:hidden
	
}



	

	
.l-menu{
	align-items: center;
	width:40px;
	height:40px;
	float:right;
	
	
	
}	
.l-menu span{
	line-height: 40px; 
	vertical-align: middle;
	margin-left:15px;
	color:#FFF;
	display:none;
}


.m-menu	{
	width:100%;
	max-width: var(--content_width);
	display:flex;	
	flex-direction: row;
	justify-content: space-around;	
	align-items: center;
	justify-items:center;
	font-size: large;
	
}


.m-menu li	{
	margin:1px;
	white-space:nowrap;
	list-style:none;

	
	
}


.m-menu li	a{
	text-decoration:none;
	color:var(--font_lable_color);
	transition: .2s ease-in-out;
	padding:5px 10px;
	
}

.m-menu li	a:hover{
	background-color:var(--menu_bar_hover);
	border-radius:5px;
	

	
	
}


.r-menu{
	align-items: center;

	height:40px;

	padding-right:5px;
		
}






.r-menu span{
	float:right;
	line-height: 40px; 
	vertical-align: middle;

	padding-right:5px;
	padding-left:5px;
	color:#FFF;
	cursor:pointer;
	transition: .2s ease-in-out;
	
}
.r-menu span:hover{ background-color:var(--menu_bar_hover)}


.search-box{
	
	
	}

/*============= CONTENT============*/

main{
	background-color:var(--body_bg_color);
	padding-top:20px;
	padding-bottom:5px;
	

	}



section{
	width:100%;
	
	margin:0;
	
transition: .5s ease-in-out;
	
	 }
.container{
	
		background-color:#FFF;
		width:100%;
		height:auto;
		margin-left: auto;
		margin-right: auto;		
		max-width: var(--content_width);
		padding-top:20px;
		padding-bottom:30px;
		
		


	

	}
	
/*--------------------------------------------------------------------------------------------*/	

/*-Article-*/	
.article-column{
	padding: 10px;
	padding-top:15px; 
	width:100%;
	height:auto;
	
/*	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;
*/	
  display: grid;
  grid-template-columns: auto auto auto ;
  gap: 10px;	
	
	
	
	

}



.article-column .item{
	
	

	height:450px;
	min-width:320px;
	border:solid 1px #eee;
	padding:12px;

	overflow:hidden;
	position:relative;


}	
	
.article-column .item:hover{
	border:solid 1px #FB5;
	-webkit-box-shadow: 1px 1px 4px #CCC;
    -moz-box-shadow: 1px 1px 4px #CCC;
    box-shadow: 1px 1px 4px #CCC;
}	

.article-column .item .name{

	height:auto;
	overflow:auto;	
	color:#610;
	font-weight:600;
	padding:10px 0px ;
	

}	


.article-column .item .price{

	height:auto;
	overflow:auto;	
	color:#610;
	font-weight:600;
	padding:10px 0px ;
	font-size:20px;
	width:100%;
	text-align:center;
	display:block;

}

.article-column .item .descirption{

	text-align: justify;
	word-spacing:-2px;
	text-justify: inter-cluster;
	display:block;
	font-size:0.895em;
	padding:10px 0px ;
	
}	
	

.article-column .item img{
	position: relative;
	width:110%;
	height:auto;
    top: 50%;
    left: 50%;


    transform: translate(-50%, -50%);
	transition: .5s ease-in-out;	
}


.article-column .item img:hover{

	width:115%;
		
		
}

.article-column .item .img-corp{
	height:200px; overflow:hidden;

	
}	
/*----------------end  article-column-----------------------*/








.article-table{  

width:100%;
margin: 0 auto;
position:relative;
padding-top:30px; 


 }
.article-table .item{
	
	position:relative;
	width:97%;
	min-width:320px;
	min-height:30px;
	background-color:#FFF;
	margin:5px;
	border:solid 1px #EEE;
	padding:10px;

	-webkit-box-shadow: 0px 0px 2px #DDD;
  	-moz-box-shadow: 0px 0px 0px #DDD;
  	box-shadow: 0px 0px 2px #DDD;
	display:table;

}	
	
.article-table .item:hover{
	border:solid 1px #FA0;
	-webkit-box-shadow: 0px 0px 3px #BBB;
    -moz-box-shadow: 0px 0px 3px #BBB;
    box-shadow: 0px 0px 3px #BBB;
}	
.article-table .item .descirption{
	margin:10px;
	margin-top:5px;
	text-align:justify;
	word-spacing:-1px;
	text-justify: inter-cluster;

	display:block;
	font-size:0.975em;
	width:80%;
	float:left;
}	
.article-table .item .status{
	margin:10px;
	text-align:justify;
	word-spacing:-1px;
	text-justify: inter-cluster;

	display:block;
	font-size:0.875em;
	width:80%;
	float:left;
	bottom:0;

}	


.article-table .item p{
	margin:8px;
	margin-left:6px;
	padding:0px;
	color:#610;
	font-weight:500;



}		

.article-table .item img{
	position: relative;
	width:100%;
	height:auto;

}

.article-table .item .img-corp{
	height:120px; overflow:hidden;
	width:180px;
	float:left;
	margin-left:5px;
	border:solid 1px #CCC;
	border-bottom:solid 1px #CCC;

	
}

/*-------------------end  article-table----------------------*/



article-fulltext{
	padding-top:40px; 
	width:100%;
}



.paper{
  background-color:#FFF;
  max-width:1000px; 
  padding:20px; 
  width:100%; 
  margin: auto; 
  font-size:0.978em; 
  font-weight:300;
  overflow:auto;
  
  border-bottom:solid 1px #CCC;
  letter-spacing:0.4px;
}


.paper a{
color:#339;
	text-decoration:none;
}
.paper a:hover{
	text-decoration:underline;
}

.paper h3{
	
  color:var(--header_text_color);
  display:table;
  line-height:30px;
  font-size:28px;
  font-weight:100;
    
  text-shadow: 0px 0px 4px #999;
  letter-spacing: -0.04em;
  text-align:left;
	
}




.paper img{
	max-width:99%

}

.paper ol {
    list-style-type: none;
    list-style-type: decimal !ie; 
     
    margin: 0;
    margin-left: 1em;
    padding: 0;
     
    counter-reset: li-counter;
}
.paper ol > li{
    position: relative;
    margin-bottom: 1.5em;
    padding: 1.5em;
    background-color: #eaeaea;
}
.paper ol > li:before {
    position: absolute;
    top: -0.3em;
    left: -0.5em;
    width: 1.8em;
    height: 1.2em;
     
    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #464646;
    background-color: #d0d0d0;
     
    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: hidden;
     
    content: counter(li-counter);
    counter-increment: li-counter;
}
	
/*==============PRODUCT VIEW==================*/	


	
	
.product-view-column{

	padding-top:15px; 
	width:100%;
/*	
	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;
*/
  display: grid;
  grid-template-columns: 58% auto ;
  gap: 4px;	
	
	
	
	

}
.product-view-column .product-view-panel{
	

	height:560px;
	border:solid 1px #EFEFEF;
	padding:10px;



}	


.product-view-column .product-view-panel .v-image{
	
  width: 100%;

  display:block;
  vertical-align: middle;	

  margin:1px;
  overflow:hidden;




}


.product-view-column .product-view-panel .v-image img{

	width:110%;
	alignment-adjust:central;
	cursor:pointer;
	animation: fadeIn .5s;


}


.product-view-column .product-view-panel .t-image{
	
/*  width: 117px;*/
  width:24.5%;

  display:block;


  margin:1px;
  float:left;
  overflow:hidden;




}	


.product-view-column .product-view-panel .t-image img{

	width:120%;
	min-height:79px;
	alignment-adjust:central;
	cursor:pointer;


}
	

.product-view-detail{ padding:20px;}


	
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}






/*================ FOOTER==================== */

footer{
	  background-color: #777;
	  font-size:small;
	  color:#AAA;
	  text-shadow: 1px 1px 2px #444;
	  
}

footer a{
	  color:#AAA;
	  text-decoration:none;
}


footer section {
 	display: grid;
  	grid-template-columns: auto auto ;
  	gap: 10px;	
	background-color:#555;
  	max-width: var(--content_width);
  	margin-left: auto;
	margin-right: auto;

}


footer  address {
	  padding:20px;
	  min-height:120px;
	  font-style:normal;
}

footer  div {
	  padding:20px;
	  min-height:120px;

}

footer div li{
	  list-style:none;
}






.btn {
    width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 10px;
    height: 30px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
	
	
	top: 85%;
	left:30%;
	right:30%;
	position:absolute;

	

   /* border-radius: 50px;*/
	
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn:focus {
    outline: none;
}

.btn .color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 2px 4px 0 rgba(49, 196, 190, 0.75);
}
.btn .color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 2px 4px 0 rgba(229, 66, 10, 0.75);
}
.btn .color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 2px 4px 0 rgba(116, 79, 168, 0.75);
}
.btn .color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 2px 4px 0 rgba(252, 104, 110, 0.75);
}
.btn.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 1px 2px 0 rgba(23, 168, 108, 0.75);
}
.btn .color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 2px 4px 0 rgba(83, 176, 57, 0.75);
}
.btn .color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 2px 4px 0 rgba(126, 52, 161, 0.75);
}
.btn .color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 2px 4px 0 rgba(45, 54, 65, 0.75);
}
.btn .color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 2px 4px 0 rgba(65, 132, 234, 0.75);
}
.btn .color-10 {
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 2px 4px 0 rgba(236, 116, 149, 0.75);
}
.btn .color-11 {
       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}










	
	
	
/*================   For Screen size ================*/	

@media only screen and (min-width:960px){ /* styles for browsers >  960px; */ 


	.top-header h1{
	  font-size: 48px;
	  line-height: 50px;
	}
	
	h3{
	  line-height:32px;
	  font-size:30px;
	  font-weight:100;
	
	}
	
	.top-menu{
		height:40px;
		display:flex;
		justify-content: space-between;
	}
		
	.l-menu{
		align-items: center;
		width:40px;
		height:40px;
		
	}	
	.l-menu span{
		line-height: 40px; 
		vertical-align: middle;
		margin-left:15px;
		color:#FFF;
		display:none;
	}
	
	
	.m-menu	{
		width:100%;
		max-width: var(--content_width);
		display:flex;	
		flex-direction: row;
		justify-content: space-around;	
		align-items: center;
		justify-items:center;
		
	}
	
	.m-menu li	{
		margin:1px;
		white-space:nowrap;
		list-style:none;
	}

	.article-column{
		padding: 10px;
		padding-top:15px; 
		width:100%;
		display: grid;
		grid-template-columns: auto auto  auto;
		gap: 10px;	
	}
	footer section {
		display: grid;
		grid-template-columns: auto  auto;
		gap: 10px;	
	}	
	
}


@media only screen and (max-width:960px){ /* styles for browsers <  960px; */ 
	.article-column{
		padding: 10px;
		padding-top:15px; 
		width:100%;
		display: grid;
		grid-template-columns: auto auto  ;
		gap: 10px;	
	}
	
/*	
	.product-view-column{
		padding: 10px;
		padding-top:15px; 
		width:100%;
		display: grid;
		grid-template-columns: auto ;
		gap: 10px;	
	}	
	.product-view-column .product-view-panel {
		height:auto;		
	}		
*/	
	
	footer section {
		display: grid;
		grid-template-columns: auto  ;
	}

}



@media only screen and (max-width:850px){ /* styles for browsers <  850px; */ 

	
	.product-view-column{
		padding: 10px;
		padding-top:15px; 
		width:100%;
		display: grid;
		grid-template-columns: auto ;
		gap: 5px;	
	}	
	.product-view-column .product-view-panel {
		height:auto;		
	}		
	
	


}



@media only screen and (max-width:550px){ /* styles for browsers < 550px; */ 


	.top-header h1{
	  font-size: 40px;
	  line-height: 44px;
	}
	
	h3{
		
	
	  line-height:28px;
	  font-size:24px;
	  font-weight:100;
	
	}

	.top-menu{
		display:flex;
		justify-content: space-between;
		height:auto;
	}
	
	.l-menu{
		align-items: center;
		height:40px;
		display: block;
		width:70%;		
	}	
	
	.l-menu span{
		line-height: 40px; 
		vertical-align: middle;
		margin-left:15px;
		color:#FFF;
		display: block;
	}
	
	.m-menu	{
		width:100%;
		max-width: var(--content_width);
		display:flex;	
		flex-direction: column;
		justify-content: space-around;	
		align-items: center;
		justify-items:center;
		display:none;
	}
	
	
	.m-menu li	{
		margin:1px;
		white-space:nowrap;
		list-style:none;
		min-width:40px;
		height:40px;
		padding-top:10px;
		
		
	}
	
	.article-column{
		padding: 10px;
		padding-top:15px; 
		width:100%;
		display: grid;
		grid-template-columns: auto   ;
		gap: 10px;	
	}
	
	
	.product-view-column{
		padding: 0px;
		padding-top:15px; 
		width:100%;
		
		display: grid;
		grid-template-columns: auto   ;
		gap: 2px;	
	}	
	
	.product-view-column .product-view-panel {
		height:auto;		
	}	
	

	
	.product-view-column .product-view-panel .t-image{
		width:24.3%;
	
	}	
	
	
	.paper{
 		padding:5px; 
	}
	
	.paper img{width:99%; height:auto}	

}