body, html 			        { margin: 0; padding: 0; min-width: 320px; font: 22px/35px Font, Verdana, sans-serif; color: #555; background: #FFF; text-align: left; 
background-image: url(/media/bg-top.jpg); background-size: contain; background-repeat: no-repeat; background-position: center -200%;
-ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }



h1 { color: #33598D; font-size: 60px; line-height: 60px; margin: 20px 0 43px 0 }

p { margin: 20px 0 }

p.intro { font-weight: 900; font-size: 27px; color: #000 }

a { transition: all 0.3s }



header { }

.header { background-image: linear-gradient(to bottom, rgb(43 81 140 / 1), rgb(255 255 255 / 0) 220px); height: 0; padding-bottom: 40% }

.header .content { padding-top: 40px }

.block   { width: 100%; max-width: 1400px; margin: 0 auto }
.content { width: 100%; max-width: 1400px; padding-left: 100px; padding-right: 100px; margin: 0 auto; box-sizing: border-box }

.rounded { border-radius: 40px }

.logo { width: 200px; float: left; margin-right: 25px }

/* Для двух заголовков */
/*.title { color: #FFF; font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 28px; padding-top: 15px }*/
/* Для одного заголовка */
.title { /*background: rgb(0 0 0 / .15);*/ display: flex; align-items: center; height: 90px; color: #FFF; font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: 40px; padding-top: 0 }
.title div span { display: inline-block }
.title div span:not(.no-cap):first-letter { font-size: 110% }

.body { background: #FFF }
.body > .content { padding-top: 70px; padding-bottom: 70px }

.two-columns { display: flex; justify-content: space-between }
.two-columns > div { flex-basis: 48% }

.contacts { padding-top: 70px; padding-bottom: 70px; background-color: #E9EFF5 }
.contacts *:not(h1) { color: #000 }

.general-contacts { margin-top: 50px }
.general-contacts p { margin: 30px 0 }

a.icon-before-text  { text-decoration: none; color: #000 }
a.icon-before-text:hover { color: #2D6FC8 }
.icon-before-text { display: block; padding-left: 70px }
.icon-before-text:before { position: absolute; display: block; margin-left: -60px; margin-top: 3px; font: 30px/30px Themify; color: #77A9EC }
.icon-before-text.tel:before { content: "\e621" }
.icon-before-text.tel { white-space: nowrap }
.icon-before-text.email:before { content: "\e75a" }
.icon-before-text.addr:before { content: "\e693" }
.icon-before-text.person:before { content: "\e602" }
.persons .icon-before-text.tel:before { margin-left: -50px }

.persons { margin-top: 40px }
.persons .name { font-weight: 900; margin: 0; white-space: nowrap }
.persons .position { font-size: 18px; margin: 0; color: #666; white-space: nowrap }
.persons { display: grid; grid: auto auto / min-content auto; }
.persons > div { border-top: 1px solid #BACCE0; padding-top: 20px; padding-bottom: 10px }
.person { padding-right: 50px }

footer { padding-top: 70px; padding-bottom: 70px; font-size: 18px }



@media screen and (max-width: 3839px) {
    body, html { background-position: center -100% }
}

@media screen and (max-width: 2559px) {
    body, html { background-position: center -30% }
}

@media screen and (max-width: 1919px) {
    body, html { background-position: center -20% }
}

@media screen and (max-width: 1599px) {
    body, html { background-position: center -15% }
}

@media screen and (max-width: 1439px) {
    body, html { background-position: center -10% }
    .header { padding-bottom: 45% }
}

@media screen and (max-width: 1279px) {
    body, html { background-position: center 0 }
    .header { padding-bottom: 50% }
}

@media screen and (max-width: 1023px) {
    
    body, html { font-size: 18px; line-height: 27px }
    
    h1 { font-size: 40px; line-height: 40px; margin: 20px 0 30px 0 }

    p.intro { font-size: 22px }

    .content { padding-left: 50px; padding-right: 50px }

    .header { background-image: linear-gradient(to bottom, rgb(43 81 140 / 1), rgb(255 255 255 / 0) 150px); padding-bottom: 55% }

    .header .content { padding-top: 20px }

    .logo { width: 150px; margin-right: 20px }

    /* Для двух заголовков */
    /*.title { font-size: 14px; line-height: 24px; padding-top: 10px }*/
    /* Для одного заголовка */
    .title { height: 70px; font-size: 24px; line-height: 30px }

    .body > .content { padding-top: 30px; padding-bottom: 30px }

    .contacts { padding-top: 30px; padding-bottom: 30px }
    
    .general-contacts { margin-top: 40px }
    .general-contacts p { margin: 25px 0 }

    .icon-before-text { padding-left: 60px }
    .icon-before-text:before { margin-left: -50px; margin-top: 1px; font-size: 25px; line-height: 25px }
    .persons .icon-before-text.tel:before { margin-left: -40px }    
    .persons .position { font-size: 16px }

    footer { padding-top: 50px; padding-bottom: 50px; font-size: 16px }
}

@media screen and (max-width: 767px) {
    
    .two-columns { display: block }    

    .person { padding-right: 10px }
}

@media screen and (max-width: 639px) {
    
    body, html { background-position: center 50px }

    .header { background-image: linear-gradient(to bottom, rgb(43 81 140 / 1), rgb(43 81 140 / 1) 50px, rgb(255 255 255 / 0) 150px); padding-bottom: 70% }

    h1 { font-size: 35px; line-height: 35px; margin: 20px 0 30px 0 }

    p { margin: 10px 0 }
    
    .content { padding-left: 30px; padding-right: 30px }

    .rounded { border-radius: 30px }

    .logo { width: 100px; margin-right: 15px }

    /* Для двух заголовков */
    /*.title { font-size: 11px; line-height: 18px; padding-top: 3px }*/
    /* Для одного заголовка */
    .title { height: 50px; font-size: 18px; line-height: 26px }

    .icon-before-text { padding-left: 50px }
    .icon-before-text:before { margin-left: -40px; margin-top: 2px; font-size: 22px; line-height: 22px }
    .persons .icon-before-text.tel:before { margin-left: -40px }

    .persons { display: block }
    .persons > div { border-top: none; padding-top: 0; padding-bottom: 15px }
    .persons > .person { border-top: 1px solid #BACCE0; padding-top: 20px; padding-bottom: 10px }
}

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

    body, html { font-size: 16px; line-height: 24px }

    h1 { font-size: 30px; line-height: 30px; margin: 10px 0 20px 0 }

    p.intro { font-size: 20px }

    .header { background-image: linear-gradient(to bottom, rgb(43 81 140 / 1), rgb(43 81 140 / 1) 50px, rgb(255 255 255 / 0) 120px); padding-bottom: 80% }

    .content { padding-left: 20px; padding-right: 20px }

    .rounded { border-radius: 20px }

    .logo { width: 90px; margin-right: 10px }
    
    /* Для двух заголовков */
    /*.title { font-size: 10px; line-height: 18px; padding-top: 3px }*/
    /* Для одного заголовка */
    .title { height: 40px; font-size: 14px; line-height: 22px }

    .body > .content { padding-top: 20px; padding-bottom: 20px }
    
    .contacts { padding-top: 20px; padding-bottom: 20px }

    .icon-before-text:before { font-size: 20px; line-height: 20px }
    
    .general-contacts { margin-top: 30px }
    .general-contacts p { margin: 20px 0 }
    
    .persons .position { font-size: 14px }

    footer { padding-top: 40px; padding-bottom: 40px; font-size: 14px }
}

@media screen and (max-width: 359px) {
    
    body, html { font-size: 14px; line-height: 21px }

    h1 { font-size: 26px; line-height: 26px; margin: 10px 0 20px 0 }

    p.intro { font-size: 16px }

    .logo { width: 80px; margin-right: 10px }
    
    /* Для двух заголовков */
    /*.title { font-size: 9px; line-height: 16px; padding-top: 3px }*/
    /* Для одного заголовка */
    .title { height: 35px; font-size: 13px; line-height: 19px }

    .icon-before-text:before { font-size: 18px; line-height: 18px }
    
    .general-contacts { margin-top: 25px }
    .general-contacts p { margin: 15px 0 }
    
    .persons { margin-top: 25px }
    
    .persons .position { font-size: 12px }

    footer { padding-top: 30px; padding-bottom: 30px; font-size: 12px }
}