@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

html, body {height: 100%; margin: 0; padding: 0; font-family: 'Inter', sans-serif; scroll-behavior: smooth; font-size: 18px;}
* html .page-wrapper {height: 100%;}
.page-wrapper {margin-bottom: -50px; min-height: 100%; position: absolute; width: 100%;}
.content {width: 100%; background: white;}	

h1, h2, h3, h4, h5, h6 {font-family: 'Inter', sans-serif; font-size: 72px; color: white; text-align: center; text-shadow: 0px 0px 8px black; margin-bottom: 24px; text-transform: uppercase;}
h2, h3, h4, h5, h6 {font-size: 32px; color: black; text-shadow: none; margin-left: 0px; padding-top: 32px;}
h3, h4, h5, h6 {font-size: 20px;}

.navi {width: 100%; float: left; height: 90px; position: absolute; background: rgba(37,69,50, 0.5); left: 0px; top: 0px;}
.navi .logotype {margin-top: 8px; text-decoration: none; float: left;}
.navi .phb {float: right; padding-left: 50px; padding-top: 4px; padding-bottom: 8px; color: white; background: url(/img/icon/phone.png) no-repeat 3px 4px, url(/img/icon/mail.png) no-repeat 4px 60px; width: 400px;}
.navi .phb p {padding: 0px; margin: 0px; margin-bottom: 8px;}
.navi .phb span {width: 222px; float: left;}
.navi .phb a {text-decoration: none; cursor: default; color: white;}


#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover; background-position: center center;}
#prel h1 {padding-top: 32vh; width: 100%; font-size: 52px;}

#about {width: 100%; padding-bottom: 32px; float: left;}
#about .imgbox {background: url(/img/imgbox.jpg); float: left;}
#about .textcont {float: right;}
#urdoc {width: 100%; float: left; background: #254532; padding-bottom: 32px; color: white;}
#urdoc h2 {color: white;}
.docmi {width: 348px; margin: 0 auto;}
.docli {width: 100px; height: 60px; padding-top: 152px; background: url(/img/icon/doc.jpg); background-repeat: no-repeat; float: left; border-bottom: 0px; margin-left: 8px; margin-right: 8px; margin-bottom: 16px; text-align: center; font-size: 12px; font-size: 14px; color: white; text-decoration: none;}

#uslid {width: 100%; float: left; background: white; padding-bottom: 32px;}
#uslid .imgbox {background: url(/img/uslugi.jpg); float: right;}
#uslid .textcont {float: left;}
#uslid li {font-size: 18px;}

#photogal {width: 100%; float: left; background: #254532; padding-bottom: 32px; color: white;}
#photogal h2 {color: white;}
.photogal img {cursor: pointer; float: left; border: solid 1px white; margin-left: 8px; margin-right: 8px; margin-top: 8px; margin-bottom: 16px;}

.page-buffer {height: 468px; width: 100%; float:left;}
.page-futter {height: 448px; background: #254532; bottom: 0px; position: absolute; width: 100%; padding-top: 24px;}
.page-futter h2 {color: white;}

.futmap {float: left; border: solid 2px white; margin-right: 24px;}
.futcont {float: right; width: 884px; background: url(/img/logo.png); background-repeat: no-repeat; background-size: 149px 105px; background-position: 0px 104px; color: white;}
.futcont h2 {padding-bottom: 124px;}
.futcont a {text-decoration: none; color: white; cursor: default;}

#popshow {width: 100vw; height: 100vh; background: rgba(0,0,0, 0.6); position: fixed; display: none; top: 0px; left: 0px;}
#popcont {width: 90vw; height: 90vh; background: black; background-position: 50% 50%; position: absolute; top: 4vh; left: 4vw; padding: 1vh 1vw; text-align: center;}
#closp {color: white; font-weight: bold; cursor: pointer; position: absolute; margin-left: 91vw; margin-top: -3vh; font-size: 28px; z-index: 5;}
#bigpic {max-width: 100%; max-height: 100%;}

@media all and (max-width: 479px)
{
html, body {font-size: 14px;}
.centro {width: 356px; margin: 0 auto;}
#prel h1 {padding-top: 50vh; width: 100%; font-size: 24px;}

h2, h3, h4, h5, h6 {font-size: 18px; color: black; text-shadow: none; margin-left: 0px; padding-top: 18px;}
h3, h4, h5, h6 {font-size: 18px;}
#prel h1 span {width: 100%; float: left;}

.navi {background: none;}
.navi .logotype {margin-left: 112px;}
.imgbox {width: 300px; height: 300px; clip-path: polygon(20px 0px, 300px 0px, 280px 300px, 0px 300px);}
.textcont {width: 438; padding: 8px;}

#about .imgbox, #uslid .imgbox {background-size: cover;}
#about .imgbox {margin-left: 22px;}
#uslid .imgbox {margin-right: 22px;}

.navi .logotype img {height: 110px; margin-top: 28px;}
.navi {background: none;}
.navi .phb {width: 230px; float: left; font-size: 16px; background: url(/img/icon/phone.png) no-repeat 3px 4px, url(/img/icon/mail.png) no-repeat 4px 118px; margin-left: 60px; margin-top: 20px;}
.navi .phb span {width: 230px; float: left; font-weight: bold;}
.navi .phb a {margin-bottom: 14px; float: left; margin-top: 4px;}


#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover; min-height: 620px;}
#prel h1 {padding-top: 62vh;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 160px;}
.futmap {width: 352px; height: 300px; margin-right: 0px;}
.futcont {width: 350px; background-position: 0px 76px;}
.page-futter {height: 652px;}
.page-buffer {height: 672px;}
}
@media all and (min-width: 480px) and (max-width: 639px)
{
html, body {font-size: 14px;}
.centro {width: 476px; margin: 0 auto;}
#prel h1 {padding-top: 62vh; width: 100%; font-size: 24px;}

h2, h3, h4, h5, h6 {font-size: 18px; color: black; text-shadow: none; margin-left: 0px; padding-top: 18px;}
h3, h4, h5, h6 {font-size: 18px;}
#prel h1 span {width: 100%; float: left;}

.imgbox {width: 300px; height: 300px; clip-path: polygon(20px 0px, 300px 0px, 280px 300px, 0px 300px);}
.textcont {width: 438; padding: 8px;}

#about .imgbox, #uslid .imgbox {background-size: cover;}
#about .imgbox {margin-left: 76px;}
#uslid .imgbox {margin-right: 76px;}

.navi .logotype img {height: 110px; margin-top: 28px;}
.navi {background: none;}
.navi .phb {width: 230px; float: left; font-size: 16px; background: url(/img/icon/phone.png) no-repeat 3px 4px, url(/img/icon/mail.png) no-repeat 4px 118px;   margin-top: 16px; margin-left: 16px;}
.navi .phb span {width: 230px; float: left; font-weight: bold;}
.navi .phb a {margin-bottom: 14px; float: left; margin-top: 4px;}


#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover; min-height: 400px;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 220px;}
.futmap {width: 472px; height: 300px; margin-right: 0px;}
.futcont {width: 486px; background-position: 0px 76px;}
.page-futter {height: 652px;}
.page-buffer {height: 672px;}
}
@media all and (min-width: 640px) and (max-width: 1023px)
{
html, body {font-size: 14px;}
.centro {width: 636px; margin: 0 auto;}

h2, h3, h4, h5, h6 {font-size: 18px; color: black; text-shadow: none; margin-left: 0px; padding-top: 18px;}
h3, h4, h5, h6 {font-size: 18px;}
#prel h1 span {width: 100%; float: left;}

.navi .phb span {width: 160px;}

.imgbox {width: 300px; height: 300px; clip-path: polygon(20px 0px, 300px 0px, 280px 300px, 0px 300px);}
.textcont {width: 668px; padding: 16px;}

.navi .phb p {margin-bottom: 20px; float: left;}

#about .imgbox, #uslid .imgbox {background-size: cover;}
#about .imgbox {margin-left: 168px;}
#uslid .imgbox {margin-right: 168px;}

.navi .logotype img {height: 110px;}
.navi .phb {padding-left: 50px; padding-top: 12px; padding-bottom: 14px;}
.navi .phb a {width: 176px; float:left;}

#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover; min-height: 600px;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 300px;}
.futmap {width: 600px; height: 300px; margin-right: 0px;}
.futcont {width: 624px; background-position: 0px 76px;}
.page-futter {height: 632px;}
.page-buffer {height: 652px;}
}
@media all and (min-width: 1024px) and (max-width: 1199px)
{
html, body {font-size: 14px;}
.centro {width: 1000px; margin: 0 auto;}

h2, h3, h4, h5, h6 {font-size: 18px; color: black; text-shadow: none; margin-left: 0px; padding-top: 18px;}
h3, h4, h5, h6 {font-size: 18px;}
h1 {font-size: 42px;}
.navi .phb {padding-top: 14px; padding-bottom: 6px;}
.navi .phb a {width: 176px; float: left;}
.navi .phb p {float: left; margin-bottom: 12px;}
#prel h1 span:nth-child(1) {width: 100%; float: left;}

.imgbox {width: 300px; height: 300px; clip-path: polygon(20px 0px, 300px 0px, 280px 300px, 0px 300px);}
.textcont {width: 668px; padding: 16px;}

#about .imgbox, #uslid .imgbox {background-size: cover;}

.navi .logotype img {height: 110px;}


#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 232px;}
.futmap {width: 300px; height: 428px;}
.futcont {width: 672px; background-position: 0px 76px;}
}
@media all and (min-width: 1200px) and (max-width: 1511px)
{
.centro {width: 1200px; margin: 0 auto;}
h2 {font-size: 24px; padding-top: 18px;}

.imgbox {width: 300px; height: 300px; clip-path: polygon(20px 0px, 300px 0px, 280px 300px, 0px 300px);}
.textcont {width: 800px; padding: 16px;}

#about .imgbox, #uslid .imgbox {background-size: cover;}

.navi .logotype img {height: 110px;}
.navi .phone {padding-left: 50px; background: url(/img/icon/phone.png); background-repeat: no-repeat; float: right; font-size: 25px; padding-top: 4px; padding-bottom: 26px; color: white; text-decoration: none; margin-top: 18px;}
.navi .mal {margin-left: 408px;}

#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover;}
#prel h1 span:nth-child(1) {width: 100%; float: left;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 282px;}
.futmap {width: 300px; height: 428px;}
.futcont {width: 872px; background-position: 0px 98px;}

}
@media only screen and (min-width : 1512px) and (max-width : 1919px)
{
.centro {width: 1512px; margin: 0 auto;}

.imgbox {width: 600px; height: 600px; clip-path: polygon(40px 0px, 600px 0px, 560px 600px, 0px 600px);}
.textcont {width: 870px; padding: 16px;}

.navi .logotype img {height: 150px;}
.navi .phone {padding-left: 50px; background: url(/img/icon/phone.png); background-repeat: no-repeat; float: right; font-size: 25px; padding-top: 4px; padding-bottom: 26px; color: white; text-decoration: none; margin-top: 18px;}
.navi .mal {margin-left: 574px;}
#prel h1 span:nth-child(1) {width: 100%; float: left;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 359px;}
.futmap {width: 600px; height: 428px;}
}
@media only screen and (min-width : 1920px) 
{
.centro {width: 1900px; margin: 0 auto;}

.imgbox {width: 600px; height: 600px; clip-path: polygon(40px 0px, 600px 0px, 560px 600px, 0px 600px);}
.textcont {width: 1268px; padding: 16px;}

.navi .logotype img {height: 150px;}
.navi .phone {padding-left: 50px; background: url(/img/icon/phone.png); background-repeat: no-repeat; float: right; font-size: 25px; padding-top: 4px; padding-bottom: 26px; color: white; text-decoration: none; margin-top: 18px;}
.navi .mal {margin-left: 766px;}

#prel {width: 100vw; height: 100vh; background: url(/img/prelbg.jpg); margin-top: -60px; background-repeat: no-repeat; background-size: cover;}
#prel h1 span:nth-child(1) {width: 100%; float: left;}
#prel a {text-decoration: none; color: white; width: 80px; height: 20px; background: url("/img/strelka.png"); position: absolute;
top: 87vh; left: 50%; margin-left: -40px;}
.photogal img {width: 219px;}
.futmap {width: 600px; height: 428px;}
.futcont {width: 1272px;}
}