@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
#wawes{
  width: 100%;
}
.menu-main {
  list-style: none;
  padding: 20px 30px;
  margin: 20px;
  font-size: 48px;
  text-align: center;
  position: relative;
}

.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  margin: 0 15px;
  padding: 10px 30px;
  font-family: 'Montserrat', regular;
  color: #4A78BF;
  transition: .3s linear;
  position: relative;
}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F58262;
  opacity: 0;
  transition: .5s ease-in-out;
}
.menu-main a:before {left: 5px;}
.menu-main a:after {right: 5px;}
.menu-main a.current:before,
.menu-main a.current:after,
.menu-main a:hover:before, 
.menu-main a:hover:after {opacity: 1;}
.menu-main a.current,
.menu-main a:hover {color: #F58262;}
@media(max-width:680px) {
  .menu-main li {display: block;}
}






.go{
   padding-top: 80px;   
     margin: 0 auto;
}
.about{
  padding-top:  20px;
}
.about1{
  margin-top: 100px;
}

#sqare{
  padding-bottom: 250px;
  padding-right: 60px;
}
#ship{
  padding-bottom: 200px;
}

#teleg img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#vk img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#doshcol img{
    position: relative;
    width: 30%;    
    margin: 0 auto;
}
#shcol img{
    position: relative;
    width: 30%;
    margin: 0 auto;
    display: inline;
}
#mlad img{
    position: relative;
    width: 30%;
    
    margin: 0 auto;
}
.gruppa img{
  display: inline;
}
#social{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
	position: relative;
	text-align: center;
	top: 10px;
	color: #db7380;
}
#tel{
  font-family: 'Montserrat', sans-serif;
	top: 10px;
	text-align: center;
  font-size: 40px;
	text-decoration: none;
  color: #db7380;
}
#mail{
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 40px;
  text-align: center;
  color: #db7380;
}
.card{
  margin-top: 20px;
}
#bg{
  margin-top: 100px;
  margin-bottom: 150px;
}
#garden{
  margin-top: 100px;
  max-width: 1000px;
  width: 100%;
}
#drago{
  margin-top: 100px;
  max-width: 600px;
  width: 100%;
}

@media (max-width: 1200px) {
  #bg{
    width: 1000px;
  }
}
@media (max-width: 1050px) {
  #bg{
    width: 750px;
    margin-bottom: 120px;
  }
}
@media (max-width: 768px) {
  #bg{
    width: 550px;
    margin-bottom: 60px;
    margin-top: 60px;
  }
}
@media (max-width: 575px) {
  #bg{
    width: 450px;
    margin-bottom: 60px;
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  #bg{
    width: 400px;
    margin-bottom: 60px;
    margin-top: 30px;
  }
}
@media (max-width: 400px) {
  #bg{
    width: 350px;
    margin-bottom: 60px;
    margin-top: 30px;
  }
}
@media (max-width: 360px) {
  #bg{
    width: 250px;
    margin-bottom: 30px;
    margin-top: 15px;
  }
}



@media (max-width: 1400px) {  

#ship{
  
  width: 600px;
  height: auto;
}
#text2{
  width: 500px;
  height: auto;
}
#sqare{
  
  width: 600px;
  height: auto;
}

}




@media (max-width: 1200px) { 
.menu-main {
  font-size: 40px;
}  
#text1{
  width: 450px;
  height: auto;
}
#ship{
  
  width: 470px;
  height: auto;
}
#text2{
  width: 450px;
  height: auto;
}
#sqare{
  
  width: 470px;
  height: auto;
}
.about{
  padding-top: 20px;
}
}



@media (max-width: 1024px) { 
.menu-main {
  font-size: 36px;
}
#text1{
  width: 350px;
  height: auto;
}
#ship{
  padding-bottom: 120px;
  width: 370px;
  height: auto;
}
#text2{
  padding-bottom: 60px;
  width: 350px;
  height: auto;
}
#sqare{
  
  width: 360px;
  height: auto;
}
}



@media (max-width: 768px) { 
  #korablik{
  width: 400px;
}
.menu-main {
  font-size: 25px;
}
#text1{
  width: 225px;
  height: auto;
}
#ship{
  padding-bottom: 80px;
  width: 200px;
  height: auto;
}
#text2{
  padding-bottom: 110px;
  width: 225px;
  height: auto;
}
#sqare{
  padding-right: 30px;
  width: 200px;
  height: auto;
}

.about1{
  margin-top:  30px;
}
}



@media (max-width: 480px) { 
   #korablik{
  width: 300px;
}
.menu-main {
  font-size: 20px;
}
#text1{
  width: 155px;
  height: auto;
}
#ship{
    padding-bottom: 35px;
    width: 215px;
    height: auto;
}
#text2{
    padding-bottom: 150px;
    width: 155px;
    height: auto;
}
#sqare{
  
  width: 185px;
  height: auto;
}
.about{
  padding-top:  10px;
}
}

@media (max-width: 400px){

#text1{
  width: 170px;
  height: auto;
}
#ship{
    padding-bottom: 70px;
    width: 170px;
    height: auto;
}
#text2{
    padding-bottom: 150px;
    width: 170px;
    height: auto;
}
#sqare{
  
  width: 145px;
  height: auto;
}
}



@media (max-width: 365px) { 
    #korablik{
  width: 275px;
}
.menu-main {
  font-size: 15px;
}

#text1{
  width: 120px;
  height: auto;
}
#ship{
    padding-bottom: 35px;
    width: 130px;
    height: auto;
}
#text2{
    padding-bottom: 170px;
    width: 120px;
    height: auto;
}
#sqare{
  
  width: 110px;
  height: auto;
}
.about{
  padding-top:  10px;
}

}

#Zubr{
 margin-top: 50px;
} 
#Zaha{
 margin-top: 50px;
} 
#Lebed{
 margin-top: 50px;
} 
#Demi{
 margin-top: 50px;
} 
#Yaz{
 margin-top: 50px;
} 
#Danil{
  margin-top: 50px;
}
#Nastya{
 margin-top: 50px;
}
#Vera{
 margin-top: 50px;
margin-bottom: 100px;
}  
  @media (max-width: 1600px) {
#drago{
  width: 1300px;
  margin-bottom: 100px;
}
#reclam{
  width: 1300px;
}
#Zubr{
 margin-top: 50px;
 width: 1300px;
} 
#Zaha{
 margin-top: 50px;
 width: 1300px;
} 
#Lebed{
 margin-top: 50px;
 width: 1300px;
} 
#Demi{
 margin-top: 50px;
 width: 1300px;
} 
#Yaz{
 margin-top: 50px;
 width: 1300px;
} 
#Danil{
 margin-top: 50px;
 width: 1300px;
} 
#Nastya{
 margin-top: 50px;
 width: 1300px;
} 
#Vera{
 margin-top: 50px;
 width: 1300px;
margin-bottom: 100px;
} 
}
  @media (max-width: 1400px) {
#reclam{
  width: 1100px;
}
#Zubr{
 margin-top: 50px;
 width: 1100px;
} 
#Zaha{
 margin-top: 50px;
 width: 1100px;
} 
#Lebed{
 margin-top: 50px;
 width: 1100px;
} 
#Demi{
 margin-top: 50px;
 width: 1100px;
} 
#Yaz{
 margin-top: 50px;
 width: 1100px;
} 
#Danil{
 margin-top: 50px;
 width: 1100px;
} 
#Nastya{
 margin-top: 50px;
 width: 1100px;
}
#Vera{
 margin-top: 50px;
 width: 1100px;
margin-bottom: 100px;
} 
}
  @media (max-width: 1200px) {
#reclam{
  width: 900px;
}
#Zubr{
 margin-top: 50px;
 width: 900px;
} 
#Zaha{
 margin-top: 50px;
 width: 900px;
} 
#Lebed{
 margin-top: 50px;
 width: 900px;
} 
#Demi{
 margin-top: 50px;
 width: 900px;
} 
#Yaz{
 margin-top: 50px;
 width: 900px;
} 
#Danil{
 margin-top: 50px;
 width: 900px;
} 
#Nastya{
 margin-top: 50px;
 width: 900px;
} 
#Vera{
 margin-top: 50px;
 width: 900px;
margin-bottom: 100px;
} 
}
@media (max-width: 950px) {
  #drago{
    width: 500px;
    margin-bottom: 100px;
  }
#reclam{
  width: 700px;
}
#Zubr{
 margin-top: 50px;
 width: 700px;
} 
#Zaha{
 margin-top: 50px;
 width: 700px;
} 
#Lebed{
 margin-top: 50px;
 width: 700px;
} 
#Demi{
 margin-top: 50px;
 width: 700px;
} 
#Yaz{
 margin-top: 50px;
 width: 700px;
} 
#Danil{
 margin-top: 50px;
 width: 700px;
} 
#Nastya{
 margin-top: 50px;
 width: 700px;
}
#Vera{
 margin-top: 50px;
 width: 700px;
margin-bottom: 100px;
} 
}
@media (max-width: 750px) {
#reclam{
  width: 600px;
}
#Zubr{
 margin-top: 50px;
 width: 600px;
} 
#Zaha{
 margin-top: 50px;
 width: 600px;
} 
#Lebed{
 margin-top: 50px;
 width: 600px;
} 
#Demi{
 margin-top: 50px;
 width: 600px;
} 
#Yaz{
 margin-top: 50px;
 width: 600px;
} 
#Danil{
 margin-top: 50px;
 width: 600px;
} 
#Nastya{
 margin-top: 50px;
 width: 600px;
} 
#Vera{
 margin-top: 50px;
 width: 600px;
margin-bottom: 100px;
} 

}
@media (max-width: 650px) {
  #drago{
    width: 400px;
    margin-bottom: 100px;
  }
#reclam{
  width: 500px;
}
#Zubr{
 margin-top: 50px;
 width: 500px;
} 
#Zaha{
 margin-top: 50px;
 width: 500px;
} 
#Lebed{
 margin-top: 50px;
 width: 500px;
} 
#Demi{
 margin-top: 50px;
 width: 500px;
} 
#Yaz{
 margin-top: 50px;
 width: 500px;
} 
#Danil{
 margin-top: 50px;
 width: 500px;
} 
#Nastya{
 margin-top: 50px;
 width: 500px;
}
#Vera{
 margin-top: 50px;
 width: 500px;
margin-bottom: 100px;
} 
}
@media (max-width: 550px) {
#reclam{
  width: 400px;
}
#Zubr{
 margin-top: 50px;
 width: 400px;
} 
#Zaha{
 margin-top: 50px;
 width: 400px;
} 
#Lebed{
 margin-top: 50px;
 width: 400px;
} 
#Demi{
 margin-top: 50px;
 width: 400px;
} 
#Yaz{
 margin-top: 50px;
 width: 400px;
} 
#Danil{
 margin-top: 50px;
 width: 400px;
} 
#Nastya{
 margin-top: 50px;
 width: 400px;
}
#Vera{
 margin-top: 50px;
 width: 400px;
margin-bottom: 100px;
} 
}
@media (max-width: 450px) {
  #drago{
    width: 350px;
    margin-bottom: 100px;
  }
#reclam{
  width: 320px;
}
#Zubr{
 margin-top: 30px;
 width: 350px;
} 
#Zaha{
 margin-top: 30px;
 width: 350px;
} 
#Lebed{
 margin-top: 30px;
 width: 350px;
} 
#Demi{
 margin-top: 30px;
 width: 350px;
} 
#Yaz{
 margin-top: 30px;
 width: 350px;
} 
#Danil{
 margin-top: 30px;
 width: 350px;
} 
#Nastya{
 margin-top: 30px;
 width: 350px;
} 
#Vera{
 margin-top: 30px;
 width: 350px;
margin-bottom: 100px;
} 
}
@media (max-width: 370px) {
  #drago{
    width: 270px;
    margin-bottom: 100px;
  }
#reclam{
  width: 300px;
}
#Zubr{
 margin-top: 30px;
 width: 300px;
} 
#Zaha{
 margin-top: 30px;
 width: 300px;
} 
#Lebed{
 margin-top: 30px;
 width: 300px;
} 
#Demi{
 margin-top: 30px;
 width: 300px;
} 
#Yaz{
 margin-top: 30px;
 width: 300px;
}
#Danil{
 margin-top: 30px;
 width: 300px;
} 
#Nastya{
 margin-top: 30px;
 width: 300px;
} 
#Vera{
 margin-top: 30px;
 width: 300px;
margin-bottom: 100px;
} 
}
@media (max-width: 310px) {
  #drago{
    width: 250px;
    margin-bottom: 100px;
  }
#reclam{
  width: 250px;
}
#Zubr{
 margin-top: 30px;
 width: 250px;
} 
#Zaha{
 margin-top: 30px;
 width: 250px;
} 
#Lebed{
 margin-top: 30px;
 width: 250px;
} 
#Demi{
 margin-top: 30px;
 width: 250px;
} 
#Yaz{
 margin-top: 30px;
 width: 250px;
}
#Danil{
 margin-top: 30px;
 width: 250px;
} 
#Nastya{
 margin-top: 30px;
 width: 250px;
}
#Vera{
 margin-top: 30px;
 width: 250px;
margin-bottom: 100px;
} 
}
  @media (max-width: 1400px) { 

#teleg img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#vk img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#social{
  font-family: 'Montserrat', sans-serif;
	position: relative;
	text-align: center;
	top: 10px;
	color: #db7380;
}
#tel{
  font-family: 'Montserrat', sans-serif;
	top: 10px;
	text-align: center;
  font-size: 40px;
	text-decoration: none;
  color: #db7380;
}
#mail{
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 40px;
  text-align: center;
  color: #db7380;
}
.card{
  margin-top: 20px;
}
}


@media (max-width: 800px) { 
#teleg img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#vk img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#social{
  font-family: 'Montserrat', sans-serif;
	position: relative;
	text-align: center;
	top: 10px;
	color: #db7380;
  font-size: 30px;
}
#tel{
  font-family: 'Montserrat', sans-serif;
	top: 10px;
	text-align: center;
  font-size: 30px;
	text-decoration: none;
  color: #db7380;
}
#mail{
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 30px;
  text-align: center;
  color: #db7380;
}
.card{
  margin-top: 20px;
}
}
@media (max-width: 610px) { 
#teleg img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#vk img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#social{
  font-family: 'Montserrat', sans-serif;
	position: relative;
	text-align: center;
	top: 10px;
	color: #db7380;
  font-size: 20px;
}
#tel{
  font-family: 'Montserrat', sans-serif;
	top: 10px;
	text-align: center;
  font-size: 20px;
	text-decoration: none;
  color: #db7380;
}
#mail{
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  color: #db7380;
}
.card{
  margin-top: 20px;
 
}
iframe{
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    width: 100%;
    height: 360px;
}
}
@media (max-width: 410px) { 
#teleg img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#vk img{
    position: relative;
    width: 20%;
    margin: 0 auto;
}
#social{
  font-family: 'Montserrat', sans-serif;
	position: relative;
	text-align: center;
	top: 10px;
	color: #db7380;
  font-size: 15px;
}
#tel{
  font-family: 'Montserrat', sans-serif;
	top: 10px;
	text-align: center;
  font-size: 15px;
	text-decoration: none;
  color: #db7380;
}
#mail{
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  color: #db7380;
}
.card{
  margin-top: 20px;
 
}
iframe{
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    width: 100%;
    height: 360px;
}
}
#vsezan{
margin-top: 100px;
}
#scholny{
margin-top: 100px;
}
#doshcolnu{
margin-top: 100px;
}
#malishi{
margin-top: 100px;
}
#driving{
margin-top: 150px; 
max-width: 1400px;
}

#vern{
margin-top: 150px; 
max-width: 1400px;
}

#minigarden{
  margin-top: 150px; 
max-width: 1400px;
}

#together{
  margin-top: 150px; 
max-width: 1400px;
}

#mental{
margin-top: 150px; 
max-width: 1400px;  
}

#skoroch{
margin-top: 150px; 
max-width: 1400px;  
}

#logoped{
margin-top: 150px; 
max-width: 1400px;  
}

#robot{
margin-top: 150px; 
max-width: 1400px;  
}


#vsezan{
max-width: 70%;
}
#scholny{
max-width: 70%;
}
#doshcolnu{
max-width: 70%;
}
#malishi{
max-width: 70%;
} 

  @media (max-width: 1600px) {
#vsezan{
margin-top: 100px;
}
#scholny{
margin-top: 100px;
}
#doshcolnu{
margin-top: 100px;
}
#malishi{
margin-top: 100px;
}
#driving{
margin-top: 150px; 
max-width: 1200px;
}

#vern{
margin-top: 150px; 
max-width: 1200px;
}

#minigarden{
  margin-top: 150px; 
max-width: 1200px;
}

#together{
  margin-top: 150px; 
max-width: 1200px;
}

#mental{
margin-top: 150px; 
max-width: 1200px;  
}

#skoroch{
margin-top: 150px; 
max-width: 1200px;  
}

#logoped{
margin-top: 150px; 
max-width: 1200px;  
}

#robot{
margin-top: 150px; 
max-width: 1200px;  
}

}
  @media (max-width: 1400px) {
 
#driving{
margin-top: 150px; 
max-width: 1000px;
}

#vern{
margin-top: 150px; 
max-width: 1000px;
}

#minigarden{
  margin-top: 150px; 
max-width: 1000px;
}

#together{
  margin-top: 150px; 
max-width: 1000px;
}

#mental{
margin-top: 150px; 
max-width: 1000px;  
}

#skoroch{
margin-top: 150px; 
max-width: 1000px;  
}

#logoped{
margin-top: 150px; 
max-width: 1000px;  
}

#robot{
margin-top: 150px; 
max-width: 1000px;  
}
}
  @media (max-width: 1200px) {
 
#driving{
margin-top: 150px; 
max-width: 850px;
}

#vern{
margin-top: 150px; 
max-width: 850px;
}

#minigarden{
  margin-top: 150px; 
max-width: 850px;
}

#together{
  margin-top: 150px; 
max-width: 850px;
}

#mental{
margin-top: 150px; 
max-width: 850px;  
}

#skoroch{
margin-top: 150px; 
max-width: 850px;  
}

#logoped{
margin-top: 150px; 
max-width: 850px;  
}

#robot{
margin-top: 150px; 
max-width: 850px;  
}
}
@media (max-width: 950px) {
#driving{
margin-top: 150px; 
max-width: 700px;
}

#vern{
margin-top: 150px; 
max-width: 700px;
}

#minigarden{
  margin-top: 150px; 
max-width: 700px;
}

#together{
  margin-top: 150px; 
max-width: 700px;
}

#mental{
margin-top: 150px; 
max-width: 700px;  
}

#skoroch{
margin-top: 150px; 
max-width: 700px;  
}

#logoped{
margin-top: 150px; 
max-width: 700px;  
}

#robot{
margin-top: 150px; 
max-width: 700px;  
} 
}
@media (max-width: 750px) {
  #vsezan{
margin-top: 50px;
}
#scholny{
margin-top: 50px;
}
#doshcolnu{
margin-top: 50px;
}
#malishi{
margin-top: 50px;
}
#driving{
margin-top: 100px; 
max-width: 550px;
}

#vern{
margin-top: 100px; 
max-width: 550px;
}

#minigarden{
  margin-top: 100px; 
max-width: 550px;
}

#together{
  margin-top: 100px; 
max-width: 550px;
}

#mental{
margin-top: 100px; 
max-width: 550px;  
}

#skoroch{
margin-top: 100px; 
max-width: 550px;  
}

#logoped{
margin-top: 100px; 
max-width: 550px;  
}

#robot{
margin-top: 100px; 
max-width: 550px;  
} 
}
@media (max-width: 650px) {

#driving{
margin-top: 50px; 
max-width: 400px;
}

#vern{
margin-top: 50px; 
max-width: 400px;
}

#minigarden{
  margin-top: 50px; 
max-width: 400px;
}

#together{
  margin-top: 50px; 
max-width: 400px;
}

#mental{
margin-top: 50px; 
max-width: 400px;  
}

#skoroch{
margin-top: 50px; 
max-width: 400px;  
}

#logoped{
margin-top: 50px; 
max-width: 400px;  
}

#robot{
margin-top: 50px; 
max-width: 400px;  
}
}
@media (max-width: 450px) {
 
#driving{
margin-top: 50px; 
max-width: 300px;
}

#vern{
margin-top: 50px; 
max-width: 300px;
}

#minigarden{
  margin-top: 50px; 
max-width: 300px;
}

#together{
  margin-top: 50px; 
max-width: 300px;
}

#mental{
margin-top: 50px; 
max-width: 300px;  
}

#skoroch{
margin-top: 50px; 
max-width: 300px;  
}

#logoped{
margin-top: 50px; 
max-width: 300px;  
}

#robot{
margin-top: 50px; 
max-width: 300px;  
}


}
#video1{
  max-width: 70%;
  width: 1400px;
  margin-top: 50px;
  margin-bottom: 50px;
}
@media (max-width: 450px) {
#video1{
  margin-bottom: 25px;
  margin-top: 25px;
}
}