*{box-sizing: border-box}
html,body {font-size:24px;line-height:26px;font-weight:300;background:#fff;height: 100%;min-width: 320px;color: #231f20;font-family: 'Roboto', sans-serif;margin:0;padding:0;border:0;outline:0;vertical-align:baseline;}
.fontMontserrat{font-family: 'Montserrat', sans-serif;font-weight: 500}
h1, h2{font-family: 'Montserrat', sans-serif;font-weight: 500;margin: 15px 0;}
h1{font-size: 60px;line-height: 65px;}
h2{font-size: 24px;line-height: 30px;text-transform: uppercase;}
img{max-width: 100%}
p{margin: 15px 0}
b{font-weight: 700}
.main { min-height: 100%; min-width:320px;position: relative;max-width: 1920px;margin: 0 auto}
.mainRez{height: 170px; clear:both}
.footer {height: 170px;margin:-170px auto 0;min-width:320px;position: relative;max-width: 1920px;}
.goMid{max-width:1240px;margin:0 auto;position: relative}
.header{position: relative;min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center}
.logo{padding: 25px 0 40px;position: relative;z-index: 10}
.logo span{display: block;text-align: center}
.header:after{display: block;width: 100%;height: 50%;position: absolute;left: 0;bottom: 0;content: '';background: url("../images/bg1.png") no-repeat;z-index: 5;background-size: 100% 100%}
.process{position: relative}
.process img {width: 100%}
.process:before{display: block;width: 100%;height: 140px;position: absolute;left: 0;top: 0;content: '';background: url("../images/bg2.png") no-repeat;z-index: 5;background-size: 100% 100%}
.process:after{display: block;width: 100%;height: 120px;position: absolute;left: 0;bottom: -2px;content: '';background: url("../images/bg3.png") no-repeat;z-index: 5;background-size: 100% 100%}
.products{position: relative;display: flex;align-items: center;justify-content: center;background: #69c7c5;z-index: 15;margin: -2px 0}
.productsItem{width: 415px;margin: -40px 7% -60px;text-align: center}
.productsItem span{margin: 8px 0;display: block;}
.desc{display: block}
.mobile{display: none}
.middle-content{max-width: 1250px;padding: 25px;margin: 0 auto;text-align: center;position: relative;z-index: 25}
.middle-content.small{max-width: 950px}
.process + .middle-content{margin-top: -60px}
.about{position: relative;display: flex;align-items: center}
.aboutPic{flex: 0 0 18%;font-size: 0;line-height: 0}
.aboutPic img{width: 100%}
.aboutText {flex: 1 0;font-size: 16px;line-height:19px;color: #fff;display: flex;align-self: stretch;padding: 5px 30px;align-items: center}
.aboutGreen{background: #008641}
.aboutLGreen{background: #a7ce38}
.gray{position: relative;background: #f4f4f4;display: flex;align-items: stretch}
.grayText{flex: 0 0 50%;padding: 15px 80px;display: flex;flex-direction: column;justify-content: center}
.grayPic{flex: 0 0 50%;background:no-repeat center;background-size: cover;font-size: 0;line-height: 0}
.grayPic img{width: 100%;visibility: hidden}
.textLeft{padding-left: 8%}
.textRight{padding-right: 8%;order: 1}
.textRight + .grayPic{order: 0}
.thanks{padding: 35px 25px;text-align: center}
.thanks b{color: #69c7c5}
.footer{background: #1b305a;padding:0 30px;text-align: center;color: #fff;display: flex;justify-content: center}
.copy{display: flex;align-items: center;}
.copy img {margin-right: 30px;}
.cotyText i {font-style: normal}
@media screen and (max-width: 1439px) {
    html,body{font-size: 20px;line-height: 24px;}
    .header{padding: 0;display: block;min-height: 0}
    .logo{padding: 35px 0 55px;margin: 0 auto;text-align: center}
    .logo img {max-width: 30%}
    .products{align-items: flex-end}
    .productsItem{width: 350px;margin: -10px 5% -60px}
    .aboutText{padding: 5px 20px;font-size: 15px;line-height: 18px;}
    .aboutText p{margin: 5px 0}
    .aboutPic{flex-basis: 17%}
    .textLeft{padding-left: 45px}
    .textRight{padding-right: 45px;padding-left: 45px}
    .thanks b{display: block;margin-bottom: 6px}
}
@media screen and (max-width: 1199px) {
    html,body{font-size: 18px;line-height: 22px;}
    .header:after{height: 120px}
    .process:before{height: 80px}
    .process:after{height: 80px}
    .productsItem{margin: 0 auto;width: 35%}
    .process + .middle-content{margin-top: -30px}
    .about{flex-direction: column}
    .aboutPic{max-width: 350px;}
    .aboutText{max-width: 350px;align-self: center;padding: 15px 20px;min-height: 350px;}
    .gray{display: block}
    .grayText{padding: 15px 45px}
    .grayPic{background: none!important;}
    .grayPic img{visibility: visible}
    .middle-content{padding: 25px 45px}
}
@media screen and (max-width: 1199px) {
    .desc{display: none}
    .mobile{display: block}
}

@media screen and (max-width: 767px) {
    h1{font-size: 40px;line-height: 45px}
    .productsItem{width: 40%;font-size: 16px;line-height: 18px}
    .mainRez{display: none}
    .footer{height: auto;margin: 0;padding: 25px}
    .logo{font-size: 16px}
}
@media screen and (max-width: 639px) {
    .logo{padding: 35px 25px 55px}
    .logo img{max-width: 80%}
    .header:after{height: 60px}
    .process:before{height: 20px}
    .process:after{height: 20px}
    .products{flex-direction: column;align-items: center;padding: 35px 0 0}
    .productsItem{width: auto;max-width: 80%;margin: 0 0 25px}
    .middle-content{padding: 25px}
    .about{display: block}
    .aboutText{min-height: 0;padding: 25px}
    .grayText{padding: 15px 25px}
    h1{font-size: 30px;line-height: 30px}
    h2{font-size: 20px;line-height: 24px}
    .copy img{margin-right: 30px;width: 50px}
    .copy{font-size: 14px;line-height: 18px;text-align: left}
    .cotyText i{display: block}
}