@font-face {
    font-family: 'l';
    src: url('font/l.eot');
    src: url('font/l.eot?#iefix') format('embedded-opentype'),
         url('font/l.svg') format('svg'),
         url('font/l.woff') format('woff'),
         url('font/l.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'b';
    src: url('font/b.eot');
    src: url('font/b.eot?#iefix') format('embedded-opentype'),
         url('font/b.svg') format('svg'),
         url('font/b.woff') format('woff'),
         url('font/b.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



body {padding: 0; margin: 0; cursor: default; background: #ECE9E8 url(bg.png); color: #303030;}

* {font-family: 'l'; font-size: 17px; line-height: 17px;}

h1 {text-align: center; font-family: 'l'; font-size: 30px; font-weight: normal; line-height: 30px; margin: 0 auto;}
h2 {font-family: 'b'; font-size: 20px; font-weight: normal; line-height: 25px; margin: 0; padding: 0; margin-bottom: 17px;}
h3 {font-family: 'l'; font-size: 37px; font-weight: normal; line-height: 45px; margin: 0; padding: 0; margin-bottom: 30px;}


a {color: #CD2121;}
a:hover {color: #EE3333;}


section {
  padding: 25px 0 35px;
}

pre {
  overflow: auto;
}

pre code {
  word-wrap: normal;
  white-space: pre;
}





.us {display: inline-block; text-align: left; vertical-align: top; margin: 0.8% 0.7%; width: 40%; height: 500px;}
.us .blocks {width: 35%; min-height: 170px; text-align: left; margin: 40px 0 0 40px; padding: 25px 30px; background: #FFFFFF; background: rgba(255,255,255,0.95); color: #303030; line-height: 22px;}
.us .blocks h1 {display: block; color: #303030; border: none; outline: none; font-size: 22px; line-height: 25px; padding: 0; margin: 0; margin-bottom: 20px; font-family: 'b'; text-align: left;}


.u1 {background: url("u1.jpg") center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u1.jpg', sizingMethod='scale')";}
.u2 {background: url("u2.jpg") center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u2.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u2.jpg', sizingMethod='scale')";}
.u3 {background: url("u3.jpg") center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u3.jpg', sizingMethod='scale')";}
.u4 {background: url("u4.jpg") center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u4.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='u4.jpg', sizingMethod='scale')";}

@media (max-width: 1540px) {
.us .blocks {width: 45%;}
}
@media (max-width: 1226px) {
.us .blocks h1 {font-size: 20px; line-height: 23px;}
}
@media (max-width: 1119px) {
.us .blocks {width: 60%;}
}
@media (max-width: 859px) {
.us {margin: 1% auto; width: 80%; height: 400px;}
.us .blocks {width: 40%;}
.us .blocks h1 {font-size: 22px; line-height: 25px;}
}
@media (max-width: 687px) {
.us .blocks {width: 50%;}
.us .blocks h1 {font-size: 20px; line-height: 23px;}
}
@media (max-width: 500px) {
.us .blocks {width: 60%; margin: 25px 0 0 25px; padding: 20px 25px;}
.us .blocks h1 {font-size: 19px; line-height: 22px;}
}
@media (max-width: 400px) {
.us .blocks {width: auto; margin: 0;}
}
@media (max-width: 302px) {
.us .blocks {padding: 25px 20px;}
.us .blocks h1 {font-size: 17px; line-height: 20px;}
}










/* 1 */
.b1 {min-height: 700px; padding: 0; margin: 0; background: url("bg1.jpg") center top no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg1.jpg', sizingMethod='scale')";}
.b1 .block1 {position: absolute; top: 400px; left: 0; width: 100%; text-align: center; font-family: 'b'; color: #E82525; font-size: 100px; line-height: 100px;}
.b1 .block2 {position: absolute; top: 510px; left: 0; width: 100%; text-align: center; font-family: 'b'; color: #FFFFFF; font-size: 50px; line-height: 50px;}

@media (max-width: 1181px) {
.b1 .block1 {font-size: 90px; line-height: 90px; top: 410px;}
.b1 .block2 {font-size: 40px; line-height: 40px;}
}
@media (max-width: 961px) {
.b1 .block1 {font-size: 70px; line-height: 70px; top: 430px;}
.b1 .block2 {font-size: 30px; line-height: 30px;}
}
@media (max-width: 724px) {
.b1 .block1 {font-size: 70px; line-height: 70px; top: 400px;}
.b1 .block2 {font-size: 40px; line-height: 40px; top: 480px;}
}
@media (max-width: 569px) {
.b1 .block1 {font-size: 55px; line-height: 55px; top: 400px;}
.b1 .block2 {font-size: 30px; line-height: 30px; top: 480px;}
}
@media (max-width: 437px) {
.b1 .block1 {font-size: 40px; line-height: 40px; top: 420px;}
.b1 .block2 {font-size: 25px; line-height: 25px; top: 480px;}
}
@media (max-width: 356px) {
.b1 .block2 {font-size: 33px; line-height: 33px; top: 480px;}
}
@media (max-width: 320px) {
.b1 .block1 {font-size: 30px; line-height: 30px; top: 450px;}
.b1 .block2 {font-size: 22px; line-height: 22px; top: 490px;}
}






/*  */
.section4 {text-align: center;}
.section4 h1 {font-family: 'b'; font-size: 45px; line-height: 45px; color: #CD2121; padding: 0; margin: 0; margin-bottom: 45px; border: none; outline: none;}
.section4 img {margin: 40px 50px; border: none; outline: none;}
.section4 .section4_block1 {width: 600px; margin: -345px auto 0;}

@media (max-width: 1286px) {
.section4 h1 {margin-bottom: 70px;}
.section4 img {margin: 15px 70px;}
}
@media (max-width: 800px) {
.section4 .section4_block1 {width: 80%; margin: -345px auto 0;}
}
@media (max-width: 660px) {
.section4 h1 {font-size: 35px; line-height: 35px;}
.section4 img {margin: 15px 50px;}
}
@media (max-width: 571px) {
.section4 img {margin: 15px 30px;}
}
@media (max-width: 390px) {
.section4 h1 {font-size: 28px; line-height: 28px;}
}