*{box-sizing:border-box;font-family:Ubuntu,sans-serif;position:relative}html,body{margin:0;padding:0}a{color:#2c509a;text-decoration:none}a:hover{color:orange}h1,h2,h3,h4,h5,h6{color:#444}h2{margin-top:36px}.grid{display:grid;grid-template-areas:"header" "nav" "breadcrumbs" "main" "footer"}.container{width:100%;max-width:1230px;margin:0 auto;padding:0 15px}header{grid-area:header;background:#2c509a;height:60px;display:flex;align-items:center}header .container{display:grid;grid-template-areas:"logo search right right2";grid-auto-columns:200px min-content auto auto;height:60px;align-items:center}header .logo{grid-area:logo;display:block;height:40px;width:150px;background:#ff69b4;color:#fff;text-decoration:none;line-height:40px;text-align:center;font-weight:700}header .search{padding:5px;grid-area:search;display:flex;width:min-content;align-items:center}header .search input[type=search]{width:600px;display:block;border:none;height:32px;border-radius:4px 0 0 4px;margin:0;outline:none;padding:0 8px}header .search button{display:block;width:100px;height:32px;background:linear-gradient(to bottom,#ffa200,#ff4e00);color:#fff;font-weight:700;border:none;border-radius:0 4px 4px 0;cursor:pointer}.menu-top{grid-area:nav;display:flex;justify-content:flex-start;padding:16px 0;gap:24px}.menu-top a{color:#696969;text-decoration:none;display:block}.menu-top a.active:after{content:"";display:block;top:20px;background:orange;height:4px;width:100%;margin-top:4px;position:absolute}.menu-top a:hover:after{content:"";display:block;top:20px;background:red;height:4px;width:100%;margin-top:4px;position:absolute}.breadcrumbs{grid-area:breadcrumbs;display:flex;gap:24px;padding-top:24px}.breadcrumbs a{display:block}.breadcrumbs a:after{content:"/";position:absolute;right:-14px;color:#2c509a}.breadcrumbs a:hover{color:orange}.breadcrumbs a:last-of-type:after{display:none}aside.left{grid-area:aside-left}aside.right{grid-area:aside-right}main{grid-area:main}footer{grid-area:footer}.popular{display:grid;grid-template-columns:repeat(3,1fr);justify-content:space-between;gap:16px}.popular .item{display:flex;flex-wrap:wrap;border:1px solid lightblue;justify-content:center;padding:12px;text-align:center;max-width:100%}.popular .item:hover .title{text-decoration:underline}.popular .item p{padding:0;margin:0}.popular .item .title{margin-top:12px}.popular .item .price{margin-top:8px;color:#ff8c00;font-weight:700}.popular .item img{display:block}.articles{margin-top:50px}.articles .items{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px}.articles .item{display:block;width:100%}.articles .item:hover{text-decoration:underline}.articles .item img{display:block;max-width:100%;border-radius:4px}.articles .item .title{font-size:16px;margin:12px 0 0;padding:0}.articles .item .description{font-size:14px;margin:8px 0 0;text-align:justify}.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.catalog .item{margin-bottom:24px;color:#696969}.catalog .item a{color:#696969;font-size:14px}.catalog .item a:hover{text-decoration:underline}.catalog .item .title{font-size:18px;display:block;margin-bottom:4px;color:#2c509a}.catalog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.catalog-list .block{display:grid;grid-template-areas:"image title" "image subcategory";grid-template-columns:min-content auto;grid-template-rows:min-content 1fr;gap:0 24px;align-items:start;border:1px solid lightgray;padding:16px}.catalog-list .block:hover{box-shadow:0 0 16px #0000001a}.catalog-list .block img{grid-area:image;display:block;max-width:200px}.catalog-list .block .title{font-weight:700;font-size:18px;line-height:24px}.catalog-list .block a{font-size:14px;display:block;font-weight:400;margin-bottom:8px}.catalog-list .block .subcategory{grid-area:subcategory}.products-list .item{display:grid;grid-template-areas:"image title" "image tags" "image links" "description description" "table table";grid-template-columns:min-content auto;gap:8px 24px;margin-bottom:64px}.products-list .item img{display:block;grid-area:image}.products-list .item .title{grid-area:title;font-size:24px}.products-list .item .tags{grid-area:tags;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.products-list .item .tags .tag{display:block;background:#eee;padding:4px 8px;font-size:12px}.products-list .item .links{grid-area:links;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.products-list .item .links .tag{display:block;background:#eee;padding:4px 8px;font-size:12px}.products-list .item .description{grid-area:description;padding:0;margin:0}.products-list .item .table{grid-area:table;border-collapse:collapse;border:2px solid #2c509a;margin-top:12px}.products-list .item .table th{padding:8px;border:solid 1px #2c509a}.products-list .item .table td{border:solid 1px #2c509a;padding:8px}.product .header{display:grid;gap:0 24px;grid-template-areas:"title title title" "image thumbnails description" "params params params" "title-2 title-2 title-2";grid-template-columns:min-content minmax(172px,356px) auto}.product .header h1{grid-area:title}.product .header .image{grid-area:image}.product .header .image img{max-width:200px;max-height:200px}.product .header .thumbnails{grid-area:thumbnails;display:flex;flex-wrap:wrap;gap:12px;height:172px}.product .header .thumbnails .img{display:flex;width:80px;height:80px;border:1px solid dimgrey;padding:12px;align-items:center;cursor:pointer}.product .header .thumbnails .img img{max-width:100%}.product .header .description{grid-area:description}.product .header .description p{margin:0;padding:0;text-align:justify}.product .header .description p+p{margin-top:12px}.product .header .params{grid-area:params}.product .params-table{border-collapse:collapse}.product .params-table thead th{padding:12px 24px;border:1px solid dimgrey;background:#ccc}.product .params-table tbody td{padding:4px 12px;border:1px solid dimgrey}.product .docs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}.product .docs-list .docs{display:flex;flex-wrap:wrap;gap:12px 24px}.product .docs-list .docs a{display:block;background:url(http://192.168.1.95/img/icon/pdf.svg) left center no-repeat;min-height:32px;padding-left:48px;height:min-content}.product .docs-list .docs a span{display:block;color:gray}.product .video{display:flex;flex-wrap:wrap;gap:24px}.product .video a{display:block;width:180px}.product .video a img{display:block;max-width:100%;margin-bottom:12px}
