/* PRODUCTS */

.ph1    {font-size:18px; line-height:24px; font-weight:700;}

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

.products .prodItem {grid-gap:10px; padding: 0 30px;}

.products .prodItem .shadowBlock    {justify-items:center; background: var(--white-1); padding:0 30px;}

.pImg   {margin: 15px 0 10px;}

.pImg, .pImg img   {width:210px; height:210px;}

.pBlockLink {background: url(/img/icons/pRightP.svg) no-repeat 100% 50%; margin:30px 0; min-height:44px; padding-right: 50px;}

a:hover > .pBlockLink   {background: url(/img/icons/pRightA.svg) no-repeat 100% 50%; }


/* search model */

.searchModel    {margin: 40px 0 20px 30px;}

#searchModel input:focus {outline: none;}

.sIcon  {background: url(/img/icons/searchW.svg) no-repeat 50% 50%; height:46px;}

.sFix   {background: var(--white-1); height:46px; border-radius:0 40px 40px 0; width:196px}

.sBtn   {height:46px; width:200px; font-size:14px; line-height: 38px; position: absolute; right:2px;}

#searchModel form {
    display: grid; 
    grid-template-columns: 48px 1fr 200px; 
    align-items: center; 
    background: var(--green-1); 
    border-radius: 40px; 
    padding: 2px;
    height: 50px;
}

#searchModel {
    padding: 40px 0 20px;
    background:var(--white-2);
}

#searchModel input {
    /*width: 100%;*/
    height: 46px;
    border-radius: 40px 0 0 40px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--black);
}





/* products page */

.backProducts   {margin: 0 0 20px;}

.contentPage .prodUp, .contentPage .prodContent, .contentPage .prodOS {margin: 0 30px;}

.prodUp {background: var(--white-1); border-radius: 14px;}

.prodBase   {grid-template-areas: "P1 P2 P3"; grid-template-columns: minmax(600px, 1fr) minmax(650px, 1fr) 1fr; grid-gap: 60px; padding:60px 30px 70px; border-radius: 14px;}

.P1  { grid-area: P1; justify-self: center;}

.P2  { grid-area: P2;}

.P3  { grid-area: P3; padding-left:30px;}

.prodSlider {max-width:600px;}


.prodParam  {grid-template-columns: 33% 1fr;}

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

.nobr  {border-bottom: 0;}

.paramHead  {font-weight: 700;}

.param  {font-weight: 500;}

.costHead   {font-size: 20px; line-height: 28px; font-weight: 600; color: var(--black); margin:15px 0 20px;}

.nominals   {grid-template-columns: repeat(4, 60px); max-width:280px; grid-gap: 10px; }

.nominals div   {width: 60px; height: 38px; border-radius: 20px; color: var(--green-1); border: 1px solid var(--green-1); text-align: center; display: grid; align-items: center; font-weight: 700; cursor:pointer;}

.nominals .act, .nominals div:hover  {color: var(--white-1); background: var(--green-1);}

.cost   {margin: 30px 0; font-size: 40px; font-weight:600; color: var(--green-1);}

.prodBtn    {grid-template-columns: 1fr; grid-gap: 20px; max-width:280px; margin-bottom: 20px;}

a.offer  {background: url(/img/icons/offer.svg) no-repeat 0 50%; padding-left:30px; color: var(--green-1); display: block;}

a.offer:hover   {color: var(--black); background: url(/img/icons/offer2.svg) no-repeat 0 50%;}



.prodContent   {font-weight: 400; font-size:18px; line-height:27px; }

.prodDesc   {color: var(--black);}

.contentPage .tabs   {margin: 60px 0 40px;}

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

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

.tab     {border-radius:20px; 
    padding:0 20px;
    display: grid;
    align-items: center;
    gap: 6px;
    color: var(--gray-2-light);
    background: var(--white-1);
    height: 38px;
    line-height: 38px;
    white-space: nowrap;
    font-weight: 700;
    cursor:pointer;
width: min-content;   
}





.contentPage .prodOS {padding:25px; margin:60px 0 20px; align-items: center; grid-gap:120px; grid-template-columns: auto; grid-auto-flow: column; background: var(--white-1) url(/img/products/os_bg.jpg) no-repeat 50% 50%;}

.prodHead   {font-size: 28px; line-height:40px; font-weight:700; text-align:right;}

.prodIcons  {grid-template-columns: repeat(6, 1fr); grid-gap:25px; width:fit-content;}

.pi1, .pi2, .pi3, .pi4, .pi5, .pi6  {width:60px; height:60px;}

.pi1    {background: url(/img/icons/products/w.svg) no-repeat 50% 50%;}

.pi2    {background: url(/img/icons/products/l.svg) no-repeat 50% 50%;}

.pi3    {background: url(/img/icons/products/m.svg) no-repeat 50% 50%;}

.pi4    {background: url(/img/icons/products/i.svg) no-repeat 50% 50%;}

.pi5    {background: url(/img/icons/products/m.svg) no-repeat 50% 50%;}

.pi6    {background: url(/img/icons/products/tv.svg) no-repeat 50% 50%;}

.prodBanner .grid   {grid-gap: 10px;}

.prodBanner a:hover > div, .prodSix a:hover > div {color: var(--black);}

.prodHeadBan    {font-size: 22px; line-height: 30px; font-weight: 700; position: absolute; bottom:0; left:0; margin:25px;}

.prodH  {color: var(--black); font-weight: 600; font-size: 20px; margin-bottom: 30px;}



.pb1, .pb2, .pb3, .pb4  {height:280px; padding:25px; position:relative; }

.pb1    {background:url(/img/products/pb1.jpg) no-repeat 50% 0; background-size: cover;}

.pb2    {background:url(/img/products/pb2.jpg) no-repeat 50% 0; background-size: cover;}

.pb3    {background:url(/img/products/pb3.jpg) no-repeat 50% 0; background-size: cover;}

.pb4    {background:url(/img/products/pb4.jpg) no-repeat 50% 0; background-size: cover;}





.paramBlock {grid-gap: 60px; margin-bottom:60px;}

.paramTopic {grid-column:1/3; color: var(--green-1); background: var(--gray-1); font-size: 20px; line-height: 24px; font-weight: 700; text-align: center; border-radius: 4px; padding:10px; height:44px;}

.tab2 .paramHead, .tab2 .param  {border-bottom: 1px solid var(--gray-brd);}


.unlim  {grid-template-columns: repeat(5, 1fr); grid-gap: 40px;}

.unlimBox   {grid-template-columns: 45px 1fr; color:var(--green-1); align-items: center; grid-gap: 20px;}

.unlimBg, .unlimTxt    {display: grid; align-items: center; }

.unlimBg    {background: var(--green-2); width:45px; height:45px; border-radius:40px; font-size: 14px; font-weight: 500; justify-items: center;}

.unlimTxt   {font-size: 18px; line-height: 24px; font-weight:700; color: var(--green-1);}

.tab5 .rules    {grid-gap:20px; }

.tab5 .unlimTxt {line-height: 27px; font-weight:400; color: var(--black);}

.tab5 .unlimBox:not(:nth-child(3)):not(:nth-child(4)) {align-items: start;}

.prodVideo  {grid-gap:10px;}

.prodVideo iframe   {width: 100%; height: 100%; max-width:1157px; aspect-ratio: 16/9;}

.ipSlide:not(.prodSlider), .tab2, .tab3, .tab4, .tab5, .tab6, .tab7  {display:none;}

.ipSlide, .ipSlide img, .prodSlider img    {max-width:600px;}

.prodSlider    {width:100%; overflow: hidden; display:grid;}

.P1 .control    {text-align:center; margin:0;}




.prodContent .pBox  {margin:0; display:grid; grid-column: 1/3;}

.prodContent .softArea-1    {
    grid-template-columns: minmax(30%, 40%) minmax(150px,1fr) 150px 180px;
    grid-template-areas: "A C D E";
    grid-gap:30px;
}

.prodContent .softArea-2    {font-weight: 500;
    grid-template-areas: "F H";
    grid-template-columns: max-content;
    grid-gap: 50px;
} 

.prodContent .H {text-align: left;}

.prodContent .C {text-align: right;}

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



/* ip-project form */

.projectForm    {padding:40px; justify-items: center; background: var(--white-1);}

#project    {width:100%; max-width:1030px; display: grid; grid-gap:25px;}

#projectSubmit  {margin-bottom:10px; background: var(--green-1);}

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

#project .label {font-weight: 700;}

#project .sendBtn   {max-width:480px; justify-self: center;}

#project .col_3_3_1_1   {grid-gap: 20px;}

#project .hFiles    {display:none;}

#project input, #project textarea   {background: var(--white-2); margin-bottom:0;}

#projectMess    {width:100%; height:auto; min-height:90px; resize: none; border-radius: 14px; padding:14px 20px;}

.formInfo   {font-size:14px; font-weight: 500; margin-left:8px;}

.pFilesBlock    {grid-gap:15px;}

.pFiles {align-items: center; grid-gap: 10px;}

.pFiles .btn2   {max-width: 200px;}

.pFiles .label  {margin: 0 0 0 8px;}




.noSlide  {display: grid; justify-items: center;}

.noSlide img    {max-width:600px; border-radius: 14px;}




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

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

    .pTxt   {font-size: 12px; line-height: 14px;}

    .P3 {padding: 0;}

    .prodBase   {grid-template-columns: minmax(380px, 1fr) minmax(470px, 1fr) 1fr; grid-gap: 30px; padding:40px 20px;}

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

    .contentPage .prodOS {grid-gap:40px;}

    .prodContent   {font-weight: 500; font-size:14px; line-height:20px;}

    .prodIcons  {grid-gap:15px;}

    .prodHeadBan    {font-size: 18px; line-height: 24px;}

    .unlim  {grid-template-columns: repeat(3, 1fr);}

    .tab5 .unlimTxt {font-size:14px; line-height: 20px; font-weight:500; }

    .isDocs {grid-column: 1/2;}

}

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

    .pItem {padding: 0 20px;}

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

    .pTxt   {font-size: 12px; line-height: 14px;}

    .searchModel    {margin: 30px 20px 40px;}





    .prodUp, .prodUp .shadowBlock {background:none; box-shadow: none;}

    .P1 {box-shadow: 0px 4px 10px 0px rgba(144, 144, 144, .3); border-radius: 14px; display:grid; justify-self: normal; background: var(--white-1);}

    .P2  {margin-top:30px;}

    .P3 {padding:0;}

    .prodSlider, .prodSlider img {border-radius: 14px; justify-self: center;}






    .nominals   {grid-template-columns: repeat(8, 60px);}

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

    .costHead {margin: 20px 0;}

    .prodBtn {grid-template-columns: 1fr 1fr; max-width:100%; margin-bottom: 45px;}

    .prodBtn .btn1, .prodBtn .btn2  {width:100%; max-width:290px;}

    .prodBtn .price {justify-self: end;}

    .prodBtn .fixR  {justify-self: unset !important;}

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

    .prodBase   {grid-template-areas: "P1" "P3" "P2"; grid-template-columns: 1fr; grid-gap: 0; padding:0; }

    .contentPage .prodUp, .contentPage .prodContent  {margin: 0 20px;}

    .contentPage .prodOS {grid-template-columns: 1fr; grid-auto-flow: unset; grid-gap:30px; background: var(--white-1) url(/img/products/os_bg_m.jpg) no-repeat 50% 50%; background-size: cover;}

    .prodHead   {text-align:center; padding:0 20px;}

    .prodContent   {font-weight: 500; font-size:14px; line-height:20px;}

    .prodIcons  {justify-self: center;}

    .prodBanner .grid   {grid-gap: 20px;}

    .contentPage .prodSix    {margin:40px 0 10px;}

    .contentPage .prodBanner:last-child {margin-bottom:40px;}

    .prodTabSlide   {margin: 0 20px;}

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

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

    .unlim  {grid-template-columns: 1fr; grid-gap: 20px; margin-bottom: 40px;}

    .tab5 .unlimBox:not(:nth-child(4))  {align-items: start;}

    .tab5 .unlimTxt {font-size:14px; line-height: 20px; font-weight:500; }

    .rules  {margin-bottom: 40px;}

    .isDocs {grid-column: 1/2;}

    .prodContent .softArea-1    {
        grid-template-columns: minmax(150px,1fr) 150px 180px;
        grid-template-areas: "A A A" "C D E";
        grid-gap:20px;
        margin: 20px 0 0;
    }

    .prodContent .C {text-align: left;}

}

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

    .pItem {padding: 0 20px;}

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

    .searchModel .pTxt   {font-size: 12px; line-height: 14px; margin-top:50px;}

    .searchModel    {margin: 30px 20px 40px;}

    #searchModel form {grid-template-columns: 48px 1fr; height:44px; }

    .sIcon  {height:40px;}

    #searchModel input  {border-radius: 40px; height:40px;}

    .sFix   {grid-column:1/3; width:100%; height:auto; margin-top: 20px;}

    .sBtn   { position:static; width:100%; height:44px;}





    .prodUp, .prodUp .shadowBlock {background:none; box-shadow: none;}

    .P1 {box-shadow: 0px 4px 10px 0px rgba(144, 144, 144, .3); border-radius: 14px; display:grid; justify-self: normal; background: var(--white-1);}

    .P2  {margin-top:30px;}

    .P3 {padding:0;}

    .prodSlider, .prodSlider img {border-radius: 14px; justify-self: center;}

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

    .paramHead  {border-bottom: 0;}

    .prodBtn    {max-width:100%;}

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

    .param  {padding: 10px 0 15px;}

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

   
    


    .prodTabSlide   {margin: 0 20px;}

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

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

    .prodBase   {grid-template-areas: "P1" "P3" "P2"; grid-template-columns: 1fr; grid-gap: 10px; padding:0}

    .contentPage .prodUp, .contentPage .prodContent  {margin: 0 20px;}

    .contentPage .prodOS {grid-template-columns: 1fr; grid-auto-flow: unset; grid-gap:30px; background: var(--white-1) url(/img/products/os_bg_m.jpg) no-repeat 50% 50%; background-size: cover;}

    .prodHead   {text-align:center; padding:0; font-size: 18px; line-height: 25px;}

    .prodH  {line-height:24px;}

    .prodHeadBan    {font-size: 18px; line-height: 25px;}

    .prodContent   {font-weight: 500; font-size:14px; line-height:20px;}

    .prodIcons  {justify-self: center; grid-template-columns: repeat(3, 1fr);}

    .prodBanner .grid   {grid-gap: 20px;}

    .contentPage .prodBanner:last-child {margin-bottom:40px;}


    .paramTopic {height:auto; grid-column: auto; font-size: 18px; line-height: 22px; font-weight: 600;}

    .unlim  {grid-template-columns: 1fr; grid-gap: 20px; margin-bottom: 40px;}

    .tab5 .unlimBox:not(:nth-child(4))  {align-items: start;}

    .tab5 .unlimTxt {font-size:14px; line-height: 20px; font-weight:500; }

    .rules  {margin-bottom: 40px;}

    .isDocs {grid-column: 1/2;}

    .prodContent .softArea-1    {
        grid-template-columns: auto;
        grid-template-areas: "A A" "C C" "E D";
        grid-gap:20px;
        margin: 20px 0 0;
    }

    .tab4 .paramTopic {grid-column:1/3;}

    .prodContent .paramBlock    {grid-gap: 30px;}

    .prodContent .H {text-align: right;}

    .prodContent .C {text-align: left;}

    .projectForm    {padding: 40px 20px;}

}