body  { font:100% Arial; } 

	h1 { margin:0; padding:1em 1em 0.5em 1em; text-align:center; font:140% Arial; color:#853562; }
	h2 { margin:0; padding:1.5em 1em 0em 1em; text-align:center; font:120% Arial; color:#9F8AAA; }
	h3 { margin:0; padding:1.5em 1em 0em 1em; text-align:center; font:110% Arial; color:#9F8AAA; }
	
	h1.strip ,h2.strip, h3.strip, p.strip {color: #286363; background-color: #DEEEBE; margin:1ex; padding:1ex; }

	.bestway { font-weight: bold; color:#668CC0; }
	
	.inactive {font-size:100%; color:#999999;}
	.warning  {font-size:100%; color:#F01010B0;}

	.leftimg  { float:left;  padding:8px; margin: 0 15px 0 0; box-shadow: 0 0 7px #666; border-radius:3px;  }
	.rightimg { float:right; padding:8px; margin: 0 0 0 15px; box-shadow: 0 0 7px #666; border-radius:3px;  }

	   p.copyright   { font:70% "Arial"; color:#99828F; max-width:40ex; }
	   .copyright a  { color:#99828F; }

.vertical-text {
 transform: translate(0,3ex) rotate(270deg);
 -webkit-transform: translate(0,3ex) rotate(270deg);
 -moz-transform: translate(0,3ex) rotate(270deg);
 -o-transform: translate(0,3ex) rotate(270deg);
 transform-origin: center center 0;
 
 /* display:inline; */
 /* vertical-align:50%; */
}
	.columns {
		column-width: 30ex;
		column-gap  : 4ex;
		max-width: 80ex;
		/* margin: 0 1em; */
		
	}
	
	article p {
		margin: 1em 1ex;
		text-align: justify;
		hyphens: auto;
		hyphenate-limit-chars: 6 3 3;
		hyphenate-limit-lines: 2;   
		hyphenate-limit-last: always;
		hyphenate-limit-zone: 8%;
		-webkit-hyphenate-limit-chars: 6 3 3;
		-moz-hyphenate-limit-chars: 6 3 3;
		-webkit-hyphenate-limit-before: 3;
		-webkit-hyphenate-limit-after: 3;
	}

h2, h3 {
	page-break-inside: avoid;
	page-break-after: avoid;
}

h2+h3, h2+p, h3+p {
	page-break-before: avoid;
	page-break-inside: avoid;
}

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

A[href^="tel:"]:active, A[href^="tel:"]:visited, A[href^="tel:"]:hover, A[href^="tel:"]:link { color:inherit; font-style:inherit; }


/* grid */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

/* items */
.container > * {
  color: #353535; 
  /* font-size: 1.2em; */
  line-height: 1.5;
  padding: 3ex;
  background: #FFC;
  border:1px solid #555;
}

/* nav1 styles */
.container nav1 { background: #136fd2; }

nav1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav1 a, nav1 #cmd_close      { color: #d0cfc5 }

#cmd_open { border: 2px solid #668CC0; border-radius:3px; padding:0.4ex}

nav1 a:hover { text-decoration: none; }

		.g2_cont {  
		    display: grid;  
		    grid-gap: 5px 0px;  
		    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		    grid-template-rows: auto;  /* repeat(2, minmax(100px, 1fr));  */
			background-color: #FFC;
			box-shadow: 0 0 8px rgba(122,122,122,0.5);		/* inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет> */
		}
		.g2_cont > div  img {  
		    width: 96%;  
		    /* height: 100%;  */
		    object-fit: cover;
			margin: 1ex auto;
			padding: 2px;
			border: 1px dotted #668CC0; border-radius:3px;
		}
		.g2_cont > div { border:1px dotted #668CC0; border-radius:3px; margin: 0.5ex;}
		.g2_cont > div.imgbox { text-align:center; margin:0.5ex; }	
		
		.g2_cont > div p { padding: 1ex }
		
		.g3_cont {
			display: grid;  
		    grid-gap: 5px 5px;  
		    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		}
		
		/* .pl_num  { grid-area: number; }
		.pl_art  { grid-area: articul; }
		.pl_price{ grid-area: price;   }
		.pl_comm { grid-area: comment;  }
		.pl_nal  { grid-area: nalich;   } */
		
		
		
		.tbPriceList {
			display: grid;
			grid-gap: 7px 0px;
			/* grid-template-columns: 3ex 2fr 7ex 1fr 3ex; */
			grid-template-rows: auto;
			
			margin: 1em auto 1em auto;
			/* border:1px solid #668CC0; border-collapse:collapse; */
		}
		.tbPriceList > div { 
			padding: 0.5ex;
			border : 1px solid #668CC0; border-radius:3px; border-collapse:collapse;
			background-color: #FFC;
			box-shadow: 0.4ex 0.4ex 4px rgba(122,122,122,0.5);
		}
		div.pl_price, div.pl_num, div.pl_nal { text-align:center; }
		/* div.pl_nal { align-self:center } */
		
		/* .pl_head { grid-column: 1 / 4;  grid-row: 1 / 2; } */
		div.thead    { background-color:#F0F0C0; color:#787860; font-size:80%; }
		div.pl_price:not(.thead) { color:#F01010B0; font-size:120%; }


@media only screen and (min-width: 600px) {		/* media query for grid layout ------ if  Width > 600 ------ */
    
	.tbPriceList {
		grid-template-columns: 3ex 2fr 8ex 1fr 3ex;
	}
	
	.container {  								/* GRID */
		max-width:60em;
		margin-left:auto; margin-right:auto;		/*    все блоки посередине */
		grid-template-columns: repeat(4, 1fr);
	}

	/* specific item styles */
	.container header,
	.container nav1,
	.container footer {
		grid-column: span 4;	/* занимают все 4 колонки */ 
	}
	.container section {			
		grid-column: span 3;	/* article занимает три колонки */
	}

	/* nav1 styles */
	nav1 ul li {
		display: inline-block;
		padding: 0 20px 0 0;
	}

	.toggle {  display: none;  }					/* hide toggle */
	#cmd_open, #cmd_close {  display: none !important;  }
	
	#nav2 { display: none; }
  
}

/* media query for nav1 styles */
@media only screen and (max-width: 599px) {			/*------ if  Width < 599 ------ */

	body { margin:0; }

	.container {  								/* GRID */
		grid-template-columns: 1fr;	}
		
	.container > * { padding: 1ex; }
	
	.tbPriceList .pl_num { display: none; }
	
	.tbPriceList {
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 2fr 8ex 1fr 3ex;
		margin: 1em auto 1em auto;
	}
	
    #nav1 {
      transition: transform .3s ease-in-out;
      top: 0;
      bottom: 0;   
      min-height: 100vh; /* override Safari bug */
      position: fixed; /* or choose `absolute` depending on desired behavior*/
      width: 10ex;
      left: -25ex;
	  font-size:160%;
	  
	  background: rgba(69, 120, 191, 0.88);
	  padding: 1ex 3ex 1ex 3ex;
    }
  
    #nav1:target {     
      transform: translateX(25ex);
    }
	
	#nav1.opened { transform: translateX(25ex); }
  
	#cmd_close { font-size: 3em; text-align: right;}
		
    .close  {
      text-align: right;
      display: block;
      text-decoration: none;
      font-size: 3em;
      position: relative;
      /* top: -30px; */
    }
 }
 
 @media (max-width: 420px) {  /*------ if  Width < 420 ------ */
  div.flex3_cont {
    flex-direction: column;   /* Меняем оси шапки, делая её вертикальной. */
    align-items: flex-start;  /* Выравнивание элементов шапки с начала (по левому краю). */
  }
  
  div.flex3_cont div {  text-align:center !important;  }
  
}