

/* 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.list/portfolio/style.css?17543174387414*/
#objects-type {display:flex; flex-direction: column; width:100%; background:radial-gradient(500px 500px at 81.07% 7.36%, rgba(0, 102, 255, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%), #1C232B;}

#objects-type .wrap {max-width:1440px; width:calc(100% - 80px); margin:0 auto; display:flex; align-items: flex-start; flex-direction: column;}

#objects-type div.wrap h2{color:#fff; margin:90px 0 60px;}

.objects-type-plitka {width:calc(100% - 80px); margin:0 auto; display: grid; gap:12px; 
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    }
 

.objects-type-plitka a{display:block; border-radius:8px; overflow:hidden; width:100%;height:100%; background:#aaaaaa33; position:relative;}
.objects-type-plitka a img {position:absolute; width:100%; height:100%; object-fit:cover; transition: all 2s ease-in-out;}
.objects-type-plitka a p{position:absolute; border-radius:8px; z-index:2; bottom:0; left:0; right:0; backdrop-filter: blur(8px); margin:0;  background:#ffffffaa; color:var(--black);}





.objects-type-plitka a p span {display:inline-block; padding:16px 32px 16px 30px; font-weight:700;  background: url(/parts/img/arrow.svg) right center no-repeat;}
.objects-type-plitka a p span.mobile {display:none;}
.objects-type-plitka a:hover p  {background:var(--link); color:#fff; }
.objects-type-plitka a:hover p span  {background: url(/parts/img/arrow-w.svg) right 30% no-repeat;}
.objects-type-plitka a:hover img  {height:105%; width:110%;}



    




.objects-type-plitka a:nth-child(1) {aspect-ratio:1 / 1; 
    grid-column-start:1; 
    grid-column-end:3; 
    grid-row-start: 1; 
    grid-row-end: 3;
}

.objects-type-plitka a:nth-child(2) {
    grid-column-start:3; 
    grid-column-end:5; 
    grid-row-start: 1; 
    grid-row-end: 2;
}
    
.objects-type-plitka a:nth-child(3) {
    grid-column-start:3; 
    grid-column-end:4; 
    grid-row-start: 2; 
    grid-row-end: 3;
}
    
.objects-type-plitka a:nth-child(4) {
    grid-column-start:4; 
    grid-column-end:5; 
    grid-row-start: 2; 
    grid-row-end: 3;
}
    

.objects-type-descript {width:100%; margin:60px 0 120px; display: flex; justify-content: space-between;}
.objects-type-descript p {width:50%; color:var(--gray2);}
.objects-type-descript a {display:none;}


.objects-type-descript div.button a  {border-radius:100px; display:inline-block; padding:16px 30px; background:#30363D; position:relative; font-size:18px;}
.objects-type-descript div.button a span {margin:40px 0; border-radius:100px; color:#fff;}


/*---MOBILE---*/

@media screen and (min-width:1280px){
    /*БОЛЬШИЕ НАДПИСИ ПРИ НАВЕДЕНИИ*/
    .objects-type-plitka a:hover p {background: rgb(28,35,43); background: linear-gradient(0deg, rgba(28,35,43,1) 0%, rgba(28,35,43,0) 100%); backdrop-filter: none; height:50%; display:flex; justify-content: center; flex-direction: column; align-items: flex-start;} 
    
    .objects-type-plitka a:hover p span {font-size:48px; margin-right:40px; } 
    .objects-type-plitka a:hover p span b {display:block; } 
}



@media screen and (max-width:1440px){
    .objects-type-plitka a:hover p span {font-size:32px;} 
}

@media screen and (max-width:1280px){
    .objects-type-plitka a:hover p span {font-size:16px; background: url(/parts/img/arrow-w.svg) right center no-repeat;}  
    
}


@media screen and (max-width:768px){
    #objects-type .wrap {width:calc(100% - 40px);}
    .objects-type-plitka {width:calc(100% - 40px); display: grid; gap:12px; 
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows:1fr 1fr 1fr;
    }

    .objects-type-plitka a:nth-child(1) {
        aspect-ratio:1 / 1; 
        grid-column-start:1; 
        grid-column-end:3; 
        grid-row-start: 1; 
        grid-row-end: 3;
    }
    
    .objects-type-plitka a:nth-child(2) {
        grid-column-start:3; 
        grid-column-end:5; 
        grid-row-start: 1; 
        grid-row-end: 2;
    }
        
    .objects-type-plitka a:nth-child(3) {
        grid-column-start:3; 
        grid-column-end:5; 
        grid-row-start: 2; 
        grid-row-end: 4;
    }
        
    .objects-type-plitka a:nth-child(4) {
        grid-column-start:1; 
        grid-column-end:3; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }

    .objects-type-descript p {width:70%; margin:0;}
}

@media screen and (max-width:450px){

    .objects-type-descript {flex-direction: column; margin:0px 0 40px;}
    .objects-type-descript p {width:100%; margin:0; font-size:14px;}
    .objects-type-descript a {display:block; padding:20px 0;}
    .objects-type-plitka a p span {display:none;}
    .objects-type-plitka a p span.mobile {display:inline-block;  padding:16px 32px 16px 12px;}
    .objects-type-descript div.button {display:none;}
    #objects-type div.wrap h2{color:#fff; margin:90px 0 40px;}

    


    .objects-type-plitka {width:calc(100% - 40px); order:2; margin-bottom:90px;
        gap:12px; 
        grid-template-columns: 1fr 1fr;
        grid-template-rows:1fr 1fr 1fr 1fr 1fr ;}        
    
   
    .objects-type-plitka a:nth-child(1) {
        aspect-ratio: 4 / 5;
        grid-column-start:1; 
        grid-column-end:3; 
        grid-row-start: 1; 
        grid-row-end: 3;
    }
    
    .objects-type-plitka a:nth-child(2) {
        aspect-ratio: 16 / 9;
        grid-column-start:1; 
        grid-column-end:2; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
        
    .objects-type-plitka a:nth-child(3) { 
        aspect-ratio: 16 / 9;
        grid-column-start:2; 
        grid-column-end:3; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
        
    .objects-type-plitka a:nth-child(4) {
        aspect-ratio: 16 / 9;
        grid-column-start:1; 
        grid-column-end:3; 
        grid-row-start: 4; 
        grid-row-end: 6;
    }

    
}
#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; 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;}

}
/* End */
/* /local/templates/lift/components/bitrix/news/portfolio/style.css?17538984646809 */
/* /local/templates/lift/components/bitrix/news.list/portfolio/style.css?17543174387414 */
