@charset "utf-8";
:root {
  --ProdImgS: 200px;
  --mainTxtColor:#454545;
  --mainBlueColor:#2257D1;
}
@font-face {
font-family: 'Play';
src: url('/fonts/Play-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}


body{ font-family:Tahoma; font-size:13px;  min-width:360px; min-height:100%; width:100%; height:100%;color: #454545;
 font-size:clamp(12px , 1.14vw ,13px);
}

body, html{margin:0px; padding:0px; width:100%; overflow-x:hidden;}



header { width:100%; background-color:#fff; }
header>.wrap{width:100%; max-width:1152px; margin:0 auto 6px auto; }

#firstline{ 

  display: grid;
  align-items: center;
  justify-items: center;
  gap:clamp(3% , 4vw ,55px);
  grid-template-areas:"logo soc  dostavka phon backcall";
	grid-template-columns: clamp(160px , 20% , 229px) clamp(90px , 13% , 122px) 1fr 0.8fr 0.6fr ;  
	margin-top:10px;

        grid-auto-flow: column;
}
#logo { grid-area: logo; justify-self:begin;}
#logo a img { width:100%}
#logo a b{ font-size:8.9px; font-weight:100;color:#2257D1;}

#soc {grid-area:soc;  display:flex; gap:10px;}
#soc  img { width:clamp(20px , 100% , 34px)}

#dostavka { grid-area:dostavka ;}
#dostavka img { width:100%}

#phon {grid-area:phon }
#phon a { font-size:100%}
#phon b { font-size:140%;  line-height:150%; color:#2257D1;}
#phon span {font-size:100%;line-height:100%; color:#454545  }

#backcall {justify-self:end; grid-area:backcall;  }
#backcall button{padding:10px; margin:0; font-size:100%; }

#second { display:grid; 
  align-items: center;
  justify-items: left;
  gap:clamp(5px , 1vw ,10px);
  grid-template-areas:"";
	grid-template-columns: auto clamp(100px , 24%, 324px) 50px;  

        grid-auto-flow: column;

 }
#second nav {display:flex; align-items: center;justify-content: space-between; font-size:100%; gap:1%;}
#second nav>li{ list-style:none; white-space: nowrap; position:relative; }
#second nav>li>a{ padding: 5px clamp(3px , 0.7vw , 11px); display:inline-block}
#second nav>li>a:hover{ color:#2257D1;}
#second nav>li.butmenu>a:hover { color:#fff;}

#second nav>.butmenu>a{ background:#2257D1; border-radius:3px; color:#fff; padding: clamp(10px , 1.2vw , 15px) 20px;}

#second nav li .submenu { display:none;z-index:1000; position:absolute; list-style:none; background:#fff; top: 50%; padding:10px; box-shadow: 2px 2px 4px rgba(61, 61, 61, 0.5);}
#second nav li .submenu li { margin:10px;}
#second nav li:hover .submenu { display:block;}
#second nav .red{ background-color:red; color:#fff; border-radius:5px;}
.mobeMenu {display: none;}
.menuicon {
margin: 0 1px 0 -10px;
display:inline-block;
width:clamp(10px, 22% , 16px);
background-size: contain;
aspect-ratio: 1.4;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.3333 11H0.666667C0.298477 11 0 10.6922 0 10.3125C0 9.9328 0.298477 9.625 0.666667 9.625H15.3333C15.7015 9.625 16 9.9328 16 10.3125C16 10.6922 15.7015 11 15.3333 11Z' fill='white'/%3e%3cpath d='M15.3333 6.1875H0.666667C0.298477 6.1875 0 5.8797 0 5.5C0 5.1203 0.298477 4.8125 0.666667 4.8125H15.3333C15.7015 4.8125 16 5.1203 16 5.5C16 5.8797 15.7015 6.1875 15.3333 6.1875Z' fill='white'/%3e%3cpath d='M0.666667 1.375H15.3333C15.7015 1.375 16 1.06719 16 0.687499C16 0.307803 15.7015 0 15.3333 0H0.666667C0.298477 0 0 0.307803 0 0.687499C0 1.06719 0.298477 1.375 0.666667 1.375Z' fill='white'/%3e%3c/svg%3e ");
background-repeat:no-repeat;
}

#seachBlock {
  width: 100%;
  height: clamp(28px , 5vw , 44px);;
}

#seachBlock .s_inp {
  width: calc(100% - 68px);
  font-size: 110%;
  border: 1px solid #E3E3E3;
  border-radius: 5px;
  background: #fff;
  padding: 0 56px 0 10px;
  height: 100%;
  color: #888;
}


#seachBlock .s_submit {
border: none;
  position: absolute;
  top: 0px;
  right: 0px;
  height: calc(100% + 2px);
  background: #2257D1;
  border-radius: 0 5px 5px 0;
  aspect-ratio: 55/44;
  padding: clamp(6px , 1vw, 10px);
  box-sizing: border-box;

}
#sform {
  position: relative;
  height: 100%;
}

header a {text-decoration:none; color:#454545; }
#cart { display:flex;flex-direction: column;   text-decoration: none; }
#cart center {
  margin-right: 10%;
  position: relative;

}

#cart img { margin-right:1px; }
#cart .cartcount {
  position: absolute;
  top: -3px;
  min-width:20px;
  left: 50%;
  padding:0 0 1px 0;
  text-align: center;
  font-size: 80%;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background: #2257D1;
  border-radius: 20px;
}
#cart b{font-size:0,8rem ; font-weight:100;}

main { width:100%; background-color:#EEF1F8; }
main>.wrap{ max-width:1152px; width:100%; height:100%; margin:0 auto; min-height:calc(100vh - 320px - 71px - 73px - 75px)}
#PartnerSliders { position:relative; background:#fff; max-width:1152px; width:100%; margin:0 auto;height:clamp( 100px,16vw,218px);}


  
#PartnerSliders .leftbutton{left:max(8px , 1% ); 	position: absolute;  top: 50%;  transform: translateY(-50%);  width: max(12px , 1.5% );}
#PartnerSliders .rightbutton{ right:max(8px , 1% ); 	position: absolute;  top: 50%;  transform: translateY(-50%);  width: max(12px , 1.5% );}

#PartnerSliders>div{ height: 71px;   overflow: hidden; position:absolute; top:50%; left:6%; right:6%; white-space: nowrap; transform: translate(0%, -50%); }
#PartnerSliders>div>div{ width:150%;}
#PartnerSliders a {display:block ; float:left}
#PartnerSliders a + a  {  margin-left:5%;}

footer { width:100%;  background:#EEF1F8; font-size:100%; padding-top:20px;}
footer>.wrap{ max-width:1152px; width:100%; margin:0 auto; display:grid; grid-template-columns: auto auto;}
footer h4{ margin:10px 0;}
footer ul { list-style:none; padding:0 2% 0 0;}
footer li { margin:10px 0 10px 0;}
footer a,footer a:hover{ text-decoration:none; color: var( --mainBlueColor );}
#footerlogo { vertical-align: -20px;}
#footersoc a{ margin:0 0 0 10px;}


.subfooter { width:100%; background:#D6DBE8;}
.subfooter >.wrap{ max-width:1152px; width:100%; margin:0 auto;padding: 10px 0 0 0;}
.subfooter >.wrap a,.subfooter >.wrap center{ text-decoration:none; color:#454545; margin:0 10px;}


header .button { font-size:100%;  width: 100%; aspect-ratio: 10 / 2; padding:0;}

button,input[type=submit] {  padding:10px 38px; border:1px solid var( --mainBlueColor ); border-radius:5px; color: var( --mainTxtColor ); background:#fff; margin:10px; cursor:pointer;}

.pimg a { display:flex; 
	cursor: pointer;
  aspect-ratio: 1;
  border: 1px solid #DDD;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.goods .nc_row{ background:#fff; padding:20px; margin-bottom:6px; display:grid; gap:2%;
grid-template-areas:
"img ShortDescription Price";

grid-template-columns:minmax(80px , 13%) minmax(150px , auto) auto;
 }
.goods .nc_row .Img { grid-area:img; border:1px solid #DDDDDD; aspect-ratio: 1; padding:10px; box-sizing: border-box;  }
.goods .nc_row .Img img{ width:100%;}
.goods .nc_row .ShortDescription>h4{ margin:4px 0;}
.goods .nc_row .ShortDescription>h4>a { text-decoration:none; color:#454545;}
.goods .nc_row .ShortDescription{ grid-area:ShortDescription;}

.goods .nc_row .Price{ grid-area:Price; display:grid; grid-template-columns:1fr; justify-self: right;justify-items: self-end;align-items: end;}
.goods .nc_row .OldPrice{ text-decoration:line-through}
.goods .nc_row .RedPrice{ color:red; }

button.addCart {padding:5px;border-radius:3px; margin:1px 0;aspect-ratio: 117/30; font-size:100%;width:100%; text-align:center;white-space: nowrap}
button.oneClick {padding:5px;border-radius:3px;margin:1px 0; border-color:red;aspect-ratio: 117/30;font-size:100%; width:100%; text-align:center;white-space: nowrap}


.cartochka h1{ }
.cartochka #artblok{}
.cartochka .columns{ display:grid;grid-template-columns: 1fr max(110px ,25%);  gap: 2%;}

#single_1 {border:1px solid #DDDDDD; aspect-ratio: 1; padding:10px; box-sizing: border-box; display:flex; width:100%; }

#oldprice { margin:0 0 -1% max(20px , 10%); text-decoration:line-through}
#redPrice {font-size:120%; color:red; white-space: nowrap;}

.cartochka button.addCart { aspect-ratio: unset; padding:1% 2%; width:auto}
.cartochka button.oneClick {aspect-ratio: unset;padding:1% 2%;width:auto}

#addCartAjax  button{ padding:8px 10px;}

button:hover ,input[type=submit]:hover {

  box-shadow: 0 0 15px rgba(74, 111, 165, 0.5);
  transform: translateY(0.5px);
}

body .blueBG{ background-color:var(--mainBlueColor); color:#fff;}

input { border:1px solid #ECECEC; font-size:13px; color:#454545; padding:10px;}



input[type="checkbox"],input[type="radio"]{ margin: 0 6px 10px 0px;   }


#mainPage { padding-bottom:30px  }



#mpCat { display:grid; gap: 1.1%; padding:20px 0; justify-items: center; grid-template-columns: repeat(6, minmax(100px, 182px));   grid-auto-rows: 1fr; font-size:80%;}
#categries { display:grid; gap: 1.1%; justify-items: center; grid-template-columns: repeat(4, minmax(100px, 1fr));   grid-auto-rows: 1fr; font-size:80%; margin-bottom: 30px;}
.catalog { padding:10%; display:flex;flex-direction: column;width:100%; background: #fff; box-sizing: border-box; text-decoration:none;color:#666666; align-items: center;   align-content: center;  text-align: center; min-width:80px;}
.catalog>.img{ aspect-ratio:1 / 1; width:100%;background-repeat: no-repeat;   background-position: center;  background-size: contain; }/*box-sizing: border-box; padding:5%;*/
.catalog img { max-width:100%; max-height:100%; transform: translate(0%, -50%);  position: relative;  top: 50%;}
.catalog b { text-transform:uppercase; }
.catalog .text { margin-bottom:6px;}

#mpSlider {background:#D6DBE8; padding:2.5% clamp(25px ,4%, 44px); position:relative; }
#mpSlider .wrap { display:block; width:100%; overflow:hidden;  }
#mpSlider  .leftbutton,#mpSlider  .rightbutton{ position:absolute; top:50%; transform: translateY(-50%); width:max(12px , 1.5% );}
#mpSlider  .leftbutton{left:max(8px , 1% );}
#mpSlider  .rightbutton{ right:max(8px , 1% );}

#mpSlider .slide  { display: inline-block; width:24%; text-decoration:none; }


#mpSlider .slide>div {flex-direction: column;  background:#fff;  box-sizing: border-box;  text-decoration:none; display:flex; margin:5px; padding:6%; }
#mpSlider .slide .Name b{background:#D6DBE8; display:inline; padding:5px; border-radius:3px; text-transform:uppercase; color:#454545; margin:0 0 8px -5px;white-space: nowrap; overflow:hidden; line-height:30px;}
#mpSlider .slide .Name span{}
#mpSlider .slide .Name { margin-bottom:10px; }
#mpSlider .slide .img {aspect-ratio:200 / 160; display: grid; align-items: center;}
#mpSlider .slide img {max-width:100%; max-height:100%; min-width:60px;}
.zoom{ zoom:1;}

#PodbotAndBan { display:grid; gap:max(5px , 1%);
justify-items: center;

  grid-template-columns:36% 63% ;
  grid-auto-rows: 1fr;}

#mpbans{ background:url(../mpbansWrap.svg) #fff no-repeat  bottom ;  padding:0 2%; background-size: contain;  width: 100%;  box-sizing: border-box; }
#mpbans .wrap{ display: grid; gap:1%; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; position: relative;  top: 40%;  transform: translateY(-50%);}
#mpbans .wrap img { width:100%;}



#PdbrIntD{ background:#FFFFFF; display:inline-block; padding:0 max(5px , 5%); min-width: 240px; max-width: 432px; box-sizing: border-box; }
#PdbrIntD table{margin: 0 auto;}
#PdbrIntD td:first-child{ border:none; padding-left:0; padding-right:10px}
#PdbrIntD td:last-child { border-left:none;}
#PdbrIntD td{ padding:6px 0}
#PdbrIntD :is(input , button , td  , label , select) {font-size:100%;}

#PdbrIntD button,#PdbrIntD input[type=submit] { padding:7px 5%;}
.Lbl {padding:7px ; box-sizing: border-box; position: relative; display:flex; background:#fff; border:1px solid #ECECEC;}
.Lbl label {pointer-events: none; margin:0 10px 0 0 }
.Lbl select ,.Lbl input {border:none; background: none; cursor:pointer; flex-grow:1; padding:0px; width:100%}
td+td+td .Lbl{ border-left:none;}  

.leftbutton,.rightbutton{
cursor:pointer;
display:inline-block;
width:16px;
aspect-ratio: 16/30;
background-size: cover;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='30' viewBox='0 0 16 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.0025 30C15.2556 30 15.5145 29.8993 15.7087 29.7038C16.0971 29.3129 16.0971 28.6731 15.7087 28.2822L2.41559 14.9008L15.5145 1.71488C15.9029 1.32392 15.9029 0.684175 15.5145 0.293218C15.1262 -0.0977389 14.4906 -0.0977389 14.1022 0.293218L0.291284 14.1899C-0.0970945 14.5809 -0.0970945 15.2207 0.291284 15.6116L14.2905 29.7038C14.4906 29.9052 14.7436 30 15.0025 30Z' fill='black'/%3e%3c/svg%3e ");
}


.rightbutton{

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='30' viewBox='0 0 16 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.997454 -6.55782e-07C0.74442 -6.66843e-07 0.485471 0.1007 0.291283 0.296179C-0.0970955 0.687135 -0.0970955 1.32688 0.291283 1.71784L13.5844 15.0992L0.485471 28.2851C0.0970926 28.6761 0.0970926 29.3158 0.485471 29.7068C0.873849 30.0977 1.50938 30.0977 1.89776 29.7068L15.7087 15.81C16.0971 15.4191 16.0971 14.7793 15.7087 14.3884L1.70945 0.296179C1.50938 0.0947768 1.25637 -6.44464e-07 0.997454 -6.55782e-07Z' fill='black'/%3e%3c/svg%3e ");
}

#pathway { padding:10px; background:#fff; margin:10px 0; display: inline-block;  width: 100%; box-sizing: border-box;}
#column { display:grid; grid-template-columns: minmax(240px , 28%) 1fr;  grid-column-gap: 0.8%;  grid-template-areas: "leftCol rightCol"; margin-bottom:20px;}

#leftCol {grid-area: leftCol;}
#rightCol {grid-area: rightCol; margin-bottom: 10px;}
#rightCol img { max-width:100% !important; height:auto !important;}
#rightCol table { max-width:100%;}
 .banner img{ width:100%}

.box { background:#fff; padding:20px; margin-bottom:10px;}
.box .caption ,h1{ font-size:130%; text-transform:uppercase }
.filters .label { line-height:36px;}
.nc_pagination {text-align: center;}
.nc_pagination b{ background:#2257D1; border-radius:3px; display:inline-block; color:#fff; padding:2px 6px; margin:0 10px; font-weight:100; }
.nc_pagination a { text-decoration:none; margin:0 10px; color:#454545}

.menu { list-style: none; margin:0px; padding:0; }
.menu li { margin:5% 0; 
	
	background-image: url('li.svg');
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: 14px;}
.menu li a { text-decoration:none; color:#454545; max-width:100%;}

.ask_question_popup_overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10000;
  display: none;
  height: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
#f_Name { display:none;}
.ask_question .clouse {
position:absolute;
top: 4px;
right: 9px;
display: inline-block;
cursor:pointer;
font-size:16px;
}
.ask_question input:active[type="submit"]  {}
.ask_question input[type="submit"] {}
.ask_question input[type="text"],.ask_question input[type="email"],.ask_question input[type="tel"] { width:100%; box-sizing: border-box; margin-bottom:10px;}
.ask_question  label { font-size:16px; color:#000; text-align:left; font-weight:bold;}
.ask_question  .formln {
  margin-bottom: 5px;
}

.ask_question textarea { width:100%; box-sizing: border-box;}
#backcallWin #bname{ display:none;}
.ask_question {
max-width:98%;
box-sizing: border-box;
text-align: center;
position:relative;
border: 1px solid #aaa;
border-radius: 3px;
  padding: 18px;
  margin-bottom: 21px;
  background: #fafafa;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  position: fixed ! important;
  z-index: 100000;
  display: inline-block;
  width: 394px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  margin: 0 auto 0 auto;
}

.ask_question h3 {
margin-top:10px;
text-align:center;
color:#333;
font-weight:normal;
font-size:22px;
  text-transform: none;
}

.ask_question textarea {
  height: 74px;
}


#buy_popup {
	max-width:90%;
  display: none;
  position: fixed;
  padding: 20px;
  border-radius: 4px;
  background: #fbfbfb;
  box-shadow: 0 0 10px #000;
  z-index: 200;
  left: 50%;
  margin-left: -200px;
  top: 250px;
  text-align:center;
box-sizing: border-box
;}

.popup span.close {
  position: absolute;
  top: 2px;
  right: 6px;
  text-align: center;
  color:#000;
  cursor: pointer;
  font-size:16px;
}
.popup .message {
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 17px;
}
#buy_popup button{ width:180px; text-align:center; padding:2% 2%; white-space:nowrap;}

.fancybox-wrap { max-width:90%}
.fancybox-inner{max-width:100%; height:auto !important;}
.fancybox-inner .fancybox-image { height:auto !important;}


@media screen and (max-width: 1152px)  {

#firstline{ gap:clamp(3px,2%,35px);}
#logo{ margin-left:6px;}

}

@media screen and (max-width: 1024px)  {
.hide1{ display:none}
}
@media screen and (max-width: 768px)  {
#leftCol{ display:none;}
#column {
  grid-template-columns: 100%;
  grid-template-areas: "rightCol";

}

.hide2{ display:none}
#dostavka {display:none}
#firstline{ 
  grid-template-areas:"logo soc  phon backcall";
	grid-template-columns: clamp(130px , 25% , 229px) clamp(40px , 16% , 122px) 0.8fr 0.6fr ;  
  
}
#backcall button { margin-right:4px;}
#cart img {
  margin-bottom: -4px;
  width: 16px;
}
#mpCat { grid-template-columns: repeat(3, minmax(100px, 282px)); font-size:clamp(8px,2vw,11px); padding: 1%; }
#mpCat .catalog { margin:0 15%;}
#PodbotAndBan { grid-template-columns: 1fr 1fr; gap:4%;}
#mpbans .wrap{ grid-template-columns: 1fr ; padding:0; top: 50%;    transform: translateY(-50%);}
#mpbans h3{ display:none;}
#mpbans .wrap a:nth-child(n+2){ display:none;}
#categries {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 4px;

}
#pathway { margin:4px 0;}
.box{ margin-bottom:4px;}

footer>.wrap{ grid-template-columns: auto;}
#footercatalog { display:none}
}
@media screen and (max-width: 500px)  {
.hide3{ display:none}
.mobeMenu {display: initial;}
#second {grid-template-columns: 90px clamp(100px , calc( 100% - 180px ), 324px) 90px; padding:0 1px;}
#cart{ justify-self: center;}
#phon { font-size:80%; margin-right:4px; }
#phon b {  line-height: 90%;}
#phon span{line-height:70%; font-size:100%;}
	#backcall {display:none}
	#firstline{ 
		gap:4%;
		grid-template-areas:"logo soc  phon";
		grid-template-columns: 1.6fr 0.6fr 0.8fr;  
	}
	

  #PodbotAndBan {
    grid-template-columns: 1fr ;
	grid-template-rows: auto auto;
	gap:5px;

  }
  #PdbrIntD { max-width:100%; width:100%; }
  #PdbrIntD :is(input, button, td, label, select) {font-size:120%;}
#mpbans { padding:0;}  
#mpbans .wrap { display: block; padding:5%;}
.ShortDescription noindex { display:none;}

.goods .nc_row {
padding:1%;	
 grid-template-areas:	
 			"img ShortDescription"
			"img  Price";
  grid-template-columns: minmax(70px , 13%) auto;
  grid-template-rows: 1fr 30px;
  
}
.goods .nc_row .Price{ grid-template-columns:1fr 1fr 1fr; gap:2%; align-items: center;}
.goods .nc_row .Img { padding:1%;}


#footerlogo { width:150px;vertical-align: -6px;}
.politic >a::after {
    content: "\A";  /* Символ переноса строки */
    white-space: pre;
    display: block;
    height: 0;
}

}