body {
        margin: 0;
       font-family: 'BlinkMacSystemFont-Regular';
       background-color: rgb(239, 222, 210);
    }
    
    @font-face {
	font-family: 'BlinkMacSystemFont-Regular';
	src: url('../fonts/blinkmacsystemfont-regular.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/blinkmacsystemfont-regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../fonts/blinkmacsystemfont-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/blinkmacsystemfont-regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('fonts/blinkmacsystemfont-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/blinkmacsystemfont-regular.svg#blinkmacsystemfont-regular') format('svg'); /* Chrome < 4, Legacy iOS */
}
    @font-face {
					font-family: 'slavjanic-normal';
					src: url('fonts/3417Slavjanic-Normal.woff2') format('woff2'),
						url('fonts/3417Slavjanic-Normal.woff') format('woff');
					  font-display: auto;
				}

				.slavjanic-normal{font-family: 'slavjanic-normal' !important;}

						h1{
					font-family: 'slavjanic-normal' !important; font-size: 5em; text-align: center; color: #711d2f; text-shadow:  10px 8px 10px #888;margin: 1vw;
				}
				 h2{
          font-family: 'slavjanic-normal' !important; font-size: 3vw;color: #711d2f; text-align: center; text-shadow:  10px 8px 10px #888;
     
        }
         h3{
          font-family: 'BlinkMacSystemFont-Regular' !important; font-size: 2.5vw; color:  #711d2f;text-align: center; text-shadow: 10px 8px 10px #888;
    letter-spacing: 0.1em;
    
    font-weight: 700;
 text-align: center;text-align: center;

        } 
 h4{font-family: 'BlinkMacSystemFont-Regular' !important; font-size: 1.5vw; text-align: center;color: #711d2f;}
        
a{color: #fff;
 text-decoration: none;
  font-size: 1.5vw;}
a:visited{
  color:#fff;
}  

li a:hover
{color:#372c2d;transition: color 0.4s ease-out;}
  
   
    .g{position: relative;
        height: 100%;
      border-color: brown;
      padding: 1px;  
    }
    .slogn{
    max-width: 2000px;
    width: 50vw;
        
        float: left;
    }
    .pic{
        float: left;
        width: 30vw;
        padding-top: 10px;
       
    }
    .k{
        width: 30vw;
        text-align: right;
        overflow: hidden;
       padding-left: 4vw;
    }
    .text{
       position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
    }
    /* Основные стили */
.menu {
  display: flex;
  justify-content: right; /* Выравнивание по центру */
  list-style: none;
  padding: 0;
  margin: 0;

  background-color: #df1a1a;
}

.menu li  {
  display: block;
  padding: 1.1vw 1.1vw;
  color:#fff;
 
}

/* Адаптивность: для экранов меньше 600px */
@media (max-width: 600px) {
  .menu {
    flex-direction: column; /* Элементы в столбик */
    
  }
  .menu li {
    text-align: center;
     
  }
  .menu li{ font-size: 20px; 
  }
  
}
.macet{
  position: relative;
  width: 300px;
  height: 100px;
  border: 2px solid red;
}
.help{position: absolute;
width: 200px;
  height: 100px;
  
  padding-left: 150px;
  
  
  z-index: 1111;
}
.slogg{
  color: #f08668;
  font-size:3vw;
  font-weight: 700;
opacity: 0;
  animation: fadeIn 3s ease forwards;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.podpis{font-size: x-large;
text-align: center;
    padding:30px;
}
.blok{
width: 99%;
height: 360px;
background-color: aliceblue;
}
.blok{
width: 99%;
height: 360px;
background-color: aliceblue;
}
.proekt{
width: 250px;
height: 250px;
margin: 20px;
padding: 30px;
float: left;
background-color: rgb(150, 170, 188);

}
.blok1{
width: 99%;
height: 100%;

}
.proekt1{
width: 250px;
height: auto;
margin: 20px;
padding-right: 130px;
float: left;


}
 .proekt1{
        width: 30vw;
        
        overflow: hidden;
        height: 100%;
       
    }
    .k1{
        width: 40vw;
        text-align: center;
        overflow: hidden;
        z-index: -11;
    }
    .hr{
      width: 100%;
    }
       .hr{
      width: 100%;
    }
    .sla{
      position: relative;
      width: 20%;
      min-width:130px;
      height:30vw;
       border-radius: 10px;
      background-color:#c5aa79;
      padding: 1px;
      margin: 5vw;
      float: left;
    }
  .sla:hover{box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);}
   
    .obloz{
      
     
    }
    .u{
  display: block;
  border:1px solid #000;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
       object-fit: cover;
}
.yy{
  width: 1220px;
  height: 1205px;
  background-color: #461da6;}
.child{
 width: 10vw;
  margin-left: 6vw;
   
}
.mmm{
  position: relative;
 
   margin-left: 0;
  margin-top: 0;
  border-bottom: 1px solid black; 
}
.f1{position: absolute;
  padding-left:6vw;  
padding-top: 0.3vw;
 width: 3.3vw;
 z-index:111 ;
}
.forma{
 vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}
    
  .sla:hover{box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
  transition:  all 0.5s;}
    .te{
      width: 21vw;
      height: 20vw;
      position:absolute;
      padding-top:  1vw;
      margin: 0 auto;
      font-size: 2vw;
      
      color: #711d2f;
     
      text-align: center;
      opacity: 1;
    }
    .te:hover{
      opacity: 1;
       transition:  all 0.9s;
     
    }
    .sla{
    
      width: 22%;
      position: relative;
      min-width:130px;
      height:25vw;
       border-radius: 10px;
       border: 1px solid black;
       #background-image: url(images/beresta.jpg);
      background-color:#f5f3ef;
      padding: 1px;
      margin: 1vw;
      float: left;
      box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
    }
    .sla1{
     
      

      min-width:130px;
      height:23vw;
       border-radius: 10px;
    
      
      padding: 0px;
      margin: 0vw;
    transition:  all 0.5s;
     
    }
    .obloz{
     width:  95vw;
   
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    max-width: 2000px;
      position: relative;
      
    
      height: auto;
}
    
    .u{
  display: block;
  border:1px solid #000;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
       object-fit: cover;
}
.muny{
  border:  1px solid #861414;
background-color: #f7c86b;
padding: 0vw;
width: 10vw;
margin-bottom: 1vw;
border-radius: 0px;

 position: absolute;
 


color: #df1a1a;

text-align: center;
}
.muny:hover{
 background: #a63f1d;
 transition:  all 0.5s;

}
.obertka{
  width: 60%;
  


  padding-left: 1vw;
  float: left;
}
.kkk{
 
  
  float: left;
 
  

  
}
 .sla__nows{
      position: relative;
      width: 22%;

      min-width:130px;
      height:25vw;
      
       border: 1px solid black;
       background-image: url(images/beresta.jpg);
      background-color:#fcfbf9;
      padding: 0px;
      margin: 1vw;
      float: left;
    }
    .now1{
      background-color: #efb776;
      border-radius: 0;
      margin: 1vw;
      width: 25vw;
      height:25vw;
      overflow: hidden;
      float: left;
      box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
      

    }
    .now41{
      position: relative;
      
      width: 55vw;
     
      height:23vw;
       border-radius: 10px;
    
      
      padding-left: 2vw;
      margin: 1vw;
    transition:  all 0.5s;
     
    }
    .fon__nows{
      border-radius: 0;
      background-color: #2c73b0;
      padding: 1.6vw;
      color:#fff;
      font-weight: 500;
      font-size:1vw;
      height:100%;
    }
    .wind{
      border-radius: 0;
    
      width: 27vw;
      height: 11vw;
      
    }
    //////////////////////////
    .o{position: relative;
    width: 25vw;
    height: 23vw;
   border:2px solid rgb(66, 33, 229);
}
.pic{
    position: absolute;
     width: 23vw;
      height: 20vw;
      overflow: hidden;
border:2px solid rgb(224, 21, 44);
bottom: 0;
    height: 5vw;
    padding: 1vw;
}
.shild{
    position: absolute;
    width: 25vw;
    height: 15vw;
    border:2px solid aqua;
    overflow: hidden;
   
}
.txt{
    position: absolute;
    margin-bottom: 0;
    background-color: rgb(232, 196, 150);
       box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
    padding: 0.5vw;
    border-bottom-right-radius: 10px;
}
.muny1{
  position: absolute;
  color: #000;
  width: 14.6vw;
 
  margin-bottom: 0;
margin-right: 0 ;
 bottom: 0;
 padding-right: 5vw;
 background-color: #2c73b0;
  border: 1px solid rgb(31, 238, 12);
}
.qr{
    position: absolute;
    width: 15vw;
    padding-left: 12.5vw;
    padding-bottom: 0;
    bottom: 0;
}
.seredina{
  display: flex;
   justify-content: center;
  align-items: center;
  color: #f4f2f2;
  font-size: larger;
}
.logo__qr{
  position: absolute;
  
  width: 20%;
  height: 21vw;
  background-color: #df1a1a;
  z-index: 111;
}
.list{
    width: 85vw;
    margin: 0 auto;
    padding: 3vw;
   font-size: large;
    background-color: aliceblue;}
.kegl{
    font-size: x-large;
  }
  
  .senter1{
  width: 90vw;
  justify-content: center;
   margin: 0 auto;

}
.sla3{
      position: relative;
      width: 30%;
      min-width:130px;
      height:20vw;
       border-radius: 10px;
       border:1px solid  #2f2f2f ;
      background-color: #fff;
      padding-bottom: 0;
      margin: 1vw;
    
     float: left;
    }
  .sla3:hover{box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
   transition:  all 0.5s;}
  .bottom{
    
  }
    .list1{
    width: 40vw;
    margin: 0 auto;
   
   }
    .krivo{
    padding-right: 43vw;
   }
   .txt1{
  
    position: absolute;
    width:29.3vw;
    color: #711d2f;
    background-color: rgb(232, 196, 150);
       box-shadow: 8px 10px 5px 3px rgba(44, 44, 49, 0.3);
   padding: 2vw;
   margin-bottom: 0;
   bottom: -7vw;
  
  }