

/* Start:/local/templates/lift/components/bitrix/news/portfolio/style.css?17538984646809*/
#portfolio {width:100%; margin:0 0 0px; }

#portfolio .wrap {max-width:1440px; width:calc(100% - 80px); height:100%; margin:0 auto;   }
#portfolio .wrap h2 {margin:70px 0 40px;}

div.sorter-wrap {display:flex; gap:8px;}
div.sorter-wrap a {display:inline-block; padding:8px 12px; border-radius:8px; font-size:14px; color:var(--gray1); background:var(--gray2); margin:0 0 60px; cursor:pointer;}
div.sorter-wrap a.current {color:#fff; background:var(--black);}

  div.sorter-wrap a span.mobile {display:none;}



 /*ВАРИАНТ ШАХМАТКИ

.portfolio-plitka {display:grid; grid-template-columns: repeat(4, 1fr); width:100%; gap:12px;}

.portfolio-plitka a.obj {display:flex; background:#aaa; width:100%; aspect-ratio: 1 / 1;   }

.portfolio-plitka a.obj:nth-child(6n + 4),
.portfolio-plitka a.obj:nth-child(6n + 1) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}
-----//ВАРИАНТ ШАХМАТКИ//-----*/


 /*ШАБЛОН-ПЛИТКИ-ПРОСТОЙ для отфильтрованных результатов*/

 .portfolio-plitka {width:calc(100% - 80px); margin:0 auto;  display:grid; grid-template-columns: repeat(4, 1fr);  gap:12px;}

 .portfolio-plitka a.obj {display:flex; background:#aaa; width:100%; aspect-ratio: 1 / 1;   }
 
 .portfolio-plitka a.obj {
   grid-column: auto /span 1;
   grid-row: auto /span 1;
 }
 /*-----//ШАБЛОН-ПЛИТКИ-ПРОСТОЙ//-----*/


/*ШАБЛОН-ПЛИТКИ-СЛОЖНЫЙ*/

 .portfolio-plitka.slojno {display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row dense;gap:12px;
    grid-template-areas:
      "bigLeft bigLeft   right1   right2"
      "bigLeft bigLeft   bigRight bigRight"
      "left1   left2     bigRight bigRight"
      "big      big     big     big";
    }

    .portfolio-plitka.rovno { grid-template-areas:
      "bigLeft  bigRight right1   right2"
      "left1   left2     big  big"
      
      ;}
 
    .portfolio-plitka.slojno a.obj {display:flex; background:#aaa; width:100%; aspect-ratio: 1 / 1;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 1) {grid-area: auto / bigLeft / span 2;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 2) {grid-area: auto / right1;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 3) {grid-area: auto / right2;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 4) {grid-area: auto / left1;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 5) {grid-area: auto / left2;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 6) {grid-area: auto / bigRight / span 2;}
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 7) {grid-area: auto / big / span 2; aspect-ratio:2 / 1; }

/*-----//ШАБЛОН-ПЛИТКИ-СЛОЖНЫЙ//-----*/
   
        .portfolio-plitka a.obj {position:relative; border-radius:8px; overflow:hidden; transition: all 0.14s ease-in-out;}
        
        .portfolio-plitka a.obj.hidden {display:none;}


        .portfolio-plitka a.obj:hover {transform: scale(0.98);}
        .portfolio-plitka a.obj img {position:absolute; width:100%; height:100%; object-fit:cover; transition: all 0.14s ease-in-out;  }
        .portfolio-plitka a.obj:hover img {transform: scale(1.14);}
        .portfolio-plitka a.obj p{position:absolute; z-index:2; bottom:0; left:0; right:0; backdrop-filter: blur(8px); margin:0;  background:#1C232Bbb; color:#fff; border-radius:8px;}
        .portfolio-plitka a.obj:hover p{background:var(--link);}

        .portfolio-plitka a.obj p span {display:inline-block; padding:16px 32px 16px 30px; font-weight:700;  background: url(/parts/img/arrow-w.svg) right center no-repeat;}
        .portfolio-plitka a.obj p small {display:inline-block; color:var(--gray2); display:block; position:relative; left:30px; bottom:14px; font-size:14px;}


        .portfolio-plitka a.obj.vse {background:var(--black); display:flex; align-items: center; justify-content: center; }
        .portfolio-plitka a.obj.vse:hover {transform: scale(1);}
        .portfolio-plitka a.obj.vse p {position:Relative;  background:none;}
        .portfolio-plitka a.obj.vse:hover p {background:none;}
        .portfolio-plitka a.obj.vse p span {background-image:none; display:block; padding:12px 32px 12px 30px; display:inline-block;  font-weight:700; }


 
/*---MOBILE---*/
@media screen and (max-width:768px){

    #portfolio .wrap {max-width:1440px; width:calc(100% - 40px);}
        .portfolio-plitka {display:grid; grid-template-columns: repeat(2, 1fr); width:calc(100% - 40px); gap:12px;}
        .portfolio-plitka a.obj {display:flex; background:#aaa; width:100%; aspect-ratio: 1 / 1;}        
        .portfolio-plitka a.obj {
          grid-column: auto /span 1;
          grid-row: auto /span 1;
        }
        .portfolio-plitka.slojno { grid-template-columns: repeat(2, 4fr);
          grid-template-areas:
            "bigLeft  right1"
            "right2   left1"
            "left2   bigRight"
            "big  big"
          }
          .portfolio-plitka.slojno a.obj {display:flex; background:#aaa; width:100%; aspect-ratio: 1 / 1;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 1) {grid-area: auto / bigLeft;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 2) {grid-area: auto / right1;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 3) {grid-area: auto / right2;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 4) {grid-area: auto / left1;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 5) {grid-area: auto / left2;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 6) {grid-area: auto / bigRight;}
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 7) {grid-area: auto / big; }
      
          .portfolio-plitka.slojno a.obj:nth-of-type(7n + 7) {aspect-ratio:16 / 9; }
    

}


@media screen and (max-width:450px){
    div.sorter-wrap a span.pc {display:none;}
    div.sorter-wrap a span.mobile {display:block;}
    .portfolio-plitka {width:calc(100% - 24px);}
    .portfolio-plitka a.obj p span {padding-left:12px; padding-right:0; background:none;}
    .portfolio-plitka a.obj p small {padding-left:12px; padding-right:12px; overflow:hidden; left:0; white-space: nowrap; text-overflow: ellipsis;}

    .portfolio-plitka a p {font-size:14px;}
    .portfolio-plitka {gap:8px;}
    .portfolio-plitka.slojno {gap:8px;}


    .portfolio-plitka.slojno {display:grid;  grid-auto-flow: row dense; 
      grid-template-columns: repeat(1, auto); 
      grid-template-areas:
        "bigLeft right1"
        "right2 left1"
        "left2 bigRight"
        "big  big"
      }

    .portfolio-plitka a.obj {aspect-ratio:4 / 5;}
    .portfolio-plitka.slojno a.obj {aspect-ratio:4 / 5;}
    .portfolio-plitka a.obj:nth-of-type(7n + 7) {aspect-ratio:4 / 5; }
    .portfolio-plitka.slojno a.obj:nth-of-type(7n + 7) {aspect-ratio:4 / 5; }
    
}
/* End */


/* Start:/local/templates/lift/components/bitrix/news.detail/detail-portfolio/style.css?17543142812743*/
#map {width:100%; height:400px; border-radius:8px; overflow:hidden; margin:90px 0 0px;}

 
/*Стиль балуна яндекс карт по маске (если класс содержит часть слова)*/
*[class*='-balloon_layout_normal'] {box-shadow:none; border-radius:8px; /* overflow:hidden; */} 
*[class*='balloon__close-button'] {width:36px; height:36px; background:#fff url(/parts/img/close-map.svg)center no-repeat;}  
*[class*='-balloon__content'] {width:240px; aspect-ratio:1.2 / 1;  padding:0 !important; margin-right:0 !important;} 


/*Скрываем лишнее управление и копирайт на карте Яндекс*/
*[class*='-controls'] {display:none;} 
*[class*='-copyright'] {display:none;} 

 

/*Стиль контента балуна*/
*[class*='-balloon_layout_normal'] a {position:relative; display:flex; width:240px; aspect-ratio:1.2 / 1; flex-direction: column;} 
*[class*='-balloon_layout_normal'] h3 {padding:12px 12px; margin:0; color:var(--black); background:#fff;} 
*[class*='-balloon_layout_normal'] img {width:100%;   height:100%;  object-fit:cover; position:absolute; z-index:-1; } 
*[class*='-balloon_layout_normal'] span {position:Absolute; z-index:5; bottom:12px; left:0; left: 0; margin: 0 0 0 20px; display:inline-block; background:var(--link); color:#fff; padding:8px 12px; border-radius:8px; } 
 
*[class*='-balloon__tail'] {display:none;} 

/*---MOBILE---*/
@media screen and (max-width:450px){
    #map {aspect-ratio: 4 / 7; height:auto;  margin:50px 0 0;}
    *[class*='-balloon_layout_normal'] h3 {font-size:14px;}

}



#plashka {width:100%; height:100px; background:var(--black); backdrop-filter: blur(10px);  transition: all 0.14s ease-in-out; }

    #plashka.fix {position: sticky; top: 0px; background:#00000077; }
    #plashka.vishe {position:sticky; top:-100px; }
    #plashka.neprozrachnaya {background:var(--black);}

#plashka .wrap {max-width:1440px; width:calc(100% - 40px); margin:auto; height:100%; display:flex; align-items: center;}

 
#plashka .wrap p.text {font-size:18px; font-weight:700; color:#fff;   width:240px;}
#plashka .wrap p.text small {display:block; font-size:14px; font-weight:400; color:var(--gray2); margin-top:8px;}

#all-photo {width:100%; gap:4px; margin:4px 0 120px;
    column-count: 2;
    
}

#all-photo a {display:block; margin:0 0 4px; box-sizing: content-box; }
#all-photo img {width:100%; height:100%; border-radius:0px;}

.popup-picts {
    position: absolute;
    z-index: -1;
    display: none;
    top: 0;
    left: 0;
    background: white;
}

.popup-picts--show {
    position: absolute;
    display: block;
    z-index: 30000;
    top: 0;
    left: 0;
    background: white;
}

.show-pict {
    cursor: pointer;
}
/* End */
/* /local/templates/lift/components/bitrix/news/portfolio/style.css?17538984646809 */
/* /local/templates/lift/components/bitrix/news.detail/detail-portfolio/style.css?17543142812743 */
