@font-face { font-family: 'pfdindisplaypro'; src: url('../fonts/pfdindisplayproblackit.eot'); src: url('../fonts/pfdindisplayproblackit.eot') format('embedded-opentype'), url('../fonts/pfdindisplayproblackit.woff2') format('woff2'), url('../fonts/pfdindisplayproblackit.woff') format('woff'), url('../fonts/pfdindisplayproblackit.ttf') format('truetype'), url('../fonts/pfdindisplayproblackit.svg#pfdindisplayproblackit') format('svg'); font-weight: 900; font-style: italic; } @font-face { font-family: 'pfdindisplaypro'; src: url('../fonts/pfdindisplayprobold.eot'); src: url('../fonts/pfdindisplayprobold.eot') format('embedded-opentype'), url('../fonts/pfdindisplayprobold.woff2') format('woff2'), url('../fonts/pfdindisplayprobold.woff') format('woff'), url('../fonts/pfdindisplayprobold.ttf') format('truetype'), url('../fonts/pfdindisplayprobold.svg#pfdindisplayprobold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'pfdindisplaypro'; src: url('../fonts/pfdindisplayprolight.eot'); src: url('../fonts/pfdindisplayprolight.eot') format('embedded-opentype'), url('../fonts/pfdindisplayprolight.woff2') format('woff2'), url('../fonts/pfdindisplayprolight.woff') format('woff'), url('../fonts/pfdindisplayprolight.ttf') format('truetype'), url('../fonts/pfdindisplayprolight.svg#pfdindisplayprolight') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'pfdindisplaypro'; src: url('../fonts/pfdindisplayproreg.eot'); src: url('../fonts/pfdindisplayproreg.eot') format('embedded-opentype'), url('../fonts/pfdindisplayproreg.woff2') format('woff2'), url('../fonts/pfdindisplayproreg.woff') format('woff'), url('../fonts/pfdindisplayproreg.ttf') format('truetype'), url('../fonts/pfdindisplayproreg.svg#pfdindisplayproreg') format('svg'); font-weight: normal; font-style: normal; } /*common*/ body, input, button { font-family: 'pfdindisplaypro', sans-serif; font-weight: 300; } body { color: #0b0301; } input, button { border: none; outline: none; } input, .box { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; } .content { width: 1140px; padding: 0 15px; margin: 0 auto; } .bg-full-width { min-width: 1170px; } .spacer { text-align: justify; } .spacer > * { display: inline-block; } .spacer:after { content: ''; display: inline-block; width: 100%; } .clear-fix:after { content: ''; display: block; clear: both; } .pos-center { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .orange-btn { width: 266px; height: 46px; line-height: 46px; background: #ff6600; font-size: 19px; text-transform: uppercase; color: #fcfcfb; border-radius: 2px; cursor: pointer; } .orange-btn:hover { box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -moz-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -webkit-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -o-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); } .block-title { font-size: 40px; font-weight: normal; text-transform: uppercase; text-align: center; } .block-title_white { color: #ffffff; } /*end common*/ /*icons*/ .icon { display: inline-block; background: url('../images/icons.png') no-repeat; } .icon-stat-1 { width: 46px; height: 48px; background-position: 0 -7px; } .icon-stat-2 { width: 45px; height: 41px; background-position: 0 -55px; } .icon-stat-3 { width: 33px; height: 33px; background-position: 0 -96px; } .icon-stat-4 { width: 45px; height: 40px; background-position: 0 -129px; } .icon-step-1 { width: 36px; height: 36px; background-position: 0 -169px; } .icon-step-2 { width: 49px; height: 46px; background-position: 0 -205px; } .icon-step-3 { width: 33px; height: 43px; background-position: 0 -251px; } .icon-step-4 { width: 45px; height: 38px; background-position: 0 -294px; } .icon-step-5 { width: 38px; height: 38px; background-position: 0 -332px; } .icon-step-6 { width: 41px; height: 41px; background-position: 0 -370px; } .icon-step-7 { width: 46px; height: 36px; background-position: 0 -411px; } /*end icons*/ /*header*/ .header { background: url('../images/bg/header-bg.jpg') no-repeat center top; min-height: 678px; color: #ffffff; } .logo { background: url('../images/logo.png') no-repeat; width: 204px; height: 60px; display: inline-block; } .phone { float: right; font-size: 30px; padding-top: 13px; } .header-top { padding-top: 24px; } .main-title { margin-top: 93px; font-size: 57px; font-weight: bold; line-height: 115%; text-align: center; } .main-desc { width: 980px; margin: 25px auto 0; text-align: center; line-height: 140%; font-size: 25px; } .header__btn { display: block; margin: 50px auto 0; } .header__btn:hover, .footer-block__btn:hover, .popup-form__btn:hover { box-shadow: 0 8px 18px rgba(255, 132, 0, 0.18); -moz-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.18); -webkit-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.18); -o-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.18); } /*end header*/ /*cite*/ .cite, .scroll-block { background: url('../images/bg/cite-bg.jpg') no-repeat center top; height: 68px; text-align: center; line-height: 68px; font-size: 25px; color: #ffffff; } .cite__text { display: inline-block; position: relative; } .cite__text:after { content: ''; position: absolute; top: 33px; background: url('../images/icons.png') no-repeat; width: 14px; height: 7px; right: -28px; } /*end cite*/ /*statistics*/ .statistics { border-bottom: 1px solid #ebebeb; } .statistics-top, .statistics-bottom { font-size: 0; border-bottom: 1px solid #ebebeb; } .statistics-bottom { background: #fbfbfb; } .statistic-item { overflow: hidden; text-align: center; border-right: 1px solid #ebebeb; } .statistic-item_1 { border-left: 1px solid #ebebeb; width: 286px; } .statistic-item_2 { width: 281px; } .statistic-item_3 { width: 289px; } .statistic-item_4 { width: 279px; } .statistic-item__icon-wrap { width: 80px; height: 80px; border-radius: 8px; background: #ffffff; display: inline-block; margin-top: 37px; position: relative; box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); -moz-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); -webkit-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); -o-box-shadow: 0 7px 32px rgba(25, 25, 25, 0.1); } .statistic-item__title { width: 155px; margin: 23px auto 29px; text-transform: uppercase; font-size: 20px; font-weight: normal; line-height: 120%; } .statistics-top .content, .statistics-bottom .content { display: table; } .statistic-item { display: table-cell; } .statistic-item__desc { font-size: 16px; line-height: 135%; margin-bottom: 24px; } .statistic-item__desc:last-child { margin-bottom: 0; } .statistic-item__desc em { font-weight: bold; } .statistics-bottom .statistic-item_1 { padding: 29px 0; } .statistic-item__count { font-size: 25px; font-weight: normal; position: relative; top: 4px; } .statistic-item__count strong { font-size: 40px; display: block; margin: -2px 0 -4px; } .statistic-item__count small { color: #ff6600; } .statistic-item__type { font-size: 16px; margin-bottom: 20px; } .statistic-item__type:last-child { margin-bottom: 0; } .statistics__info { line-height: 40px; text-align: right; font-size: 16px; font-weight: normal; color: #ff6600; } /*end statistics*/ /*instruments*/ .instruments { padding-top: 73px; padding-bottom: 80px; position: relative; } .instruments__bg { position: absolute; background: url('../images/bg/instruments-bg.jpg') no-repeat; width: 706px; height: 535px; left: 15px; bottom: 176px; } .instruments-list { float: right; width: 325px; margin-top: 169px; margin-bottom: 80px; } .instruments-list__item { position: relative; font-size: 20px; font-weight: normal; margin-bottom: 30px; } .instruments-list__item:after { content: ''; position: absolute; bottom: 7px; left: -40px; background: #ff6600; width: 11px; height: 2px; } .instruments-list__item:last-child { margin-bottom: 0; } .instruments-btn, .steps__btn { display: block; clear: both; margin: 0 auto; width: 378px; } /*end instruments*/ /*steps*/ .steps { background: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; padding-top: 74px; padding-bottom: 79px; } .steps-list { padding-top: 68px; padding-left: 15px; position: relative; } .steps-list:after { content: ''; background: url('../images/steps-line.png') no-repeat; width: 1033px; height: 248px; left: 101px; top: 73px; position: absolute; } .step { display: inline-block; vertical-align: top; width: 280px; position: relative; z-index: 1; margin-bottom: 27px; } .step:nth-child(5) { margin-left: 283px; } .step:nth-child(4), .step:nth-child(7) { width: 265px; } .step__icon-wrap { display: block; width: 80px; height: 80px; border-radius: 50%; background: #ffffff; position: relative; } .step__numb, .step__icon-wrap { box-shadow: 0 19px 32px rgba(25, 25, 25, 0.1); -moz-box-shadow: 0 19px 32px rgba(25, 25, 25, 0.1); -webkit-box-shadow: 0 19px 32px rgba(25, 25, 25, 0.1); -o-box-shadow: 0 19px 32px rgba(25, 25, 25, 0.1); } .step__numb { text-align: center; width: 30px; height: 30px; line-height: 30px; font-size: 16px; color: #fbfbfb; font-weight: normal; position: absolute; background: #ff6600; border-radius: 50%; top: -5px; right: -10px; } .step__title { font-size: 18px; color: #000000; line-height: 130%; font-weight: normal; margin-top: 15px; } .step__desc { margin-top: 8px; font-size: 16px; color: #999999; line-height: 120%; } .steps__desc { font-size: 25px; color: #333333; font-weight: bold; text-align: center; margin-top: 36px; } .steps__btn { margin-top: 30px; } /*end steps*/ /*budget*/ .budget { padding-top: 74px; padding-bottom: 90px; text-align: center; } .budget__desc { margin-top: 27px; font-size: 20px; font-weight: normal; line-height: 140%; } .budget-packs { margin-top: 88px; } .budget-packs__title { font-size: 30px; text-transform: uppercase; font-weight: bold; color: #ff6600; margin-top: 54px; } .budget-pack { position: relative; display: inline-block; vertical-align: top; } .budget-pack__sum, .budget-pack-info { position: relative; z-index: 1; } .budget-pack-info { position: relative; cursor: default; width: 44px; margin: 0 auto; } .budget-pack-info__icon { width: 44px; height: 44px; background: #ff6600; border-radius: 50%; font-size: 22px; text-align: center; color: #fcfcfb; font-weight: 900; font-style: italic; line-height: 44px; display: block; } .budget-pack-info:hover .budget-pack-info__icon { box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -moz-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -webkit-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); -o-box-shadow: 0 8px 18px rgba(255, 132, 0, 0.48); } .budget-pack-info:hover .budget-pack-desc { display: block; } .budget-pack-desc { left: -16px; top: 68px; width: 550px; text-align: left; background: #ff6600; font-size: 16px; color: #ffffff; line-height: 150%; padding: 14px 22px; position: absolute; display: none; } .budget-pack_3 .budget-pack-desc { left: auto; right: -16px; } .budget-pack-desc:after { content: ''; background: url('../images/icons.png') no-repeat 0 -819px; width: 11px; height: 8px; position: absolute; top: -8px; left: 33px; } .budget-pack_3 .budget-pack-desc:after { left: auto; right: 33px; } .budget-pack__sum { font-size: 37px; font-weight: bold; margin-bottom: 28px; letter-spacing: -0.055em; } .budget-pack_2 { margin: 0 88px; } .budget-pack:after { content: ''; background: url('../images/icons.png') no-repeat 0 -447px; position: absolute; left: 0; right: 0; margin: 0 auto; } .budget-pack_1:after { width: 126px; height: 114px; top: -42px; } .budget-pack_2:after { width: 212px; height: 129px; background-position: 0 -561px; top: -51px; } .budget-pack_3:after { width: 261px; height: 129px; background-position: 0 -690px; top: -52px; } /*end budget*/ /*reviews*/ .reviews { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; background: #fbfbfb; padding-top: 76px; padding-bottom: 76px; } .reviews__desc { text-align: center; font-size: 20px; font-weight: normal; color: #333333; margin: 24px 0 73px; } .bx-viewport { padding-bottom: 50px; height: 344px !important; } .review { margin-right: 20px; display: inline-block; vertical-align: top; border: 5px solid #f5f5f5; border-radius: 2px; width: 363px; background: #ffffff; padding: 16px 20px 16px 18px; } .review:last-child { margin-right: 0; } .review__text { font-size: 16px; color: #333333; line-height: 150%; margin-bottom: 20px; } .review__logo-wrap, .review-desc { display: inline-block; vertical-align: top; } .review__logo-wrap { width: 70px; height: 70px; background: #f5f4f4; border-radius: 2px; position: relative; margin-bottom: -40px; box-shadow: 10px 19px 32px rgba(25, 25, 25, 0.1); -moz-box-shadow: 10px 19px 32px rgba(25, 25, 25, 0.1); -webkit-box-shadow: 10px 19px 32px rgba(25, 25, 25, 0.1); -o-box-shadow: 10px 19px 32px rgba(25, 25, 25, 0.1); } .review-desc__name { font-size: 20px; color: #ff6600; font-weight: normal; padding-top: 4px; } .review-desc__position { font-size: 14px; color: #999999; margin-top: 4px; } .review-desc { padding-left: 18px; } .reviews-listing { text-align: center; margin-top: 16px; } .reviews-listing__item { display: inline-block; vertical-align: top; width: 9px; height: 9px; border-radius: 50%; background: #dadada; border: 1px solid #c5c5c5; margin-right: 13px; } .reviews-listing__item.active { background: #ff6600; border-color: #ff6600; } .reviews-listing__item:last-child { margin-right: 0; } /*end reviews*/ /*footer*/ .footer { background: url('../images/bg/footer-bg.jpg') no-repeat top center; height: 523px; } .footer .block-title { padding-top: 74px; } .footer-article { text-align: center; font-size: 25px; margin-top: 17px; color: #ffffff; } .footer-article__link { color: #ff6600; } .footer-article__link:hover { text-decoration: none; } .footer-block { margin-top: 95px; text-align: center; font-weight: bold; color: #ffffff; position: relative; } .footer-block:after { content: ''; position: absolute; background: url('../images/footer-border.png') no-repeat; width: 981px; height: 125px; left: 0; right: 0; top: 19px; margin: 0 auto; } .footer-block__title { font-size: 37px; letter-spacing: -0.03em; text-transform: uppercase; } .footer-block__desc { font-size: 30px; margin-top: 14px; } .footer-block__btn { width: 378px; margin-top: 37px; } .footer-block > * { position: relative; z-index: 1; } .scroll-block { height: 49px; position: relative; } .scroll-top { cursor: pointer; background: url('../images/icons.png') no-repeat 0 -827px; width: 21px; height: 10px; } .scroll-top:hover { background-position: 0 -837px; } /*end footer*/ /*popup*/ .overlay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9; display: none; background: rgba(255, 255, 255, 0.9); } .popup { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10; width: 445px; height: 501px; text-align: center; background: #13161a; background: linear-gradient(to bottom, #13161a, #1d161d); background: -ms-linear-gradient(to bottom, #13161a, #1d161d); background: -webkit-linear-gradient(to bottom, #13161a, #1d161d); background: -o-linear-gradient(to bottom, #13161a, #1d161d); background: -moz-linear-gradient(to bottom, #13161a, #1d161d); color: #ffffff; display: none; font-family: 'Open Sans', sans-serif; } .popup-thank { height: 157px; } .popup-thank .popup__title { padding-top: 44px; } .popup__close { position: absolute; cursor: pointer; top: 13px; right: 12px; background: url('../images/icons.png') no-repeat 0 -847px; width: 17px; height: 18px; } .popup__title { font-weight: bold; padding-top: 37px; font-size: 33px; } .popup__desc { line-height: 135%; margin-top: 10px; font-size: 17px; font-weight: 300; } .popup-form { margin-top: 25px; } .popup-form__field { width: 350px; height: 43px; padding-left: 18px; background: #eaeaea; border: 1px solid #dcdcdc; font-size: 15px; color: #666666; font-family: 'Open Sans', sans-serif; margin-bottom: 14px; } .popup-form__field.error{ /* border-color: #f00; */ box-shadow: 0px 0px 2px 2px #f00; } .popup-form__btn { margin-top: 15px; width: 350px; } /*end popup*/