@charset "utf-8";
/* CSS Document */

@font-face {font-family: 'montserrat'; src: url('/font/montserrat.ttf') format('truetype-variations'), url('/font/montserrat.ttf') format('truetype');
}

:root
{
--bs1:#ffffd0;
--bgnd:linear-gradient(60deg, #330000, #000044);
--bk:#000044;
--gr:#505050;
--lt:#808080;
--font:#e0e0e0;
--wt:#ffffff;
}


* {outline:none;}
body {margin:0px; font-size:18px; line-height:1.4; font-family:"montserrat", Arial, sans-serif; background:var(--bgnd); color:var(--font);}
.all {background:url(/pic/body-bg.png) center center no-repeat; background-attachment: fixed;}
.wrap {width:1200px; margin:auto; position:relative;}
section {width:100%; padding:0px 0px 80px;}
footer {padding:60px 0px; background:url(/pic/panther.png) left center no-repeat; background-size:auto 100%; color: var(--lt); text-align: center;}
h1 {font-size:36px; color:var(--wt); margin:0px 0px 40px; padding: 40px 0px 20px; font-weight:600; text-align: center; border-bottom: 1px solid var(--bs1); border-radius: 100px;}
h2 {font-size:30px; color:var(--wt); margin:0px 0px 40px; font-weight:500;}
h3,h4 {font-size:20px; color:var(--font); margin:0px; font-weight:500;}
h5 {font-family:Lora, Arial, sans-serif; margin:0px 0px 0px 0px; font-size:18px; color:var(--bs1); margin:0px; line-height:22px; font-weight:500;}
p {margin:0px 0px 16px;}
img {max-width:100%;}
section a {color:var(--wt); cursor:pointer;}
section a:hover {color:var(--bs1);}
input, textarea, select, option {font-size:inherit; font-family:inherit; outline:none;}
label {display:block;}
label input, label textarea, label select {padding:4px 12px; width:calc(100% - 26px); border:1px solid var(--bs2); border-radius:6px;}
label select {width:100%;}
label span {display:block; margin:0px; font-size:80%;}
footer a {color:var(--wt);}

.top-panel {display: flex; justify-content: space-between; align-items: flex-start;}
nav {padding: 32px 0px; width: 720px;}
nav ul {list-style:none; margin:0px; padding:0px;}
nav > ul {display:flex; justify-content:space-between; align-items: center;}
nav > ul a {text-decoration: none; color: var(--wt); font-weight: 500;}
nav > ul a:hover {color: var(--bs1);}
.logo {width: 160px; padding: 20px 0px; margin: 0px 80px 0px 0px;}
.top-phone {display: block; position: absolute; top: 120px; right: 0px;}
.top-phone a {text-decoration: none; color: var(--lt);}
.top-phone a:hover {color: var(--bs1);}

.main-dual {display: flex; width: 100%; justify-content: flex-start; align-items: flex-start;}
.md-image {width: 320px; height: 320px; margin: 0px 80px 0px 0px;}
.md-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 240px;}
.md-content {width: calc(100% - 400px);}

.blocks-unit {display: flex; width: calc(100% - 102px); height: 240px; padding: 20px 80px 20px 20px; margin-bottom: 40px; justify-content: flex-start; align-items: flex-start; border: 1px solid var(--bs1); border-radius: 200px; text-decoration: none;}
.blocks-unit .bu-image {width: 240px; height: 240px; margin: 0px 60px 0px 0px;}
.bu-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 200px;}
.bu-body {width: calc(100% - 260px);}

.bu-h1 {margin: 0px 0px 20px; color: var(--wt); font-size: 24px; font-weight: 500;}
a:hover .bu-h1 {color:var(--bs1);}
a:hover .bu-content {color: var(--font);}
.bu-button {display: inline-block; padding: 12px 24px; margin: 24px 0px 0px; font-size: 16px; font-weight: 600; line-height: 16px; color: var(--bk); background: var(--wt); border-radius: 50px;}
.bu-button:hover {background-color: var(--bs1);}

.walls-box {display: grid; gap:40px; align-items: flex-start; grid-template-columns: 1fr 1fr 1fr 1fr;}
.walls-unit {border: 1px solid var(--bs1); border-radius: 12px; text-decoration: none;}
.wu-image {width: 100%; height: 268px;}
.wu-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0px 0px;}
.wu-h1 {padding: 10px; font-weight: 500; font-size: 16px; text-align: center;}

.main-image {width: 100%; height: 60vh; margin-bottom: 40px;}
.main-image img {width: 100%; height: 100%;  object-fit: contain; border-radius: 20px;}
.main-image.little {width: 480px; height: 480px;}

.images-box {display: grid; gap:40px; align-items: flex-start; grid-template-columns: 1fr 1fr 1fr 1fr;}
.iu-image {width: 100%; height: 268px;}
.iu-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 6px;}
.iu-subscribe {padding: 10px; font-weight: 500; font-size: 16px;}

.lifes-unit  {display: flex; width: 100%; justify-content: flex-start; align-items: flex-start; padding: 32px 0px; border-bottom: 1px solid var(--gr);}
.lu-image {width: 120px; height: 120px; margin: 0px 60px 0px 0px; }
.lu-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 200px;}
.lu-h1 {margin: 0px 0px 20px; color: var(--wt); font-size: 20px; font-weight: 500;}
.lu-body {width: calc(100% - 180px);}



/* adaptive */



@media (max-width:680px)
{
body {line-height:1.3; font-size:16px;}
section {margin:20px auto;}
}


@media (max-width:370px)
{
body {line-height:1.3; font-size:14px;}
.wrap {width:calc(100% - 20px);}
}