@font-face{
font-family:inter;
src:url(/fonts/Inter-Regular.woff2) format('woff2'),url(/fonts/Inter-Regular.woff) format('woff');
font-weight:400;
font-style:normal;
}
@font-face{
font-family:inter;
src:url(/fonts/Inter-Medium.woff2) format('woff2'),url(/fonts/Inter-Medium.woff) format('woff');
font-weight:500;
font-style:normal;
}
@font-face{
font-family:inter;
src:url(/fonts/Inter-Bold.woff2) format('woff2'),url(/fonts/Inter-Bold.woff) format('woff');
font-weight:700;
font-style:normal;
}
html{
scroll-behavior:smooth;
margin:0;
padding:0;
}
body{
font-family:inter;
font-style:normal;
font-weight:400;
color:#303030;
background-color:#f7f7f7;
margin:0;
padding:0;
font-size:18px;
line-height:1.7em;
box-sizing:border-box;
position:relative;
}
.clear{
clear:both;
}
.content{
width:1260px;
max-width:100%;
padding:50px 0;
margin:0 auto;
}
h1{
font-size:55px;
text-align:center;
color:#fff;
font-weight:700;
text-shadow:2px 2px 7px #000;
text-transform:uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
h1 span{
border-radius:8px;
background-color:rgba(0,0,0,0.2);
padding:3px 10px;
}
.podzagolovok{
font-size:30px;
text-align:center;
color:#fff;
font-weight:500;
text-shadow:1px 1px 4px #000;
text-transform:uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
.podzagolovok span{
border-radius:5px;
background-color:rgba(0,0,0,0.2);
padding:3px 10px;
}
#shapka{
background:url(/img/fon_osnovnoj.jpg) center center no-repeat;
background-size:cover;
}
#shapka .content{
padding:300px 0 300px 0;
position:relative;
}
#logo{
position:absolute;
left:10px;
top:20px;
width:150px;
height:64px;
}
#logo:hover{
background:url(/img/logo_fon.png) 0 0 no-repeat;
}
#logo img{
display:block;
width:150px;
height:64px;
margin:0;
position:absolute;
left:0;
top:0;
}
#logo img.img2{
opacity:0;
}
#logo img.img2:hover{
opacity:1;
}
.center{
text-align:center;
}
h2{
font-size:30px;
color:#111;
line-height: 1.5em;
}
h3{
font-size:20px;
color:#111;
line-height: 1.5em;
}
.cards{
padding:20px 0;
display: flex;
flex-wrap: wrap;
}
.cards .card{
padding: 40px 25px 60px 25px;
box-shadow: 0 3px 10px rgba(48,48,48,.1);
border-radius: 20px;
transition: .3s all;
min-height:400px;
margin: 8px;
width: calc(100%/3 - 16px);
box-sizing: border-box;
position:relative;
//background:#fff url(/img/kot_pov.png) -96px -76px no-repeat;
background:#fff url(/img/kot_pov2.png) -76px calc(100% + 96px) no-repeat;
transition: 0.5s all;
}
.cards .card:hover{
//background:#fff url(/img/kot_pov.png) -23px 0px no-repeat;
background:#fff url(/img/kot_pov2.png) -5px calc(100% + 28px) no-repeat;
}
.cards .card .title{
font-size: 23px;
font-weight:700;
margin-bottom:15px;
text-transform:uppercase;
color:#111;
}
.knopki{
position:absolute;
bottom:30px;
left:0;
width:100%;
height:30px;
text-align:center;
}
.knopki a{
display:inline-block;
text-transform:uppercase;
font-size:14px;
font-weight:500;
padding:8px 15px;
border-radius:16px;
line-height:16px;
height:16px;
margin:0 10px;
text-decoration:none;
}
.knopki a.podrobnee{
color:#777;
background-color:#f1f1f1;
}
.knopki a.podrobnee:hover{
color:#222;
background-color:#ddd;
cursor:pointer;
}
.knopki a.zakazat{
color:#005aaa;
background-color:#c7e0f7;
}
.knopki a.zakazat:hover{
color:#fff;
background-color:#005aaa;
cursor: pointer;
}
.image1{
padding:50px 0;
margin:30px 0;
background:url(/img/fon1.jpg) center center no-repeat;
background-size:cover;
background-attachment:fixed;
}
.image1 p{
font-size:35px;
color:#fff;
text-shadow:1px 1px 3px #000;
line-height:1.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.image1 p span{
border-radius: 5px;
background-color: rgba(0,0,0,0.2);
padding: 3px 10px;
}
.btn{
text-transform:uppercase;
padding:12px 23px;
display:inline-block;
height:1em;
line-height:1em;
text-decoration:none;
font-size:16px;
color:#fff;
background-color: #005aaa;
border-radius:5px;
border:2px solid #005aaa;
}
.btn:hover{
border:2px solid #00386a;
}
.podrobno{
padding:15px 20px 30px 20px;
background-color:#fff;
margin:15px;
box-shadow: 0 3px 10px rgba(48,48,48,.1);
border-radius: 10px;
position:relative;
}
.podrobno .title{
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #111;
}
.podrobno .zakazat{
color: #005aaa;
background-color: #c7e0f7;
display:block;
text-transform:uppercase;
font-size:15px;
font-weight:500;
padding:8px 15px;
border-radius:16px;
line-height:16px;
height:16px;
text-decoration:none;
width:100px;
text-align:center;
position:absolute;
right:20px;
bottom:15px;
}
.podrobno .zakazat:hover{
color: #fff;
background-color: #005aaa;
cursor: pointer;
}
.kot-help{
position:fixed;
right:0;
bottom:-262px;
width:200px;
height:262px;
background:url(/img/kot_help.png) left bottom no-repeat;
transition:all 1s;
}
.kot-help .slovo1{
display:block;
opacity:0;
transition:all 0.5s ease 1.5s;
position:absolute;
left:0;
top:0;
}
.kot-help .slovo2{
display:block;
opacity:0;
transition:all 0.3s ease 5.5s;
position:absolute;
left:0;
top:0;
}

.active-help{
bottom:0;
}
.active-help .slovo1, .active-help .slovo2{
opacity:1;
}
#zayavka form{
width:450px;
max-width:100%;
display:block;
margin:0 auto;
}
#zayavka form input[type=text]{
display:block;
height:33px;
padding:3px 5px;
border:1px solid #bbb;
background-color:#fff;
border-radius:5px;
width:calc(100% - 20px);
margin-bottom:20px;
font-size:18px;
}
#zayavka form select{
display:block;
height:40px;
border:1px solid #bbb;
background-color:#fff;
border-radius:5px;
width:calc(100% - 10px);
margin-bottom:20px;
font-size:18px;
}
#zayavka form input[type=submit]{
height:auto;
cursor:pointer;
}
#footer{
padding:30px 0;
background:linear-gradient(to right, #215689, #133d65);
border-top:2px solid #113a61;
}
#footer .content{
padding:0;
}
#footer .content #sled{
width:calc(100% - 200px);
float:left;
height:100px;
position:relative;
}
#sled1{
position:absolute;
left:10px;
top:50px;
display:none;
width:25px;
}
#sled2{
position:absolute;
left:150px;
top:20px;
display:none;
width:25px;
}
#sled3{
position:absolute;
left:290px;
top:50px;
display:none;
width:25px;
}
#sled4{
position:absolute;
left:430px;
top:20px;
display:none;
width:25px;
}
#sled5{
position:absolute;
left:570px;
top:50px;
display:none;
width:25px;
}
#sled6{
position:absolute;
left:710px;
top:20px;
display:none;
width:25px;
}
#sled7{
position:absolute;
left:850px;
top:50px;
display:none;
width:25px;
}
#korm{
position:absolute;
right:10px;
top:20px;
}
#footer .content .links{
width:200px;
float:left;
padding-top:30px;
}
#shapka .links{
position:absolute;
top:37px;
right:5px;
text-align:right;
}
#shapka .links img{
display:inline-block;
margin-left:10px;
height:40px;
}
#footer .links{
text-align:right;
}
#footer .links img{
display:inline-block;
margin:0 0 0 10px;
height:40px;
}



@media screen and (max-width:980px){

.cards .card{
width: calc(100%/2 - 16px);
}
.kot-help{
display:none;
}
#footer #sled{
display:none !important;
}
#footer .content .links{
width:100%;
text-align:center;
padding-top:0;
}
#footer .content .links img{
margin:0 5px;
}

}


@media screen and (max-width:480px){

.cards .card{
width: calc(100% - 16px);
}
h1{
font-size:35px;
}
.image1 p{
font-size:25px;
}
#shapka .content{
padding:200px 0;
}
#footer #sled{
display:none !important;
}
#footer .content .links{
width:100%;
text-align:center;
padding-top:0;
}
#footer .content .links img{
margin:0 5px;
}

}