body {
    padding: 0;
    margin: 0;
    font-family: "Poiret One", serif;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
}

#adsquiz_vidget_wrap, .adsquiz_vidget_wrap {
    z-index:99999999!important;
}

a {color: #000;}

.customTitle h1, .sectionTitle h1 {
    font-size: 34px;
    margin: 0;
    font-weight: normal;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    width: calc(100% - 30px);
    background: #fff;
    position: fixed;
    z-index: 9;
    top:0;
}

header a {
    color: #000;
    text-decoration: none;
}

header .menu a {
    margin: 0 5px;
}

header .menu a:hover {opacity: 0.6;}

header .lang a {
    margin: 0 5px!important;
    text-transform: uppercase;
}

header .lang a:hover {
    opacity: 0.6;
}

header .lang a.active {
    text-decoration: underline;
}


header .logoMob {display: none;}

header .logo {
    max-width: 235px;
}


.lang a {
    margin: 0 5px!important;
    text-transform: uppercase;
}

.lang a:hover {
    opacity: 0.6;
}

.lang a.active {
    text-decoration: underline;
}

.telephone {
    text-align: right;
}

.telephone img {
    max-height: 20px;
}

.text-center {
    text-align: center;
}


#mainslider {
    position: relative;
    background: url('../img/Tetris_012.webp') no-repeat center center;
    background-size: cover;
    height: 90vh; 
}

#projectSlider {
    position: relative;
    background-position: center!important;
    background-size: cover!important;
    height: 100vh; 
}

.displaygrid {
    position: relative;
    z-index: 2; 
    color: white; 
    padding: 20px;
    float: right;
    margin-top: 140px;
}

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


#firstProjectBlock {
    width:100%;
    margin-top:90px;
    padding: 30px 0;
    text-align: center;
}

#firstProjectBlock .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 0 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#firstProjectBlock .sectionTitle:before, #firstProjectBlock .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    /*border-top: 1px solid #e0dede;*/
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#firstProjectBlock .sectionDesc {
    padding: 0 20px;
}

#aboutProject {
    padding: 30px 0;
}

#aboutProject .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 0 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#aboutProject .sectionTitle:before, #aboutProject .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    /*border-top: 1px solid #e0dede;*/
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#aboutProject .sectionDesc {
    padding: 0 20px;
}

#projectPlan {
    padding: 30px 0;
}

#projectPlan .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 0 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#projectPlan .sectionTitle:before, #projectPlan .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    /*border-top: 1px solid #e0dede;*/
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#projectPlan .planBlock {
    display: flex;
    gap: 20px;
    padding: 0 20px;
    justify-content: center;
}

#projectAlbom {
    padding: 30px 0;
}

#projectAlbom .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 0 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#projectAlbom .sectionTitle:before, #projectAlbom .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    /*border-top: 1px solid #e0dede;*/
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#about {
    padding: 30px 0;
}

#about .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 0 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#about .sectionTitle:before, #about .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#about .sectionDesc {
    text-align: center;
}

.slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 50px;
    overflow: hidden;
  }
  
  .slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
  }
  
  .slide {
    min-width: 33.33%;
    text-align: center;
  }
  
  .slide img {
    max-width: 100%;
    border-radius: 10px;
  }
  
  p {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: bold;
  }
  
  p span {
    font-size: 14px;
    color: gray;
  }
  
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    background: #ffffffb3;
    border: 1px solid #ffffffb3;
    border-radius: 30px;
  }
  
  .prev-btn {
    left: 10px;
  }
  
  .next-btn {
    right: 10px;
  }
  
  

#dev {
    padding: 10px 0;
}

#dev a {
    color: #000;
    text-decoration: none;
}

.burger {display: none; cursor: pointer;}

.burger div {
    width: 35px;
}

.burger span {
    display: block;
    width: 35px;
    height: 1px;
    background: #000;
    margin: 8px 0;
    transition: 0.5s all;
}

.sidenav {height: 100%;width: 0;position: fixed;z-index: 999999999;top: 0;right: 0;background:#fff;overflow-x: hidden;transition: 0.5s;padding: 10px 0; }
 .sidenav .close {display: flex;align-items: center;justify-content: flex-end; margin-top: 11px;}
 .sidenav .close img {width: 20px; }
 .sidenav .menu {margin-top: 30px; color: #000;}
 .sidenav .menu a {color: #000; text-decoration: none;}
 .sidenav .menu a:hover {opacity: 0.6;}
 .sidenav .menu div {margin-bottom: 10px;}
 .sidenav .closebtn {padding: 0; }
 .sidenav .closebtn:hover {text-decoration: none; }

 .sidenav .bottom30 {
    position: absolute;
    bottom: 30px;
 }

 .sidenav .telephone {text-align: left;}

 .sidenav .telephone a {color: #000; text-decoration: none;}
 .sidenav .telephone a:hover {opacity: 0.6;}

 .sidenav .lang a {color: #000; text-decoration: none;}
 .sidenav .lang a:hover {opacity: 0.6;}
 .sidenav .lang a.active {text-decoration: underline;}

 #contact {
    background: #fafafa;
    padding: 30px 0;
 }

 #contact .sectionTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
 }

 #contact .sectionTitle:before, #contact .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#contact svg {
    width: 60px;
    margin-bottom: 30px;
} 

#contact .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 30px;
}

#contact .flex_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#contact .flex_block a {
   color: #000;
   text-decoration: none;
}

#contact .w_33 {
    text-align: center;
}

#weinsoc {
    padding: 30px 0;
}

#weinsoc .sectionTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap:10px;
}

#weinsoc .sectionDesc {
    max-width: 881px;
    margin: 0 auto 60px;
    padding: 0 30px;
}

#weinsoc .sectionTitle:before, #weinsoc .sectionTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#weinsoc .soc_block {
max-width: 881px;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
}

#weinsoc .soc_block .w_25{
width: 25%;
text-align: center;
flex: 1 1 25%;
}

#weinsoc .soc_block .w_25 span {
    text-transform: uppercase;
}

#weinsoc img {
    height: 40px;
    margin: 20px 0;
}

#complectation img {
    height: 200px;
    width: 200px;
    margin: 0 1% 20px;
    object-fit:  cover;
    border-radius: 50%;
    box-shadow: 4px 4px 8px #02020245;
}


#complectation {
    background: #d3d3d3!important;
    padding:  30px 0 0 0;
}

#complectation .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#complectation .customTitle:before, #complectation .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}


#complectation .help-inner {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background: #ffffff73;
    padding: 58px 0;
    text-align:  center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

#complectation .help-inner div {
    padding: 0 80px 40px 80px;
}

#complectation  .help-inner span {
    display:  block;
    text-align:  center;
        font-size: 35px;
    margin: 15px 0 0;
    position: absolute;
    bottom: 30px;
    text-align: center;
    left: 0;
    right: 0;
}


#complectation .helpBlock {
    margin: 30px 0 -20px;
    display: flex;
    flex-wrap: wrap;
}

#complectation .complectationImages {
    margin: 90px 0 60px;
    text-align: center;
}

#complectation .complectationText {
    padding: 25px 0;
    text-align:  center;
    line-height: 1.7;
}

#complectation .shortText {
    padding: 0 40px;
    text-align: center;
}

#complectation  .w_25 {
    width: 25%;
  }

#portfolio {
    padding: 50px 0 0 0;
}

#portfolio .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#portfolio .customTitle:before, #portfolio .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#design {
    background: linear-gradient(-45deg, #685d5d47, #c9c9c940) ,url("../img/D4Y_interior_003.webp");
background-attachment: fixed;
background-size: cover;
box-shadow: inset 0px 0px 3px black;
color: white;
text-shadow: 1px 1px black;
font-size: 18px;
padding-top: 20px;
}

#design .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#design .customTitle:before, #design .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#design .desBlock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px;
}


#design .designBlock {
  text-align: center;
  background: #ffffff96;
  padding: 40px 20px;
  color: #1e1c1b;
  transition: 0.5s all;
  font-weight: bold;
  text-shadow: none;
}

#design .designBlock:hover {
transform: translate(0, 2px);
}

#design .designBlock img {
height: 50px;
margin-bottom: 10px;
}

#design .designBlock span {
display: block;
height: 100px;
}


#design .designBlock span:before {
display:  block;
content:  '';
width: 60%;
height:  1px;
background: #1e1c1b;
margin: 20px auto;
}

#design .shortText {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 0 29px;
}

#avtor {
    background: linear-gradient(-45deg, #ffffffc7, #ffffff) ,url("../img/JK_Frantsyzskiy_kvartal_Zal_View07.webp");
     background-size: cover;
     background-attachment: fixed;
     padding: 20px 0px 60px;
 }

 #avtor .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#avtor .customTitle:before, #avtor .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}


 #avtor .avtorList {
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
     margin: 30px 0;
     max-width: 82%;
 }
 
 #avtor .avtorLine {
     background: #b2b2b296;
     margin: 40px 0;
     padding: 30px 100px;
     text-align:  center;
     font-size: 20px;
         border-bottom: 2px solid #a09f9f;
     border-top: 2px solid #a09f9f;
 }

#remont {
    box-shadow: inset 0px 0px 4px black;
  background-size: cover;
  padding: 20px 0px 60px;
   background: linear-gradient(-45deg, #ffffff26, #ffffff63) ,url("../img/img1.webp");
}

#remont .avtorList {
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
  margin: 30px 0;
  background: #f0f0f0;
  padding: 30px 0;
  min-width: 82%;
}

#remont .avtorLine {
  
  margin: 0;
  padding: 30px 100px;
  font-size: 20px;

}

#remont .avtorLine span {
font-size: 30px;
}


#remont .avtorLine:nth-child(2) {
  padding-left: 130px;
}

#remont .avtorLine:nth-child(3) {
  padding-left: 160px;
}

#remont .avtorLine:nth-child(4) {
  padding-left: 190px;
}

#remont .avtorLine:nth-child(5) {
  padding-left: 220px;
}

#remont .avtorLine:nth-child(6) {
  padding-left: 250px;
}

#remont .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#remont .customTitle:before,  #remont .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}

#remont .remontBlock {
    display: flex;
    justify-content: space-between;
}

#howWeWork {
    background: linear-gradient(-45deg, #b7b7b7c7, #d8d8d8c7) ,url('../img/JK_Frantsyzskiy_kvartal_Zal_View07.webp');
     background-size: cover;
     background-attachment: fixed;
     padding: 20px 0px 60px;
       box-shadow: inset 0px 0px 4px black;
       position: relative;
       overflow: hidden;
 }

 #howWeWork svg {
    width: 35px;
    fill: #fff;
 }

 #howWeWork .customTitle {
    text-align: center;
    display: flex;
    align-items: center;
    margin: 30px 0;
    font-size: 34px;
    line-height: 48px;
    gap: 10px;
}

#howWeWork .customTitle:before,  #howWeWork .customTitle:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 6px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top: 1px solid #e0dede;
    border-bottom: 1px solid #e0dede;
    border-color: #e0dede;
}
 
 #howWeWork .avtorList {
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
     margin: 30px 0 30px 270px;
 }
 
 #howWeWork .avtorLine {
     padding: 30px 100px;
     font-size: 20px;
     position: relative;
 }
 
 #howWeWork .avtorLine i {
     font-size: 25px;
     color:  white;
 }
 
 #howWeWork .avtorLine span {
     position:  absolute;
     right:  0;
     padding:  0 20px;
     bottom: 16px;
     color: #e3e3e3;
     font-size: 45px;
     text-shadow: 1px 1px #e3e3e3;
 }
 
 #howWeWork:before {
     position:  absolute;
     left: 20%;
     width: 350px;
     top: -10%;
     transform: rotate(-12deg);
     bottom: -10%;
     background: #808080a6;
     content:  '';
     border: 1px solid #908e8d;
     display:  block;
     box-shadow: 1px 3px 2px 1px #0000006b;
 }
 
 #howWeWork .avtorLine:nth-child(2) {
     padding-left: 120px;
 }
 
 #howWeWork .avtorLine:nth-child(3) {
     padding-left: 140px;
 }
 
 #howWeWork .avtorLine:nth-child(4) {
     padding-left: 160px;
 }
 
 #howWeWork .avtorLine:nth-child(5) {
     padding-left: 180px;
 }
 
 #howWeWork .avtorLine:nth-child(6) {
     padding-left: 200px;
 }
 
 #howWeWork .avtorLine:nth-child(7) {
     padding-left: 220px;
 }
 
 #howWeWork .avtorLine:nth-child(8) {
     padding-left: 240px;
 }
 
 #howWeWork .avtorLine:nth-child(9) {
     padding-left: 260px;
 }

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

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


.masonry_brick {
    position: relative;
    overflow: hidden;
}

.masonry_brick img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.cactus_masonry_databox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px 15px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    text-align: center;
    width: 80%;
    border-radius: 5px;
}

.masonry_brick:hover .cactus_masonry_databox {
    opacity: 1;
}



@media screen and (max-width: 1135px) {
#complectation .help-inner {
    width: 50%;
    -webkit-clip-path: none;
  clip-path: none;
}

#complectation  .w_25 {
  width: 50%;
}

}

@media screen and (max-width: 991px) {
  header {padding: 10px 15px;}
  header .menu {display:none;}
  header .logo {display: none;}
  header .logoMob {display: block; max-width: 100px;}
  header .lang {display: none;}
  header .burger {display: block;}
  header .telephone {display: none;}

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

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

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

  #complectation .helpBlock {
    margin: 30px auto;
    width: 95%;
    }

  #complectation .help-inner div {
    padding: 10px 10px 30px 10px;
  }

#avtor .avtorLine {
    background: none;
    border-top: none;
    border-bottom: none;
}

#avtor .avtorList {
-webkit-clip-path: none;
  clip-path: none;
  max-width: 100%;
}

#avtor .avtorLine {
padding: 0 30px;
}

  
#remont .avtorList {
    -webkit-clip-path: none;
  clip-path: none;
}

#remont .avtorLine {
    padding: 10px 40px;
  }

#remont .avtorLine:nth-child(2) {
    padding: 10px 40px; 
}

#remont .avtorLine:nth-child(3) {
padding: 10px 40px; 
}

#remont .avtorLine:nth-child(4) {
padding: 10px 40px; 
}

#remont .avtorLine:nth-child(5) {
padding: 10px 40px; 
}

#remont .avtorLine:nth-child(6) {
padding: 10px 40px; 
}

#remont .remontBlock {display: block;}


  #howWeWork .avtorList {
    margin: 30px 0;
    clip-path:none;
  }
  #howWeWork:before {
    display: none;
  }
  #howWeWork .avtorLine {
    padding: 10px 50px; 
  }


#howWeWork .avtorLine:nth-child(2) {
    padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(3) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(4) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(5) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(6) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(7) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(8) {
padding: 10px 50px; 
}

#howWeWork .avtorLine:nth-child(9) {
padding: 10px 50px; 
}

#projectPlan .planBlock {
    display: block;
}

#projectPlan .planBlock div {
    margin: 25px 0;
}

#firstProjectBlock {
    width: 100%;
    margin-top: 55px;
    padding: 10px 0;
    text-align: center;
}

}

@media screen and (max-width: 700px) {
    #contact .flex_block {display: block;}
    #contact .w_33 {margin-bottom: 30px;}
    #weinsoc .soc_block .w_25 {width: 50%; flex: 1 1 50%;}
   
    .slide {
        min-width: 100%;
    }

}

@media screen and (max-width: 500px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
    .category {
        grid-template-columns: repeat(1, 1fr);
    }
}

.helpcrunch-iframe-wrapper {z-index: 0 !important;}
.adsquiz_vidget_wrap {z-index: 100000000000 !important;}