.contentPage .wherebuy, .contentPage .mounting   {margin: 20px 30px 0;}

.wherebuy .tabBtn, .mounting .tabBtn {grid-template-columns: 1fr 1fr; gap:10px;}

.wherebuy .all, .mounting .all  {grid-template-columns: 1fr 2fr; gap:80px; width: fit-content;}

.wherebuy .banner   {background: var(--white-1) url(/img/wherebuy/1920.jpg) no-repeat 100% 50%; padding:120px 50px; margin:40px 0 0;}

.mounting .banner   {background: var(--white-1) url(/img/mounting/1920.jpg) no-repeat 100% 50%; padding:120px 50px; margin:40px 0 0;}

.wherebuy .headGreen, .wherebuy .all .headGreen, .mounting .headGreen, .mounting .all .headGreen     {color: var(--green-1); font-size: 36px; line-height: 38px; font-weight: 700;}



.wherebuy .text, .mounting .text {color: var(--black); margin: 20px 0 30px; max-width:1000px;}

.addSaler   {width:100%; max-width:390px;}


.btntab {height:50px; background:var(--white-1);text-align: center; font-size: 14px; line-height: 48px; font-weight: 700; color: var(--gray-txt); border-radius: 20px;;}

.active, .btntab:not(.active):hover, .tab:not(.active):hover    {background: var(--green-1) !important; color: var(--white-2);}

.tab:not(.active):hover  { cursor:pointer;}

.prodTabSlide {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto;
    grid-auto-flow: column;
}

.prodTabSlide .btntab {height:44px; line-height: 40px; font-size:18px;}


.listCity   {grid-template-columns: 1fr 5fr 2fr; align-items: center; font-size: 18px; line-height: 24px; margin: 20px 0;}

.allCity    {justify-self: end; align-self: center;}

.allCity a  {color: var(--green-1); background: url(/img/icons/n2.svg) no-repeat right 10px top 50%; padding-right:40px;}

.allCity a:hover    {text-decoration: underline;}





.contentPage .tabs { overflow: hidden; margin: 20px 0;}

.tab {
    border-radius: 20px;
    padding: 0 20px;
    display: grid;
    text-align: center;
    gap: 10px;
    background: var(--white-1);
    height: 44px;
    line-height: 40px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 18px;
}

.wherebuy .select {font-size: 18px;}

.wherebuy .typeSelect {position: relative;}

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

.partners   {gap: 10px;}

.buyPartner {background: var(--white-1); padding:40px;}

.partPhone a:hover, .partEmail a:hover, .partSite a:hover {color: var(--green-1) !important; text-decoration: underline;}

.buyPartner .btn1   {width:100%; margin:20px 0 0;}

.buyPartner .icon   {width:24px; height:24px;}

.partPhone, .partAdress, .partEmail, .partSite, .partUser {grid-template-columns: 24px 1fr; gap:15px; align-items: center; margin-top:20px;  font-weight: 700; color: var(--black);}

.partPhone  {background: url(/img/icons/contacts/phone.svg) no-repeat 0 50%;}

.partAdress  {background: url(/img/icons/contacts/home.svg) no-repeat 0 50%;}

.partEmail  {background: url(/img/icons/contacts/mail.svg) no-repeat 0 50%;}

.partSite   {background: url(/img/icons/www.svg) no-repeat 0 50%;}

.partUser   {background: url(/img/icons/user.svg) no-repeat 0 50%;}

.wherebuy .pHead    {color: var(--green-1); font-size: 24px; line-height: 28px; font-weight: 600;}

.wherebuy .pHead a  {color: var(--green-1); background: url(/img/icons/lk.svg) no-repeat top 60% right 10px; padding-right:30px;}

.wherebuy .pHead a:hover    {text-decoration: underline;}  

.wherebuy .pVnal    { font-weight:700; margin-top:15px; background: var(--green-2); color: var(--gray-txt);  padding:5px 15px; }

.wherebuy .pVnal, .wherebuy .service  {display: inline-block; font-size:12px; border-radius: 14px;}

.wherebuy .service  {padding: 8px 15px; background: var(--white-2); margin:20px 10px 0 0;}



.wbRules     {font-size: 14px; line-height: 24px; font-weight: 400;}

.wbRulesTitle {text-align: left; font-size: 40px; line-height: 45px; font-weight: 700; }

.wbRulesHead  {color:var(--green-1); font-size: 24px; line-height: 28px; font-weight: 600; margin: 20px 0 10px;}

.wbRules a    {color:var(--green-1); text-decoration: underline;}

.wbRules a:hover  {text-decoration: none;}

.wbRulesBtn {margin-top:40px;}

.wbRulesBtn .btn1   {width:100%; max-width:320px;}



#wkModal #addSaler input[type="text"], #wkModal #addInstaller input[type="text"] {margin: 0 !important;}

#addSaler .formFields, #addInstaller .formFields   {gap: 20px;}

#addSaler label:not(.fw500), #addInstaller label:not(.fw500) {font-weight: 700;}

#addSaler .row-1, #addSaler .row-2  {gap: 20px; white-space: nowrap; width: fit-content; margin:15px 0;}

#addSaler .row-1    {grid-template-columns: 150px 1fr 1fr 1fr;}

#addSaler .row-2    {grid-template-columns: 150px 1fr 1fr;}

#addSaler .customR, #addSaler .customR + label {margin: 0 !important;}

#addSaler .submit, #addInstaller .submit   {max-width:240px;}

#addSaler .act, #addInstaller .act {color: var(--green-1); }

#addSaler .gend {align-self: end;}

#addSaler .select, #addInstaller .select  {padding: 14px 20px; font-size: 14px; font-weight: 500;}

.formFields label {position: relative; display: block;}

form .typeSelect { position: relative; }

form .toName    {grid-column: 1/3;}

label.join, label.joinC {font-size: 14px;} 

form .joinC  {z-index: 101;}


/* mounting */

.lkInstaller    {background: var(--white-1) url(/img/icons/lk.svg) no-repeat 20px 50% !important; padding-left: 40px !important; color: var(--green-1) !important;}

.lkInstaller:hover  {background: var(--green-1) url(/img/icons/lk1.svg) no-repeat 20px 50%; padding-left: 40px;}

.instBtn    {grid-template-columns: 1fr 1fr; gap: 10px; width: fit-content;}

.mounting .montag   {padding: 40px;}

.montagInfo {grid-template-columns: 2fr 1fr 2fr;}

.contentPage .wherebuy .mFix  {margin-top:0;}

.block { border-radius: 14px; box-shadow: 0px 4px 10px 0px rgba(144, 144, 144, .3); background:var(--white-1); padding: 20px 40px; margin-bottom: 20px;}

.mObject {margin-bottom:20px;}

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

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

.minus, .plus {min-height: 44px;}

.objHead {color: var(--black); font-size: 20px; padding-left: 60px; font-weight: 600; cursor: pointer; display: grid; align-items: center; }

.pBox { margin-top: 20px; display: none; color: var(--black);}

.prodParam {grid-template-columns: 350px 1fr; }

.paramHead {font-weight: 700;}

.param, .paramHead {padding: 15px 0; border-bottom: 1px solid var(--green-1); font-size: 18px; line-height: 24px; }

.nobr {border-bottom: 0;}

.objImgSlider {
    margin: 40px 0 4px 0;
    width: 100%;
    
    overflow: hidden;
    display: grid;
}

.mounting .control  {text-align: center; display:block; margin-bottom: 20px;}

.oSlide {
    display: grid;
    justify-items: center;
    width:100%;
    max-height: 450px;
    background: #ffffff;
    border-radius: 14px;
    position: relative;   
}

.oSlide img {max-width:450px; max-height:450px; border-radius: 14px; box-shadow: 0px 2px 7px 2px rgba(34, 60, 80, 0.1); }

.fix    {display:grid; justify-items: center; padding:10px;}

#addInstaller .options  {max-height: 210px;}


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

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

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

    .listCity   {grid-template-columns: 1fr 3fr 2fr; font-size: 14px; line-height: 18px;}

    .wherebuy .select, .wherebuy .options label   {font-size: 14px; line-height: 18px;}

    .prodTabSlide .btntab {height:38px; line-height: 34px; font-size:14px;}

    .tab {height: 38px; line-height: 34px; font-size: 14px;}

    .montagInfo {grid-template-columns: 2fr 1fr 1fr;}

    .param, .paramHead {font-size: 14px; line-height: 18px; }

    #addInstaller .options  {max-height: 210px;}

}

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

    .contentPage .wherebuy   {margin: 0 20px;}

    .btntab {height:44px; line-height:40px;}

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

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

    .addSaler   {max-width: 280px;}

    .prodTabSlide .btntab {height:38px; line-height: 34px; font-size:14px;}

    .listCity   {grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 14px; line-height: 18px;}

    .listCity > span    {grid-column: 1/5;}

    .city   {grid-column: 1/4;}

    .wherebuy .select, .wherebuy .options label, .mounting .select, .mounting .options label  {font-size: 14px; line-height: 18px;}

    .tab {height: 38px; line-height: 34px; font-size: 14px;}
    
    .contentPage .tabs { margin: 20px 0 30px;}

    .partPhone a {display: block;}
    
    .buyPartner {padding:20px;}

    .wherebuy .pHead, .mounting .pHead    {font-size: 20px; line-height: 24px;}

    .wherebuy .service, .mounting .service    {font-size: 10px; margin: 20px 5px 0 0;}

    .vendorList h1  {margin-top: 0;}

    .wbRulesTitle {font-size: 36px; line-height: 38px;}

    .wbRulesHead  {font-size: 20px;}

    form .toName    {grid-column: 1/1;}

    #addSaler .row-1, #addSaler .row-2  {width:auto;}

    #addSaler .row-1    {grid-template-columns: 1fr 1fr;}

    #addSaler .row-2    {grid-template-columns: 1fr 1fr;}

    #addSaler .row-1 label:not(.fw500), #addSaler .row-2 label:not(.fw500)  {grid-column: 1/3;}

    #addSaler .submit { max-width: 400px; }

    .wbRulesTitle {font-size: 28px; line-height: 32px;}

    .montagInfo {grid-template-columns: 1fr 1fr;}

    .mInfo1 {grid-column: 1/3;}

    .mFix {margin-top:0;}

    a.goBack    {margin-bottom:20px;}

    .param, .paramHead {font-size: 14px; line-height: 18px; }

    .block, .buyPartner  {padding: 20px 30px;}

    #addInstaller .options  {max-height: 330px;}

}

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

    .contentPage .wherebuy, .contentPage .mounting   {margin: 0 20px;}

    .wherebuy .banner   {min-height:480px; padding:40px 20px; background: var(--white-1) url(/img/wherebuy/640.jpg) no-repeat 100% 100%; }

    .mounting .banner   {min-height:480px; padding:40px 20px; background: var(--white-1) url(/img/mounting/640.jpg) no-repeat 100% 100%; }

    .listCity   {grid-template-columns: 1fr; gap: 10px; font-size: 14px; line-height: 18px;}

    .allCity    {justify-self: unset;}

    .wherebuy .select, .wherebuy .options label, .mounting .select, .mounting .options label  {font-size: 14px; line-height: 18px;}

    .wherebuy .headGreen, .mounting .headGreen    {font-size: 22px; line-height: 24px;}

    .wherebuy .all .headGreen, .mounting .all .headGreen  {display: block;}

    .prodTabSlide {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto;
        grid-auto-flow: column;
        width: min-content;
        margin: 0;
    }

    .prodTabSlide .btntab {height:38px; line-height: 34px; font-size:14px; padding:10px 20px;}
    
    .contentPage .tabs { margin: 20px 0 30px;}

    .tab {height: 38px; line-height: 34px; font-size: 14px;}

    .contentPage .tabFix {
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        margin-bottom: -20px;
    }

    .partPhone a {display: block;}

    .buyPartner {padding:20px;}

    .wherebuy .pHead, .mounting .pHead    {font-size: 20px; line-height: 24px;}

    .wherebuy .service, .mounting .service    {font-size: 10px; margin: 20px 5px 0 0;}

    .vendorList h1  {margin-top: 0;}
    
    .wbRulesTitle {font-size: 22px; line-height: 24px;}

    .wbRulesHead  {font-size: 20px;}

    form .toName    {grid-column: 1/1;}

    #addSaler .row-1, #addSaler .row-2  {width:auto;}

    #addSaler .row-1    {grid-template-columns: 1fr 1fr;}

    #addSaler .row-2    {grid-template-columns: 1fr 1fr;}

    #addSaler .row-1 label:not(.fw500), #addSaler .row-2 label:not(.fw500)  {grid-column: 1/3;}

    #addSaler .submit { max-width: 100%; }

    .instBtn    {grid-template-columns: 1fr; gap: 20px; width:auto;}

    .mounting .all  {gap:20px;}

    .montagInfo {grid-template-columns: 1fr;}

    .mFix {margin-top:0;}

    a.goBack    {margin-bottom:20px;}

    .objHead {font-size: 16px; line-height: 24px;}

    .param, .paramHead {font-size: 14px; line-height: 18px; padding:8px 0;}

    .prodParam {grid-template-columns: 1fr; margin:20px 0;}

    .paramHead  {border:0;}

    .block  {padding:20px;}

    #addInstaller .options  {max-height: 330px;}

}