.vendor, .full {color: var(--black); background: var(--white-1);}

.vendor {margin: 0 30px 50px; }

.vendorBanner {padding: 160px 50px; background: var(--white-1) url(/img/vendor/banner/1920.jpg) no-repeat 100% 100%; }

.vendor .headGreen, .vendor .count span  {font-size: 36px; line-height: 38px; font-weight: 700; color: var(--green-1);}

.vendor .short  {max-width:850px; margin: 25px 0 30px;}

.vendor .all    {grid-template-columns: 200px 300px;}

.vendor .vendorBtn  {margin-top:40px; grid-template-columns: 260px 360px; grid-gap:10px;}



.vendorTop  {grid-template-columns: 60px 100px 100px 1fr 200px; grid-gap: 10px; padding: 40px 30px; align-items: center; font-size: 14px;}

.full .btnDnl {background: var(--white-1) url(/img/icons/dload-1.svg) no-repeat 20px 50%; padding-left: 50px; width:200px;}

.full .btnDnl:hover {background: var(--green-1) url(/img/icons/dload-2.svg) no-repeat 20px 50%;}

.vendorTop .tab    {
    border-radius: 20px;
    text-align: center;
    display: grid;
    align-items: center;
    color: var(--gray-2-light);
    background: var(--white-2);
    font-weight: 700;
    height: 38px; 
    max-width:100px  
}

.vendorTop .act {background: var(--green-1); color: var(--white-1);}

a.tab:hover   {background: var(--green-1); color: var(--white-1);}

.vendorTable    {grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:10px; padding:0 30px 30px;}

.vendorList   {padding:0 30px;}

.vendorList {margin-bottom: 60px;}

.vendorPage {padding: 30px 40px; margin: 0 30px 20px;}

.vendorPage, .vendorForm    {background: var(--white-1); color: var(--black);}

.vendorPage h1 > a  {color:var(--green-1); font-size: 28px; line-height: 30px;}

.vendorPage a, .vendorPage h1 ~ p  {color:var(--green-1) !important;}


.vendorHead { color: var(--green-1); background: var(--gray-1); font-size: 20px; line-height: 24px; font-weight: 600; text-align: center; border-radius: 4px; padding: 10px; height: 44px; }

.vendorHead:not(:first-child)   {margin-top:30px;}

.vBlock {grid-column-gap: 85px;}

.vItem  {border-bottom: 1px solid var(--gray-3); margin-top:30px; padding-bottom:10px;}

.vItem a    {color: var(--green-1); font-size: 20px; line-height:24px; font-weight: 600px;}

.vItem a > span {display:inline-block; width:10px; height:10px; margin:0 0 2px 10px; background: url(/img/icons/next.svg) no-repeat 50% 50%;}




.demo   {grid-template-areas: "D1 D2 D3 D4"; grid-template-columns: 1fr 180px 180px 180px; gap: 30px; border-bottom: 1px solid var(--gray-3); margin-top:20px; align-items: center;}

.demo .dload    {width:180px; background: var(--white-1) url(/img/icons/dload-1.svg) no-repeat 20px 50%; padding-left:40px; }

.demo .dload:hover  {color:var(--white-1) !important; background: var(--green-1) url(/img/icons/dload-2.svg) no-repeat 20px 50%;}

.D1 {grid-area: D1; font-size:20px; line-height: 24px; font-weight: 600;}

.D1 .date   {margin:10px 0;}

.D1 .date, .D3  {color:var(--gray-txt); font-size: 14px; line-height:18px;}

.D2 {grid-area: D2; font-size: 28px; line-height: 28px; font-weight: 700; text-align:right;}

.D3 {grid-area: D3;}

.D4 {grid-area: D4;}




.vendorModelsMobile {display: none;}

.vendorModels   {padding: 40px;}

.vendorModels {grid-template-areas: "H1 H2 H3 H4 H5 H6 H7" "M1 M2 M3 M4 M5 M6 M7"; color: var(--gray-txt); font-size: 14px; line-height: 18px;}

.vendorModels .fix    {width:156px; height:24px;}

.H1, .H2, .H3, .H4, .H5, .H6, .H7 {color:var(--green-1); font-size: 18px; line-height: 24px; font-weight: 600; padding: 32px 0; background: var(--gray-1);}



.H1 { padding-left:30px; border-radius: 14px 0 0 14px;}

.H7 { padding: 12px 0; border-radius: 0 14px 14px 0;}
.H7 .fix    {grid-template-columns: repeat(4, 1fr); column-gap: 20px; row-gap: 15px; justify-items: center; justify-self: center;}




.I0 {justify-self: center;}

.M1, .M2, .M3, .M4, .M5, .M6, .M7  {border-bottom: 1px solid var(--gray-brd); padding:10px 0; margin-top:20px;}

.M1 {font-weight: 700;}


.M7 .fix {grid-template-columns: repeat(4, 24px); grid-gap:20px; justify-items: center; justify-self: center;}

.I1, .I2, .I3, .I4  {width:24px;}

.I1 {background: url(/img/icons/yarkost.svg) no-repeat 50% 50%;}

.I2 {background: url(/img/icons/contrast.svg) no-repeat 50% 50%;}

.I3 {background: url(/img/icons/tsvet.svg) no-repeat 50% 50%;}

.I4 {font-size: 12px; line-height: 24px; font-weight: 700; color: var(--gray-2);}




.vendorPage .dashed + div > span > a  {color: var(--green-1) !important; font-size:18px; line-height: 24px; display:inline-block; background: url(/img/icons/chat-1.svg) no-repeat 0 50%; padding-left: 30px;}
.vendorPage .dashed + div > span > a:hover {
    text-decoration: underline;
}
.vendorBack {margin-bottom:15px;}





/* forms */

.vendorForm {margin: 0 30px 20px; }

#testForm {max-width:1280px; padding: 60px;}

.formBlock  {justify-items: center;}

.formBlock .name    {font-size: 28px; line-height: 30px; font-weight: 700; text-align: center;}

.formBlock .text    {margin:20px 0 30px; font-size: 18px;text-align: center;}

.formBlock .header    {font-size: 20px; line-height: 24px; font-weight: 600; margin-bottom: 20px;text-align: center;}

.formFields {color: var(--gray-txt); column-gap:20px;}

.formFields .info, .formFields .infoMob    {color: var(--red-form); font-size: 14px; line-height: 18px; font-weight: 700;}

.formFields .infoMob {display: none;}

.formFields label span:not(.field) {
    color: var(--red-form);
}

.formFields label { font-size: 12px; line-height: 18px; font-weight: 700; cursor: default; position: relative; display: block;}

.formFields label.gray   {cursor: pointer;}

.formFields #submit, #submitInt, #submitInt2  {margin: 20px 0 10px; background: var(--green-1);}

#submit:not(:disabled):hover, #submitInt:not(:disabled):hover   {color:var(--green-1); background: var(--green-2);}

#submitInt2  {max-width:240px; margin: 30px 0 20px !important;}

.scope    {background: var(--white-2); border-radius: 14px; padding:0 25px; }

.scope .row-1, .scope .row-2, .scope .row-3 {white-space: nowrap; margin:20px 0; column-gap: 30px;}

.scope .row-1   {grid-template-columns: repeat(6, min-content); column-gap: 60px;}

.scope .row-2  {grid-template-columns: repeat( 6, minmax(180px, 1fr) ); }

.scope .row-3  {grid-template-columns: repeat( 6, minmax(100px, 1fr) ); }

.row-1 label, .row-2 label, .row-3 label    {font-weight: 500; color: var(--gray-txt);}

label .field {font-weight: 700; cursor: auto;}






@media screen and (min-width:1280px) and (max-width:1919px){

    .vendorBanner {padding: 75px 50px; background: var(--white-1) url(/img/vendor/banner/1280.jpg) no-repeat 100% 100%;}

    .vendor .short  {max-width:570px;} 

    .vBlock {grid-column-gap: 10px;}

    .vendorPage h1 > a  {font-size: 20px; line-height: 24px;}

    .vendorPage .dashed + div > span > a  {font-size:14px;}

    .formBlock .name    {font-size: 20px; text-align: left;}

    .formBlock .text    {font-size: 14px; text-align: left;}

    .formBlock .header    {font-size: 18px;text-align: left;}

    #testForm {padding: 40px;}

    

}

@media screen and (min-width:640px) and (max-width:1279px){

    .vendor {margin: 0 20px 50px;}

    .vendorBanner {min-height:560px; padding: 40px; background: var(--white-1) url(/img/vendor/banner/640.jpg) no-repeat 50% 100%; background-size: cover;}

    .vendor .headGreen  {font-size: 28px; line-height: 30px;}

    .vendor .short  {margin: 20px 0;}

    .vendor .vendorBtn  {margin-top:30px; grid-template-columns: 220px 290px;}

    .vBlock {grid-column-gap: 10px;}

    .demo   {grid-template-areas: "D1 D1 D1" "D2 D3 D4"; grid-template-columns: 1fr 1fr 1fr; gap:0;}

    .D2 {text-align: left;}

    .D4 {text-align: right; margin-bottom:10px;}

    .vendorModels {display: none;}

    .vendorModelsMobile {display: grid; padding:40px;}

    .vendorPage h1 > a  {font-size: 20px; line-height: 24px;}

    .vendorPage .dashed + div > span > a  {font-size:14px;}

    .H1, .H2, .H3, .H4, .H5, .H6, .H7  {background: transparent; padding: 10px 0; border-bottom: 1px solid var(--gray-brd); border-radius: 0; font-size: 14px; line-height: 18px; font-weight: 700;}

    .M1, .M2, .M3, .M4, .M5, .M6, .M7  { margin-top:0; text-align: right; color: var(--gray-txt);}

    .M1 {grid-column: 1/3; background: var(--gray-1); border-radius: 4px; text-align: center; border:0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--green-1); padding: 15px 0;}

    .M1:not(:first-child)   {margin-top:20px;}

    .H7 {padding: 10px 0 0;}

    .H7, .M7    {border:0;}

    .I1, .I2, .I3, .I4  {width:100%; background-position: 0 50%; padding:10px 0; height:44px}

    .MI1, .MI2, .MI3, .MI4  {text-align: right; padding: 10px 0;}

    .I1, .I2, .I3, .I4, .MI1, .MI2, .MI3, .MI4  {border-bottom: 1px solid var(--gray-brd);}
   
    .formBlock .name    {font-size: 20px; text-align: left;}

    .formBlock .text    {font-size: 14px; text-align: left;}

    .formBlock .header    {font-size: 18px;text-align: left;}

    .formFields .info {display: none;}

    .formFields .infoMob {display: block;}

    #testForm {padding: 40px;}

    .scope .row-1  {grid-template-columns: repeat( 3, minmax(120px, 1fr) ); row-gap: 40px;}

    .scope .row-2, .scope .row-3  {grid-template-columns: repeat( 3, minmax(120px, 1fr) ); row-gap: 40px; column-gap: 60px;}

    .scope .row-2 label:first-child, .scope .row-3 label:first-child  {grid-column: 1/4;}

    #submitInt2  { width:100%; max-width:450px;}

}

@media screen and (min-width:300px) and (max-width:639px)   {

    .vendor {margin: 0 20px 30px;}

    .vendorBanner {min-height: 620px; padding: 40px 20px; background: var(--white-1) url(/img/vendor/banner/360.jpg) no-repeat 50% 100%; background-size: cover;}

    .vendor .headGreen  {font-size: 22px; line-height: 24px;}
    
    .vendor .short  {margin: 20px 0;}

    .vendor .all    {grid-template-columns: 100px 100px;}

    .vendor .vendorBtn  {margin-top:30px; grid-template-columns: 1fr;}

    .integrate, .model  {padding:0 20px;}

    .vendorTop  {grid-template-columns: 40px 100px 100px 1fr; grid-gap:10px; padding: 40px 20px;}

    .vendorTable    {grid-template-columns: repeat(2, 1fr); }

    .vendorTable, .vendorList   {padding: 0 20px;}

    .vBlock {grid-column-gap: 10px;}

    .vendorHead {font-size: 18px; line-height: 22px;}

    .vItem a    {font-size: 14px; line-height:18px;}

    .demo   {grid-template-areas: "D1 D1" "D2 D3" "D4 D4"; grid-template-columns: 1fr 1fr; gap:20px;}

    .D2 {text-align: left;}

    .demo .dload    {width:100%; max-width:360px; background-position: calc(50% - 40px) 50% !important;}

    .D4 {text-align: center; margin-bottom:10px;}

    .vendorPage h1 > a  {font-size: 16px; line-height: 18px;}


    .vendorPage {padding: 0 20px 20px; margin: 0 20px;}

    .vendorModels {display: none;}

    .vendorModelsMobile {display: grid; padding:20px;}

    .H1, .H2, .H3, .H4, .H5, .H6, .H7  {background: transparent; padding: 10px 0; border-bottom: 1px solid var(--gray-brd); border-radius: 0; font-size: 14px; line-height: 18px; font-weight: 700;}

    .M1, .M2, .M3, .M4, .M5, .M6, .M7  { margin-top:0; text-align: right; color: var(--gray-txt);}

    .M1 {grid-column: 1/3; background: var(--gray-1); border-radius: 4px; text-align: center; border:0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--green-1); padding: 15px 0;}

    .M1:not(:first-child)   {margin-top:20px;}

    .H7 {padding: 10px 0 0;}

    .H7, .M7    {border:0;}

    .I1, .I2, .I3, .I4  {width:100%; background-position: 0 50%; padding:10px 0; height:44px}

    .MI1, .MI2, .MI3, .MI4  {text-align: right; padding: 10px 0;}

    .I1, .I2, .I3, .I4, .MI1, .MI2, .MI3, .MI4  {border-bottom: 1px solid var(--gray-brd);}

    .vendorPage .dashed + div   {text-align: left !important;}

    .vendorPage .dashed + div > span > a  {font-size:14px; line-height: 18px; min-height: 24px;}

    .formBlock .name    {font-size: 20px; text-align: left;}

    .formBlock .text    {font-size: 14px; text-align: left;}

    .formBlock .header    {font-size: 18px;text-align: left;}

    .formFields .info {display: none;}

    .formFields .infoMob {display: block;}

    .vendorForm {margin: 0 20px;}

    #testForm {padding: 20px;}



    .scope .row-1  {grid-template-columns: repeat( 2, 1fr ); row-gap: 30px; column-gap: 20px;}

    .scope .row-2, .scope .row-3  {grid-template-columns: repeat( 2, 1fr ); row-gap: 30px; column-gap: 20px;}

    .scope .row-2 label:first-child, .scope .row-3 label:first-child  {grid-column: 1/3;}

    #submitInt2  { width:100%; max-width:100%;}

}