* {box-sizing: border-box;}

body {
	Font-family: Calibri;
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}


html, body{
         min-height: 100%;
       }

html, body{
  padding: 0;
  margin: 0;
}
html{
  height: 100%;
}
body{
  min-height: 100%;
}


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');
i {
	padding-right:18px;
	font-size:18px;
	
}

form {
	position: relative;


  position:fixed
  
	margin: 0 auto;
}

form.qty {
  width: 26px;
  height: 22px;
  margin: 0;
}
input.qty {
  width: 26px;
  height: 22px;
  font-family: Calibri;
  font-size: 18px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:0;
  border-color:#666;
}

form.form-price {
  width: 160px;
  height: 22px;
  margin: 0;
}
input.form-price {
  width: 60px;
  height: 22px;
  font-family: Calibri;
  font-size: 15px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:0;
  border-color:#666;
}

label.filtercheck {
  width: 18px;
  height: 18px;
  margin: 0;
}
input.filtercheck {
  width: 18px;
  height: 18px;
  
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:0;
  border-color:#666;
}

select.delivery-calc {
  height: 22px;
  margin: 0;
}

input.delivery-calc {
  width: 55px;
  height: 22px;
  font-family: Calibri;
  font-size: 16px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:1;
  border-color:#666;
}


select.sort-show {
  height: 22px;
  margin: 0;
}

input.sort-show {
  width: 30px;
  height: 22px;
  font-family: Calibri;
  font-size: 16px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:1;
  border-color:#666;
}

select.sort-abupdown {
  height: 22px;
  margin: 0;
}

input.sort-abupdown {
  width: 120px;
  height: 22px;
  font-family: Calibri;
  font-size: 16px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 2px;
  border:solid;
  border-width:1px;
  border-radius:1;
  border-color:#666;
}



input {
  width: 100%;
  height: 36px;
  font-family: Calibri;
  font-size: 18px;
  font-color: #6E6E6E;
  background: #FFFFFF;
  padding-left: 15px;
  outline: none;
  border:none;
  border-radius: 4px;
}
button {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 4px;
  right: 4px;
  background: #FFFFFF;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 3px;
}
button:before {
  content: "\f002";
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
  color: #6E6E6E;
  font-size: 21px;
  font-weight: 900;
}

#bg-ban {
	background-image: url(../images/banner/bg-wave-big.jpg);
	background-position: center;
	background-size:cover;
    background-repeat: no-repeat;
	background-color: #01050D;
}





#header{
	font-family: Calibri;
	font-size: 14px;
	color: #FFFFFF;
	font-weight:lighter;
	
	}
	
#footer{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	
	
	}
	
	
#headphoto{
	padding-left:5px;
	paddin-bottom:1px;
	}

#products{
	font-family: Calibri; 
	color: #FFFFFF; 
	font-size: 20px; 
	font-weight:500;
	padding-left: 11px;
	background-image: url(../images/header/prod-bg.gif);
	background-position: left;
    background-repeat: no-repeat;
}

#products-icon{
	font-family: Calibri; 
	color: #FFFFFF; 
	font-size: 20px; 
	font-weight:500; 
	padding-left: 11px;
	background-color: black;
	border-left: 1px solid white;
}

#product-line{ border-top: 1px solid white; /* Линия сверху текста */
    border-bottom: 1px solid white; /* Линия снизу текста */ }	
	
#service-line{ 
    border-bottom: 1px solid #D2D2D2; /* Линия снизу текста */ }	

#prod-srv{ 
    border: 1px solid #D2D2D2; /* блок с новыми продуктами */
	background-color:#FFF; 
	}
	
.topbrand{ 
    border: 1px solid #D2D2D2; /* блок с брэндами */
	background-color:#FFF;
	border-collapse: collapse; 
	
	}
	
	#topbrand-inner{ 
    border: 1px solid #D2D2D2; /* блок с брэндам */
	background-color:#FFF;
	
	}
	
#inner-brdr{
	border-right: 1px solid #D2D2D2;
	font-family: Inter;
	font-weight:700;
	font-size: 14px;
	padding-right:6px;padding-left:6px
	
}

#inner-brdr-top{
	border-right: 1px solid #D2D2D2;
}

#prd-name{
	font-family: Inter;
	font-weight:bold;
	font-size: 14px;
	padding-right:6px;padding-left:6px;
	
}

#zagol{
	font-family: Calibri;
	font-size:19px;
	color: black;
	padding-left:18px;
	padding-top:14px;
}

#showall{
	font-family:Calibri;
	font-size:16px;
	font-weight:200;
}
	
a:link, a:visited {text-decoration:none; color:black;}
a:hover {text-decoration:none; color:#3C5075;}	

a.header:link, a.header:visited {color:#FFFFFF;}
a.header:hover{text-decoration:none; color:#4DAAD2;}

a.popup:link, a.popup:visited {color:black;}
a.popup:hover{text-decoration:underline; color:#FFFFFF;}

a.menu:link {color:black;}
a.menu:visited {color:black;}
a.menu:hover {text-decoration:none; color:#FFFFFF;}

a.prod:link {color:black;}
a.prod:visited {color:black;}
a.prod:hover {text-decoration:none; color:black;}



A IMG { border: none; }

@font-face {
font-family: "RobotoSlab";
src: url("../fonts/Robotoslab/RobotoSlab-Var.ttf");
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter/Inter-VariableFont_slnt,wght.ttf");
}

h1 { font-family: 'Arial';
	font-size: 16px;
	color: #000000;
	font-weight:600; }
	
#price {
	font-family:Inter;
	font-size:22px;
	font-weight:400;
	color:#000;
}

#buynow {
	font-family:Inter;
	font-size:15px;
	font-weight:bold;
	color:#000;
}

#category {
	font-family:Calibri;
	font-size:16px;
	font-weight:100;
	color:#000;
}

.solutions {
	font-family: Calibri;
	font-size:38px;
	font-weight:700;
	color:white;
	padding-left: 8px;
	padding-top: 1px;
	text-shadow:#000 1px 1px 5px;
	}

.build-pc {
	width: 250px;
	font-family: Calibri;
	font-size:38px;
	font-weight:700;
	color:white;
	padding-left: 10px;
	padding-top: 2px;
	text-shadow:#000 1px 1px 5px;
	}
	
.del_2-3 {
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	color:blue;
	text-transform: uppercase;
		}
		
.del_2-7 {
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	color:#D8A300;
	text-transform: uppercase;
	}		
		
.del_ready {
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	color:#00B200;
	text-transform: uppercase;
	}

.del_2-10 {
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	color:#FB761E;
	text-transform: uppercase;
	}

.del_order {
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	color:#FF0000;
	text-transform: uppercase;
	}
	
	#leftcol {
    position: relative; /* Относительное позиционирование */
    float: left; /* Совмещение колонок по горизонтали */
    left: -7px; /* Сдвиг слоя влево */
    top: 140px; /* Смещение слоя вниз */
    width: 25px; /* Ширина слоя */
   }
   
   #rightcol {
    position: relative; /* Относительное позиционирование */
    float: right; /* Совмещение колонок по горизонтали */
    left: 7px; /* Сдвиг слоя влево */
    top: 140px; /* Смещение слоя вниз */
    width: 25px; /* Ширина слоя */
   }
   
   .grow {
	   
	   background-color:#F4F4F4;
	   border-style:solid;
	   border-width:1px;
	   border-color: #D2D2D2;
	   width: 290px;
	   height:101px;
	   transition:all 0.5s ease;
	   font-family:Calibri;
       font-weight:100;
       font-size:1.3em;
	   text-align:center;
	   margin: 0 auto;
	   
	  }
   .grow:hover {

  box-shadow: 0 0 8px 2px #D3D3D3;
}


  .grow-list {
	   
	   background-color:white;
	   width: 892px;
	   transition:all 0.5s ease;
	   position:relative;
 }
	  
   .grow-list:hover {
 z-index:100;
	   margin: 0 auto;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15), 0 4px 18px rgba(0,0,0,0.15);
}


.grow-box {
	   
	   background-color:white;
	   width: 223px;
	   transition:all 0.5s ease;
	   position:relative;   
	  }
	  
   .grow-box:hover {
 z-index:100;
	   margin: 0 auto;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), 0 4px 20px rgba(0,0,0,0.10);
}



  .grow-brand {
	   
	   background-color:white;
	   width:300px;
	   height: 110px;
	   transition:all 0.5s ease;
	   font-family:Calibri;
       font-weight:100;
       font-size:1.3em;
	   padding-top:10px;
	   z-index:100;
	   
	  }
   .grow-brand:hover {

  box-shadow: inset 0px 0px 8px 2px #D3D3D3;
}


   .grow-gallery {
	   
	   width: 93px;
	   height:93px;
	   transition:all 0.3s ease;
	   font-family:Calibri;
       font-weight:100;
       font-size:1.3em;
	   text-align:center;
	   margin: 0 auto;
	   
	  }
   .grow-gallery:hover {

  box-shadow: 0 0 5px 1px #6DD900;
}

#home-cat {
	font-family:Calibri;
	font-size:18px;
	font-weight:400;
	color:#000;
}

#bg-mobile {
	background-image: url(../images/mobile/laptop_bg.jpg);
	background-position: center;
}

#bg-tablet {
	background-image: url(../images/mobile/tablet_bg.jpg);
	background-position: center;
}

#bg-apple {
	background-image: url(../images/mobile/apple_bg.jpg);
	background-position: center;
}

/* Descripion page */

#tree {
	font-family: Calibri;
	font-size:15px;
	font-weight:500;
	color:black;
	padding-bottom:1px; padding-left:6px
	}

a.tree:link {color:black;}
a.tree:visited {color:black;}
a.tree:hover {text-decoration:underline; color:black;}

th.descript {
	border-style:solid;
	   border-width:1px;
	   border-color: #D2D2D2;
	   background-color:#FFF;
	   vertical-align:top;
	}
	
	td.descript {
	border-style:solid;
	   border-width:1px;
	   border-color: #D2D2D2;
	   background-color:#FFF;
	   vertical-align:top;
	}
	
	th.smallpic {
	border-style:solid;
	   border-width:1px;
	   border-color: #D2D2D2;
	   background-color:#FFF;
	   vertical-align:middle;
	}

th.descript-rightcolumn {
	border-style:solid;
	   border-width:1px;
	   border-color: #D2D2D2;
	   background-color:#FFF;
	   vertical-align:top;
	   font-family: Calibri;
	}	
	
#descript-name{
	font-family: Calibri;
	font-size:18px;
	color: black;
	padding-left:12px;
	padding-bottom:10px;
	}
	
	#descript-name-sub {
	font-family: Calibri;
	font-size:16px;
	font-weight:500;
	color:black;
	 padding-left:12px;
	 padding-bottom:10px;
	}
	
	#descript-name-column {
	font-family: Calibri;
	font-size:16px;
	line-height: 1.8;
	font-weight:500;
	color:black;
	}
	
	
	div.outer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle
}



img.outeri {
    
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top:auto;
	margin-bottom:auto;
  }
  
  #main-text {
	font-family: Calibri;
	font-size:14px;
	font-weight:500;
	vertical-align:middle;
	color:black;
	}

#list-bg-hard {
	background-image: url(../images/list/background/hardware-bg-list.jpg);
	background-position: right;
    background-repeat: no-repeat;
	background-color: #006DD9;
	font-family: Calibri;
	font-size:22px;
	font-weight:bold;
	color:white;
	text-align:left;
	padding-left:14px;
}

.filter-text {
	font-family: Calibri;
	font-size:15px;
	font-weight:500;
	line-height:1.5;
	color:black;
	padding-left: 8px;
	cursor:pointer;
	}

.filter-headname {
	font-family: Calibri;
	font-size:17px;
	font-weight:bold;
	line-height:1.8;
	color:black;
	padding-left: 6px;
	}

.icon {
    position: relative;
    width: 18px;
    height: 18px;
}
.icon img {
    position: absolute;
    top: 0;
    left: 0;
}
.icon img:last-child {
    opacity: 0;
}
.face:hover {
    color: black;
	font-weight:bold;
}
.face:hover img:last-child {
    opacity: 1;
}

#list-name {
	font-size:18px;
	font-weight:900;
	}
#list-descript {
	font-size:16px;
	font-weight:500;
	color:#353535;
	
	}
	
#list-descript2 {
	font-size:16px;
	font-weight:400;
	line-height:1.8;
	padding-right:8px;
	
	}
	
	.scale {
    transition: 1s; /* Время эффекта */
   }
   .scale:hover {
    transform: scale(1.1); /* Увеличиваем масштаб */
   }