.img-first { margin-top: 58px; } .first-text-wrapp { margin-top: 96px; text-align: center; text-transform: uppercase; font-size: 36px; font-weight: bold; div { width: 100%; float: left; line-height: 40px; &.first-txt-1 { font-size: 42px; font-weight: bold; } &.first-txt-2 { position: relative; font-size: 50px; line-height: 64px; color: #fff; background: $orange-color; margin-top: 2px; &:before { width: 1000px; position: absolute; height: 64px; top: 0; left: -1000px; content: ''; background: $orange-color; z-index: 2; } &:after { position: absolute; width: 60px; height: 64px; background: #fe9901 url(../images/first/bg-txt2.png) 57px 0 no-repeat; content: ''; right: -59px; top: 0; } } &.first-txt-3 { margin-top: 6px; text-transform: none; font-weight: normal; i { font-style: normal; font-size: 42px; font-weight: bold; } } } } .first-ico-col { text-align: center; div { display: inline-block; width: 142px; height: 142px; text-align: center; overflow: hidden; border-radius: 100%; border: 11px solid #fff; img { max-width: 100%; } } p { text-transform: uppercase; color: #009899; font-size: 14px; font-weight: 700; margin-top: 15px; } span { font-size: 12px; margin-top: -2px; display: block; margin-left: -5px; margin-right: -5px; font-weight: 700; } } .first-ico-wr { margin-top: 24px; } .section-box-first { overflow: hidden; } .img-first { text-align: right; img { width: 534px; max-width: 100%; position: relative; z-index: 3; } } .first-ico-col { margin-top: 20px; } .title { text-transform: uppercase; text-align: center; font-size: 24px; font-weight: 700; line-height: 24px; } .section-about-product { background: #fff; box-shadow: 0px 0px 24px 0px rgba(236, 236, 236, 1); padding-top: 37px; } .about-txt { margin-top: 30px; p { font-size: 15px; line-height: 22px; margin-top: 22px; &:first-child { margin-top: 0; } } } .about-img { margin-bottom: -41px; text-align: right; margin-top: 26px; div {} img { max-width: 1000%; } } .section-advantages { padding-top: 142px; .title { margin-bottom: -3px; } } .advantages-wr { margin-top: 43px; text-align: center; div { display: inline-block; span { vertical-align: middle; display: table-cell; width: 120px; height: 120px; border-radius: 100%; background: #ececec; text-align: center; img { vertical-align: middle; max-width: 64px; max-height: 64px; } } } p { margin-top: 13px; text-transform: uppercase; font-weight: bold; font-size: 14px; color: #009899; line-height: 17px; } } .advantages-btn { margin-top: 11px; overflow: hidden; .bye-link-wrapp { .btn_ { &:before, &:after { width: 283px; } &:before { left: -283px; } &:after { right: -283px; } } } } .section-trusted { padding-top: 98px; } .trust-col { width: 33.33333333%; float: left; div { height: 149px; width: 100%; max-width: 100%; display: table; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; &:before { position: absolute; width: 100%; height: 100%; display: block; z-index:1; background: #000; @include Opacity(0.6); content: ''; top: 0; left: 0; @include Transition(0.3); } &:after { width: 2px; height: 100%; background: $Main-bg; position: absolute; left: -1px; top: 0; content: ''; z-index: 2; } span { cursor: default; position: relative; width: 100%; height: 100%; display: table-cell; z-index: 2; text-align: center; vertical-align: middle; color: #fff; font-style: normal; font-size: 14px; text-transform: uppercase; font-weight: bold; } } &:first-child { div { &:after { display: none; } } } &:hover { div { &:before { //@include Opacity(0.25); //@include Transition(0.65); } } } } .trusted-wrapp { margin-top: 40px; .row { overflow: hidden; border-bottom-left-radius:10px; border-bottom-right-radius:10px; &:first-child { margin-bottom: 2px; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:10px; } } } .trusted-txt { text-align: center; font-size: 18px; margin-top: 36px; } .section-forms { margin-top: 98px; padding-bottom: 100px; .forms-wrapp { float: right; margin-right: 23px; } table { width: 100%; max-width: 100%; tr { td { padding: 0 15px; width: 50%; vertical-align: middle; } } } ul { padding-left: 28px; li { position: relative; padding-left: 34px; font-weight: bold; font-size: 18px; line-height: 22px; margin-top: 44px; &:first-child { margin-top: 0; } &:before { width: 24px; height: 24px; position: absolute; left: 0; top: 50%; margin-top: -12px; border-radius: 100%; background-color: #009799; background-image: url("../images/svg-ico/check-img.svg"); background-repeat: no-repeat; background-size: 16px 11px; background-position: 50% 50%; content: ''; } } } } .forms-wrapp { padding: 0 29px 34px 29px; max-width: 390px; width: 100%; border: 6px solid $orange-color; background: #fff; box-shadow: 0px 0px 24px 0px rgba(236, 236, 236, 1); border-radius: 10px; } .forms-title { text-align: center; text-transform: uppercase; font-size: 24px; font-weight: bold; margin-top: 34px; margin-bottom: 14px; } .section-map { overflow: hidden; height: 400px; text-align: center; position: relative; &:before { width: 100%; height: 5px; z-index: 2; position: absolute; left: 0; top: -5px; content: ''; box-shadow: 2px 3px 7px 0px rgba(0,0,0,0.35); } } #map_canvas { overflow: hidden; width: 100%; height: 100%; position: absolute !important; left: 0; top: 0; z-index: 1; } .map-info-wrapp { background: #fff; height: 400px; z-index: 2; position: relative; display: table-cell; vertical-align: middle; } .contacts-mobile-fix { padding-left: 0 !important; padding-right: 0 !important; } .map-title { font-weight: bold; font-size: 24px; text-transform: uppercase; } .map-adress { font-size: 14px; margin-top: 37px; } .map-phone { margin-top: 10px; div { display: inline-block; } p { position: relative; padding-left: 23px; font-size: 18px; font-weight: 700; line-height: 18px; margin-top: 5px; &:before { width: 12px; height: 18px; background-image: url(../images/ico-all/ico-phone.svg); background-repeat: no-repeat; background-size: 12px 18px; background-position: 50% 50%; content: ''; display: block; position: absolute; left: 0; top: 50%; margin-top: -10px; } &:first-child { margin-top: 0; } } } .map-mail { margin-top: 7px; a { color: #9e9e9e; font-size: 14px; } } .map-logo { margin-top: 49px; img { max-width: 64px; } } @media (max-width: 1200px) { .first-text-wrapp div.first-txt-2:after { width: 30px; background: #fe9901 url(../images/first/bg-txt2.png) 27px 0 no-repeat; right: -29px; } } @media (max-width: 1036px) { .first-text-wrapp div.first-txt-2:after { width: 15px; background: #fe9901 url(../images/first/bg-txt2.png) 12px 0 no-repeat; right: -14px; } } @media (max-width: 1000px) { .first-text-wrapp div.first-txt-2:after { width: 6px; background: url(../images/first/bg-txt2.png) 0 0 no-repeat; right: -3px; } } @media (max-width: 991px) { .first-text-wrapp { font-size: 24px; div.first-txt-1 { font-size: 34px; } div.first-txt-2 { font-size: 39px; } } .section-box-first { padding-bottom: 40px; } .about-txt { padding-bottom: 20px; } .section-forms ul { padding-left: 0; } } @media (max-width: 767px) { .about-img { img { max-width: 100%; } } #map_canvas { display: none; } .section-map { background: #fff; &:before { display: none; } } .about-img { text-align: center; } .forms-wrapp { padding-left: 0; padding-right: 0; } .forms-title { font-size: 20px; } .advantages-wr { &:nth-child(2n+3) { clear: both; } } } @media (max-width: 715px) { .section-forms table tr td { text-align: center; padding: 0; &:last-child { display: none; } } .section-forms .forms-wrapp { float: none; display: inline-block; margin-right: 0; } .forms-ul { display: block !important; text-align: center; div { display: inline-block; width: 100%; max-width: 390px; text-align: left; } ul { margin-bottom: 30px; li { margin-top: 22px; } } } .section-forms { margin-top: 48px; } .trusted-wrapp { text-align: center; .row { margin-bottom: 0 !important; border-radius: 0 !important; } } .trust-col { display: inline-block; width: 100%; max-width: 390px; float: none; vertical-align: top; margin-top: 2px; div { &:after { display: none; } } } } @media (max-width: 500px) { .first-text-wrapp { div.first-txt-1 { font-size: 24px; } div.first-txt-2 { font-size: 28px; } div.first-txt-3 { i { font-size: 30px; } } } } @media (max-width: 375px) { .first-text-wrapp { font-size: 18px; div { line-height: 26px; } div.first-txt-1 { font-size: 18px; } div.first-txt-2 { font-size: 20px; } div.first-txt-3 { i { font-size: 22px; } } } }