html, body { padding: 0; margin: 0;	outline: none;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box;	font-family:'SF Pro Display';	font-size: 16px;	font-weight: 400; line-height:1.6em; color: #000000;  height: 100%; background:#fff; }

/* targetdigit */
.targetspec { display:block; position:fixed; background:#fff; top:0; z-index:9999; } 





/* main config */
.disnone { display:none; }
.boxsize { -webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box; }
.flexdisplay { display:-webkit-flex; display: -moz-flex;  display: -ms-flex;  display: -o-flex; display: flex;  }
.mainwidth {  width:100%;  min-width: 280px; margin:0 auto; max-width: 1200px; /* check same as .wrap-inside*/  }
.transition { -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;  -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.divider { flex-grow:1; }
.shadow { -webkit-box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3);
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.3), -6px 0px 12px 0px rgba(0, 0, 0, 0.3); }
.flex-wrap { flex-wrap:wrap; }


/* textzone */
.textzone {  }



h1 { font-size:1.6em; color:#000; font-weight:600; margin:0 0 30px 0; }



/* block css */
.wrap {  min-height: 100%;  min-width: 280px; max-width:100%;  background:#fff;  margin: 0 auto; align-items:flex-start;  flex-direction:column;  }


/* переназначаем центрирование внутри основного wrap если хотим сделать фиксированную единую ширину сайта */
/* .wrap { align-items:center; } */
/* в этом случае включаем в состав кода после wrap дополнительную обертку */
/* .wrap-inside { min-width:200px; max-width:700px; width:100%; background:#fff; flex-grow:1; flex-direction:column; } */

.wrap { align-items:center; } 
.wrap-inside { min-width:200px; max-width:1000px; /* check same as .mainwidth */  width:100%; background:#fff; flex-grow:1; flex-direction:column; } 









/* topshapka */
.topshapka { flex:0 0 auto; width:100%; min-width:100%; padding:0 20px; }
.topshapka-inside {  padding:0; align-items:center; }

.topshapka-logo { align-items:center; padding:20px 0; }
.topshapka-logo-short { width:40px; min-width:40px; }
.topshapka-logo-short img { display:block; width:100%; }
.topshapka-logo-long { width:180px; min-width:180px; margin:0 0 0 10px; }
.topshapka-logo-long img { display:block; width:100%; }

.topshapka-call { font-size:1.3em; font-weight:600; }


/* topmenu */
.topmenu { flex:0 0 auto; width:100%; min-width:100%; padding:0 20px; background:#0168b5; }
.topmenu-inside {  padding:0; align-items:center; }
.topmenu-link { padding:12px 20px; }
.topmenu-link span { color:#fff; }
.topmenu-link:hover { background:#01599c; }


/* topcover */
.topcover { flex:0 0 auto; width:100%; min-width:100%; background:rgba(0,0,0,0.7); padding:0 20px;  height:300px; background:url('../images/maintopic01.jpg') center; background-size:cover; }
.topcover-inside {  padding:0; height:100%; align-items:center; }
.topcover-anons { flex-direction:column;  width:650px; }
.topcover-skf { width:150px; min-width:150px; margin:0 0 20px 0; }
.topcover-skf img { width:100%; display:block; }
.topcover-text { color:#fff; font-size:1.6em; line-height:1.4em; margin:0 0 10px 0; font-weight:600; }
.topcover-text-post { color:#fff; font-size:1.1em; line-height:1.4em; }


/* mainpart */
.mainpart { flex:1 0 auto; width:100%; min-width:100%; padding:0 20px; background:#eeeeee; }
.mainpart-inside { padding:30px 0; flex-direction:column; }
.mainpart-head { font-size:2em; font-weight:600; margin:0 0 30px 0; }
.mainpart-metro { display:grid; 	gap:20px;	grid-template-columns: repeat(4, 1fr); }
.mainpart-metro-block { background:#fff; padding:20px 10px; }
.mainpart-metro-pic { width:100%; margin:0 0 15px 0; }
.mainpart-metro-pic img { width:80%; margin:0 auto; display:block; }
.mainpart-metro-head { text-align:center;  margin:0 0 15px 0;  }
.mainpart-metro-head span { font-size:1.0em; font-weight:500; line-height:1.4em; border-bottom:1px #000 dotted; }
.mainpart-metro-button { text-align:center; }
.mainpart-metro-button span { background:#3e3e3e; color:#fff; padding:7px 15px; font-size:0.8em; }

.mainpart-metro-block:hover .mainpart-metro-head span  { border-bottom:0px; color:#014d87; }
.mainpart-metro-block:hover .mainpart-metro-button span { background:#0168b5; }




/* footer */
.footer { flex:0 0 auto; width:100%; min-width:100%; background:#254b67; padding:0px 20px;  }
.footer-inside { padding:50px 0px; flex-direction:column; }

.footer-mainline {  }
.footer-subline {  }


.footer-logo { align-items:center; flex-direction:column; }
.footer-logo-short { width:50px; min-width:50px; margin:0 0 5px 0; }
.footer-logo-short img { display:block; width:100%; }
.footer-logo-long { width:120px; min-width:120px; }
.footer-logo-long img { display:block; width:100%; }

.footer-adres { margin:0 0 0 40px; flex-grow:1; }
.footer-adres > div { color:#fff; line-height:1.4em; font-size:0.8em; }


.footer-menu { margin:0 0 0 30px; gap:40px; }
.footer-menu-block { flex-direction:column; }
.footer-menu-link { text-align:right; }
.footer-menu-link span { color:#fff; line-height:1.4em; border-bottom:1px #fff dotted; font-size:0.8em; }
.footer-menu-link:hover span { border-bottom:0px; }







/* tovaranons  */
.tovaranons { flex:0 0 auto; width:100%; min-width:100%; padding:0px 20px; }
.tovaranons-inside {  flex-direction:column; padding:30px 0 0; }
.tovaranons-inside-last {  flex-direction:column; padding:30px 0; }

.tovaranons-head { line-height:1.4em; font-size:1.4em; font-weight:600; margin:0 0 20px 0; color:#005696; border-bottom:1px #005696 solid;  }
.tovaranons-output { display:grid; gap:10px; grid-template-columns: repeat(6, 1fr);  }

.tovaranons-block { border:1px #eee solid; -moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px;  behavior: url(../scripts/border-radius.htc); padding:10px; flex-direction:column; text-align:center; }
.tovaranons-block:hover { -webkit-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); }
.tovaranons-pic { margin:0 0 10px 0; }
.tovaranons-pic img { display:block; width:80%; margin:0 auto; }
.tovaranons-name { line-height:1.4em; font-size:1em; }
.tovaranons-name span { /* word-break: break-all; */ font-size:0.8em; }








/* cm-product-metro */
.cm-product-metro-main { display:grid; gap:20px; grid-template-columns: repeat(5, 1fr);  }

.cm-product-metro { display:grid; gap:20px; grid-template-columns: repeat(4, 1fr); margin:20px 0 0 0; }
.cm-product-block { background:#fff; border:1px #cfcfcf solid; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px;  behavior: url(../scripts/border-radius.htc); padding:10px; flex-direction:column; }
.cm-product-block:hover {
-webkit-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3);
box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3);	
}



.cm-product-block-foto { margin:0 0 5px 0; position:relative; }
.cm-product-block-pic {   }
.cm-product-block-pic img { display:block; width:100%; margin:0 auto; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px;  behavior: url(../scripts/border-radius.htc); }
.cm-product-block-head { padding:10px 10px; font-weight:500; line-height:1.2em; font-size:0.9em; margin:0 0 5px 0;  }
.cm-product-block-head { position:absolute; bottom:0; background:rgba(255,255,255,0.9); width:100%;  }

.cm-product-block:hover .cm-product-block-head { background:rgba(255,255,255,1); }

.cm-product-favicon { position:absolute; top:10px; right:10px; width:15px; }
.cm-product-favicon img { display:block; width:100%; }


/* .cm-product-block-head { position:static; } */

.cm-product-river { display:grid; gap:10px; grid-template-columns: 50px 1fr;}
.cm-product-river { display:block; }
.cm-product-river-pic {  }
.cm-product-river-pic img { display:block; width:100%; }
.cm-product-river-text {  }



.cm-product-block-about { font-size:0.9em; color:#515151; padding:0 10px; line-height:1.4em; }
.cm-product-block-about span { color:#000; font-weight:500; }
.cm-product-block-price { font-size:1em; color:#515151; padding:0 10px; line-height:1.4em; font-weight:500; margin:8px 0 0 0; }
.cm-product-block-price span { color:#000; font-weight:600; font-size:1.2em; }

.cm-product-block-buttons { display:grid; gap:10px; grid-template-columns: repeat(2, 1fr); width:100%; min-width:100%; margin:12px 0 0 0; }

.cm-product-block-button { text-align:center; padding:9px 0px; font-size:0.8em; line-height:1.4em; -moz-border-radius: 3px; -webkit-border-radius: 3px;  border-radius: 3px;  behavior: url(../scripts/border-radius.htc); }

.cm-product-block-pod { background:#f0f0f0; }
.cm-product-block-pod:hover { background:#dfdfdf; }

.cm-product-block-cart { background:#005696; color:#fff; font-weight:500; }
.cm-product-block-cart:hover { background:#254b67; }


















/*  display 1150 display 1150 display 1150 display 1150 display 1150    */
@media (max-width: 1150px) {
	
	.dis1150 { display: block; }
	.disnone1150 { display: none; }



}






/*  display 1100 display 1100 display 1100 display 1100 display 1100    */
@media (max-width: 1100px) {

	.dis1100 { display: block; }
	.disnone1100 { display: none; }
	


	
}





/*  display 1000 display 1000 display 1000 display 1000    */
@media (max-width: 1000px) {

	.dis1000 { display: block; }
	.disnone1000 { display: none; }



}







/*  display 900 display 900 display 900 display 900 display 900    */
@media (max-width: 900px) {

	.dis900 { display: block; }
	.disnone900 { display: none; }
	.flex900 {  display:-webkit-flex; display: -moz-flex;  display: -ms-flex;  display: -o-flex; display: flex; }



}





/*  display 800 display 800 display 800 display 800 display 800    */
@media (max-width: 800px) {

	.dis800 { display: block; }
	.disnone800 { display: none; }




}



/*  display 700 display 700 display 700 display 700 display 700    */
@media (max-width: 700px) {

	.dis700 { display: block; }
	.disnone700 { display: none; }



}










/*  display 600 display 600 display 600 display 600 display 600 display 600     */
@media (max-width: 600px) {

	.dis600 { display: block; }
	.disnone600 { display: none; }



	/* resize 600 width padding 20 --> 10 */


}





/*  display 500 display 500 display 500 display 500 display 500    */
@media (max-width: 500px) {


	.dis500 { display: block; }
	.disnone500 { display: none; }


}	



/*  display 400 display 400 display 400 display 400     */
@media (max-width: 400px) {

	.dis400 { display: block; }
	.disnone400 { display: none; }



}