@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/*------------------------------------------------------------*
**  Главная
**------------------------------------------------------------*/

/* CSS Document */


body {
font-size: 16px;
line-height:normal;
color:#323437;
margin:0px;
background: #E5E5E5;
font-family: 'Roboto', sans-serif;
}

a {
text-decoration:underline;
color:#323437;
}

a:hover {
text-decoration:none;
color:#323437;
}

.clear {
clear:both;
}

p, img {
margin:0px;
padding:0px;
border:0px;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
line-height: normal;
font-weight:normal;
font-weight:500;
line-height: 130%;
color: #0B3B65;
position:relative;
margin:10px 0px;
}

h1, .h1 { 
font-size: 30px;
line-height: 140%;
}

h2 {
font-weight: 600;
font-size: 20px;
line-height: 130%;
color: #0B3B65;
}

h3, .h3 { font-size: 25px;}
h4, .h4 { font-size: 22px;}
h5, .h5 { font-size: 16px;}

* {
box-sizing: border-box;
}

table {
border-spacing: 0px;
}

header, 
nav, 
section, 
article, 
aside, 
footer {
  display: block
}

input, button, textarea, select {
outline:none;
resize:none;
font-family: 'Roboto', sans-serif;
font-size:16px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

img {
max-width:100%;
height:40px;
}

.site-width {
width:100%;
max-width:1280px;
position:relative;
margin:0 auto;
padding:0 10px;
}

.header {
background:#fff;
}

.header .site-width {
position:relative;
height:300px;
display:flex;
align-items:center;
}

.header .site-width:before {
content:"";
width:586px;
height:281px;
background:url(../images/header-img.png) no-repeat;
position:absolute;
bottom:0px;
right:0px;
}

.header .logo {

}

.header .logo a {
display:table;
text-decoration:none;
}

.header .logo span {
display:block;
margin:49px 0 0 0;
font-weight: bold;
font-size: 48px;
line-height: 56px;
color: #0F0F0F;
}

.wrapper {
padding:100px 0 50px 0;
}

.wrapper .site-width {
display:flex;
flex-wrap:wrap;
}

.wrapper .item {
width:23.125%;
margin:0 2.5% 30px 0;
background: #FFFFFF;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding:20px;
}

.wrapper .item:nth-child(4n) {
margin:0 0 30px 0;
}

.wrapper .item:nth-of-type(n+9) {
display:none;
}

.wrapper .item .images {
margin:0 0 20px 0;
text-align:center;
}

.wrapper .item .field {
font-size: 16px;
line-height: 19px;
color: #828282;
margin:0 0 15px 0;
}

.wrapper .item .field span {
display:block;
margin:5px 0 0 0;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #000000;
}

.wrapper .item a {
text-decoration:none;
display:block;
margin:20px -10px 0 -10px;
background: #783294;
border-radius: 5px;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #FFFFFF;
padding:20px 1px;
}

.wrapper .item a:hover {
background: #4C2E88;
}

.btn-all {
cursor:pointer;
display:block;
margin:10px 0 0 0;
border: 1px solid #783294;
box-sizing: border-box;
border-radius: 5px;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #783294;
padding:20px;
width:100%;
text-align:center;
}

.footer {
padding:50px 0;
background:#fff;
font-size: 16px;
line-height: 19px;
color: #828282;
}

.footer p {
margin:0 0 20px 0;
}

.copyright {
margin:30px 0 0 0;
font-size: 14px;
line-height: 130%;
color: #E0E0E0;
}








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


.site-width {
padding:0 30px;
}

.wrapper .item {
width:32%;
margin:0 2% 20px 0;
}

.wrapper .item:nth-child(4n) {
margin:0 2% 20px 0;
}

.wrapper .item:nth-child(3n) {
margin:0 0% 20px 0;
}

.header .logo span {
font-size: 36px;
line-height: 42px;
}

.wrapper {
padding:60px 0;
}

.footer {
font-size: 16px;
line-height: 19px;
}


}




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

.header .site-width:before {
    right: -200px;
}

.wrapper .item {
width:48.5%;
margin:0 3% 20px 0;
}

.wrapper .item:nth-child(4n) {
margin:0 3% 20px 0;
}

.wrapper .item:nth-child(3n) {
margin:0 3% 20px 0;
}

.wrapper .item:nth-child(2n) {
margin:0 0% 20px 0;
}

.header .site-width {
padding:30px 20px;
height:auto;
}




}




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

.header .logo span {
margin:26px 0 0 0;
font-size: 24px;
line-height: 28px;
}

.header .site-width:before {
display:none;
}

.header .logo span {
font-size: 24px;
line-height: 28px;
}

.site-width {
padding:0 20px;
}

.wrapper .item {
width:48%;
margin:0 4% 20px 0;
}

.wrapper .item:nth-child(4n) {
margin:0 4% 20px 0;
}

.wrapper .item:nth-child(3n) {
margin:0 4% 20px 0;
}

.wrapper .item:nth-child(2n) {
margin:0 0% 20px 0;
}

.wrapper {
padding:40px 0;
}



}



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

.wrapper {
padding:30px 0;
}

.site-width {
padding:0 16px;
}

.wrapper .item {
width:47.5%;
margin:0 5% 16px 0;
padding:10px;
}

.wrapper .item:nth-child(4n) {
margin:0 5% 16px 0;
}

.wrapper .item:nth-child(3n) {
margin:0 5% 16px 0;
}

.wrapper .item:nth-child(2n) {
margin:0 0% 16px 0;
}

.wrapper .item .field, .wrapper .item a, .wrapper .item .field span {
    font-size: 12px;
    line-height: 14px;
}

.header .logo span {
font-size: 18px;
line-height: 21px;
}

.footer {
font-size: 14px;
line-height: 16px;
}



}