@charset "UTF-8";


@font-face {
	font-family: 'Noah-Regular'; 
	src: url(fonts/Noah-Regular.woff); 
}

@font-face {
	font-family: 'Noah-Bold'; 
	src: url(fonts/Noah-Bold.woff); 
}


* {
  box-sizing: border-box;
  font-family: 'Noah-Regular';
  margin: 0;
  padding: 0;
  color: #202020;	 
}

body {overflow-x:hidden;}
.wrapper { max-width:75%; margin:0 auto; text-align:center;}
.flex { display:flex; justify-content:space-between; flex-wrap:wrap; }
.h3 {font-size: 40px;line-height:50px; font-family: 'Noah-Bold'; letter-spacing:2px; padding:35px 0;position:relative; display:inline-block;z-index:2; }
.h3:before {content:''; height:10px; width:80px; background:#f9ee00; position:absolute; top:55px; left:-30px;z-index:-1;}
a {text-decoration:none;transition:0.3s;}
p {font-size:22px; line-height:32px; margin-bottom:15px;}
button {transition: all 0.3s ease 0s;}

#first { background:url(img/bg2.jpg); }

header {background:#fff; position:fixed; width:100%; top:0; left:0; padding-bottom: 15px; z-index:999;}
header .flex {align-items:center; }
header .wrapper {  padding:16px 0 4px 0; border-bottom:1px rgba(6,8,31,0.3) solid; width:100%; }
header img { width:120px; }
header a {  text-transform:uppercase; margin-left:32px; letter-spacing:2px;  position:relative; font-size:13px; }
header a.mPS2id-highlight-first:after { content:''; height:2px; width:45px; background:#f9ee00; position:absolute; top:43px; left:0px; }
header a.leads:after { opacity:0; }
header a:hover {font-weight: bold;} 
header .leads {background:#f9ee00; color:#06081f; font-weight: bold; border:1px solid rgba(249,238,0,0.5); padding:8px 20px; letter-spacing:0;}
header .leads:hover {background:#06081f; color:#fff;}


#first .info { padding-top: 180px;padding-bottom:100px;  }
#first .info .wrapper {text-align:left;}
#first .info .flex {align-items:center;}
#first .info_image {width:45%;}
#first .info_image img {max-width:100%;}
#first .info_text {width:55%;}
#first .info p { margin-top:48px; color:#fff; max-width:60%;}
.info_arrow {background:url(img/info_arrow.png);width:120px; height:107px; margin: 20px 0;}


#first .info form input { border:1px rgba(255,255,255,0.2) solid; color:#fff; padding:10px 30px; font-size:16px;
background:none; outline:none; margin-right:32px; box-shadow:0 0 10px rgba(249,238,0,.14); margin-bottom: 25px; }
#first .info form button { color:#fff; padding:20px 60px; font-size:20px;  color:#06081f; cursor:pointer; 
background:#f9ee00; outline:none; border:none; margin-right:32px; box-shadow:0 0 10px rgba(249,238,0,.14); font-weight:bold; border:1px solid #f9ee00; }
#first .info form button:hover {border:1px solid rgba(249,238,0,0.5); background:none; color:#fff;}
#first .what { margin-top:98px; width:100%;  }
#first .what a:before { position:absolute; content:''; background:url(img/question.svg); background-size:cover; height:22px; width:22px; top:-11px; left:0px;  }
#first .what a { color:#fff; border-bottom:1px #fff dashed; padding-bottom:4px; cursor:pointer; position:relative; padding-left:35px; line-height: 30px; }
#first .what a:hover {color:#f9ee00;}


#first h1 { font-family: 'Noah-Bold'; color:#fff; font-size:72px; }
#first h3 span {position:relative;color:#fff;font-size:36px; letter-spacing:2px;}
#first h3 span:after { position:absolute; bottom:-20px; left:0; content:''; width:25%; height:2px; background:#f9ee00; }



#about { margin-top:100px; }
.about_left {width:60%; text-align:left;}
.quote_img {width:60px;}
.quote_img img {max-width:100%;}

.about_right {width:40%; padding-left:30px; display: flex; justify-content: center; flex-wrap: wrap;}
.about_right_img {max-width:350px; position:relative; margin-bottom:25px;}
.about_right_img:before {content:''; height:10px; width:80px; background:#f9ee00; position:absolute; top:55px; right:-30px;}
.about_right_img:after {content:''; height:10px; width:50px; background:#f9ee00; position:absolute; top:105px; right:-30px;}
.about_right img {max-width:100%;}
.about_right span {display:block; width:100%;}
#about .sources img { max-height:36px; margin:0 12px; }
#about .traffic_sources { justify-content:center; margin:36px 0; }
#about .traffic_sources span { font-family: 'Noah-Bold'; margin-right:24px; font-size:24px; line-height:34px; }


#how_work {padding:30px 0; position:relative; text-align: center;}
#how_work .h4 {font-size: 24px;line-height:34px; font-family: 'Noah-Regular'; padding:25px 0;position:relative; display:inline-block;z-index:2; }
#how_work .h4:before {content:''; height:5px; width:40px; background:#f9ee00; position:absolute; top:38px; left:-10px;z-index:-1;}
#how_work .img_phone {position:absolute; top:450px; left:-50px;width:400px; }
#how_work .img_phone img {max-width:100%;}




#steps .flex {justify-content:center;}
#steps .step {width:35%; border:1px solid #eee; margin: 0 30px 60px 30px; padding:30px; position:relative;background: rgba(251,251,251,0.9); }
#steps p { position:relative; z-index:2;}
#steps span { font-family: 'Noah-Bold'; font-size:80px; line-height:90px; color:#ddd; position:absolute; top:0; left:30px;z-index:1;}



#advantages {background: #eee;padding: 100px 0;}
#advantages p {position:relative; text-align:left; padding-left:40px;}
#advantages p:before {content:''; height:30px; width:30px; background:url(img/check-box.svg); background-size:cover; position:absolute; top:2px; left:0px;}
.advantages_inner {width:600px; margin: 0 auto;}




#request {padding: 100px 0; background:url(img/bg3.jpg); background-size:cover; background-position:center center; align-items:center; 
justify-content:center; }
#request .wrapper { text-align:center; }
#request .wrapper h3 { color:#fff; font-size: 40px;line-height:50px; font-family: 'Noah-Bold'; letter-spacing:2px; position:relative; }
#request .wrapper h3::after {display: block;content: '';margin:0 auto;margin-top: 12px;width: 25%;height: 2px;background: #f9ee00;}
#request .wrapper p { margin:0 auto; margin-top:36px; color:#fff; width:60%;  }
#request .count { margin-top:64px;  }
#request .count a { background:#06081f; border:1px solid rgba(255,255,255,0.2);  padding:15px 50px; color:#fff; font-size:22px; line-height:32px; cursor:pointer; }
#request .count a:hover {  background: #f9ee00; color:#06081f; }
#request p b {color:#fff; font-size:26px; border-bottom: 1px #fff dashed;}
#request p i {font-style:normal; color:#fff;}


#include {padding: 100px 0; position:relative;}
.include_inner {display:flex; justify-content:center; flex-wrap:wrap; align-items:center; padding-bottom:60px;}
.include_plus {width:15px; height: 15px; display:flex; justify-content:center; align-items:center; margin: 0 8px;}
.include_plus img {max-width:100%;}
.include_item p {margin-bottom:0;}
#include h4 {font-size:30px; line-height:40px;}
.include_extra { text-align:left; width:550px; margin:0 auto; padding-top:35px;}
#include .include_picture {position:absolute; top:300px; left:-78px; width:400px; height:400px;}
.include_picture img {max-width:100%;}





#numbers {background: #eee;padding: 100px 0;}
.numbers_inner {margin: 55px 0;}
.numbers_inner > div { width:20%; display:flex; justify-content:center; align-items:center;}
.numbers_img {width:60px;}
.numbers_text {padding-left:15px; }
.numbers_img img {max-width:100%;}
.numbers_inner {margin: 30px 0 15px 0;}
.numbers_inner > div span {font-size: 35px; line-height: 45px; font-family: 'Noah-Bold';}
#numbers p b {font-size:26px; border-bottom: 1px #202020 dashed;}
#numbers p i {font-style:normal;}



#clients { padding:100px 0; }

#clients .list_navi { justify-content:center;  margin-top:48px;}
#clients .list_navi span {margin: 0 12px 25px 0; background:#eee; padding:10px 30px; color:#333; cursor:pointer; font-size:19px; transition:0.2s; }
#clients .list_navi span:hover { background:#f9ee00;color:#333; } 
#clients .list_navi span.active {color: #fff; background: #06081f; font-weight:bold; cursor:text;}

#clients .list { margin-top:48px; justify-content:center; }
#clients .list .item { width:200px; height:380px;  cursor:pointer; transition:0.2s;  margin:20px; border:1px solid #eee; position:relative;z-index:1;}
#clients .list .item .overlay { background:rgba(215,215,215,.84); width:100%; height:100%; opacity:0; box-shadow:none; transition: opacity 0.3s, box-shadow 0.3s;
align-items:center; justify-content:center; position: absolute; top: 0; left: 0; z-index:3; }
#clients .list .item:hover .overlay { opacity:1; box-shadow:3px 3px 20px rgba(0,0,0,.44); }
#clients .overlay img {width:100px;}
#clients .list .item a {display:block;width:100%; height:100%; z-index:4; position:relative; }

.fancybox-button {background:#eee!important;}





#faq {padding:0px 0 100px 0;}
.faq_inner {width:60%; margin:0 auto;}
#faq .question {background:#06081f; align-items:center; padding:20px 30px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.2);}
#faq .question p {color:#fff; font-size:24px; font-weight:bold; line-height:35px; margin-bottom:0;}
.faq_img {width:30px; height:30px; background:url(img/add.svg); background-size:cover;}
.faq_img.active { background:url(img/minus.svg); background-size:cover;}
#faq .answer {padding:20px 30px; display:none;}
#faq .answer p {margin-bottom:0;}





#last_form {padding:100px 0;background:#eee;}
.last_form_arrow {background:url(img/info_arrow2.png);width:120px; height:107px; margin: 0 auto; margin-top:10px; margin-bottom:20px;}
#last_form a {background: #f9ee00; border: 1px solid #f9ee00;padding: 15px 0px;font-size: 22px; margin: 0 auto;
line-height: 32px; cursor: pointer; text-align:center;width:280px; display:block;}
#last_form a:hover {background:#06081f; color:#fff;}




/* ----------- Modalbox ------------ */


.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(55,55,59,0.9);  z-index: 999!important;
opacity: 0;  -webkit-transition: opacity 200ms ease-in;  -moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; pointer-events: none; margin: 0; padding: 0; }
.modal:target { opacity: 1; pointer-events: auto; overflow-y: auto; }
.modal-dialog {max-width: 650px; margin:0 auto; margin-top: 50px; }
.modal-content { position: relative; background: url(img/bg3.jpg);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);border-radius: 8px; padding:30px 50px;}
.modal-body {position: relative;}
.close {position:relative; float:right; top:30px; right:40px;font-size: 25px!important;font-weight: 700;
line-height: 1;color:#fff!important;opacity: 1!important;text-decoration: none; z-index:9999;}
.close:focus, .close:hover {color: #f9ee00!important;text-decoration: none;cursor: pointer;opacity: 1;}

.modal h3 {color:#f9ee00; font-size: 40px; line-height: 50px; font-family: 'Noah-Bold';
letter-spacing: 2px; padding: 35px 0;}
.modal h4 {font-size: 30px; line-height: 40px; color:#fff;padding: 15px 0;}

.modal input {width:100%; margin-bottom:25px; border: 1px rgba(255,255,255,0.2) solid;
color: #fff; padding: 10px 30px; font-size: 16px; line-height:32px; background: none; outline: none;
 box-shadow: 0 0 10px rgba(249,238,0,.14);}
.modal button {color: #fff; padding: 20px 60px; font-size: 20px; color: #06081f; cursor: pointer;
background: #f9ee00; outline: none; box-shadow: 0 0 10px rgba(249,238,0,.14);
font-weight: bold;border: 1px solid #f9ee00;}
.modal button:hover {border: 1px solid #f9ee00; background: none; color: #fff;}


footer {padding:100px 0; background: url(img/bg3.jpg);}
footer a, footer p {color:#fff;}






@media (max-width: 1400px) {
#first .info_text {width:60%;}
#first .info_image {width: 40%;}

.faq_inner {width:80%;}
}





@media (max-width: 1200px) {
.wrapper {max-width: 90%;}	
.h3 {font-size: 28px; line-height: 30px; padding: 20px 0;}
.h3::before {left:30px; top: 35px;}
p {font-size: 18px; line-height: 28px;}

header img {width: 80px;}

#first .info_text {width:100%; text-align:center;}
#first h1 {font-size:28px;}
#first .info {padding-top: 90px; padding-bottom: 40px;}
#first h3 span {font-size:24px; letter-spacing:0px;}
#first h3 span:after {bottom: -10px;}
#first .info p {max-width:100%; margin-top: 28px;}
.info_arrow {width: 40px; height: 36px;background-size:cover; margin:0 auto; margin-top: 15px; margin-bottom: 15px;}
#first .info form input {width:270px; padding: 8px 20px; margin-right:0;}
#first .info form button {width:270px; padding: 20px 0px; padding: 20px 0; font-size:18px; margin-right:0;}
#first .what {margin-top: 25px;}

#first .info_image {width:100%; margin-top: 5px; text-align: center; }
#first .info_image img {max-width:300px;}
	
	
#how_work {padding: 20px 0 0 0;}
#how_work .h4, #about .traffic_sources span {font-size: 20px;line-height: 30px;}	
#how_work .h4 {padding: 0 0 10px 0;}

#how_work .img_phone {top:150px;}
	
#about {margin-top: 30px;}
#about .sources img {max-height: 20px; margin: 0 12px;}
#about .traffic_sources span, #about .traffic_sources .sources {display:block; width:100%;}
#about .traffic_sources span {margin-right: 0px;}
#about .traffic_sources .sources {margin-top:15px;}


#advantages p:before {height: 15px; width: 15px; top: 7px;}
#advantages p {padding-left: 25px;}
.advantages_inner {width: 410px;}


#request {padding: 50px 0 70px 0;}
#request .wrapper h3 {font-size: 24px; line-height: 30px;}
#request .wrapper p {width:100%;}
#request .count a {font-size: 18px; line-height: 28px; padding: 15px 30px;}
#request p i {display:block; padding-top:8px;}

#steps {padding-top: 20px;}
#steps .step {width: 48%; margin: 0 15px 30px 0; }
#steps .step:nth-child(2), #steps .step:nth-child(4) {margin-right:0;}

#clients .overlay img {width: 50px;}
	
	
#advantages, #numbers, #clients, #include {padding: 40px 0;}	



#last_form {padding:40px 0;}
.last_form_arrow {width: 40px; height: 36px;background-size:cover;}
#last_form a {font-size: 18px; line-height: 28px; width: 235px;}

.faq_inner  {margin-top:35px;}
#faq .question p {font-size:20px;}
#faq .question, #faq .answer {padding: 12px 15px;}


.include_plus {width:100%; height:26px;}
.include_plus img {width:15px;}
#include .include_picture {position:relative; top:0; left:0; width:100%; height:auto; padding-bottom:20px;}
#include .include_picture img {width:200px;}
.include_inner {padding-bottom: 20px;}
#include h4 {font-size: 22px; line-height: 32px;}
}	




@media (max-width: 800px) {
#steps .step {width: 100%; padding: 20px; margin-right:0;}	
#how_work .img_phone {top:400px; width:300px;}

#clients .list .item {height:280px; width:140px; margin: 10px;}
#clients .list_navi span {font-size:16px; padding: 10px 10px; margin: 0 12px 12px 0;}
#clients .list, #clients .list_navi {margin-top: 20px;}

.modal-dialog {max-width: 90%; margin-top: 25px;}
.modal-content {padding: 15px 20px;}
.close {top: 15px; right: 18px;}
.modal h3 {font-size:22px; line-height:30px; padding: 20px 0 0 0;}
.modal h4 {font-size:18px; line-height:26px;}
.modal input {padding: 8px 20px;}
.modal button {font-size:18px; margin: 0 auto; display: block; width: 150px; padding: 10px 0;}


header {padding-bottom: 5px;}
header .about, header .portfolio, header .faq {display:none;}
header a {margin-left:0;}
header .leads {padding: 8px 10px; text-transform:none; font-size: 16px;}
header .wrapper {padding: 4px 0 4px 0;}

.numbers_inner > div {width:100%; margin-bottom:35px;}
.numbers_text {width:200px;}
.numbers_inner > div span {font-size: 30px; line-height: 40px;}
.numbers_img {width: 50px;}
#numbers p i {display:block; padding-top:8px;}

#faq .question {flex-wrap:nowrap;}
.faq_inner {width:100%;}
.faq_img {width: 24px; height: 24px;}
#faq .question p  { width:calc(100% - 26px);}
#faq {padding: 0px 0 40px 0;}


.include_extra {width:80%; padding-top: 15px; border-bottom:1px solid #eee; margin-bottom: 20px;}

.about_left {width:100%; text-align:center;}
.quote_img {width: 40px;margin-left:20px;}
.about_right {width:100%; padding-left: 0px;}
.about_right_img {max-width: 220px;}
.about_right_img:before {height: 5px; width: 60px;top: 25px; right: -20px;}
 .about_right_img:after {height: 5px; width: 40px;top: 75px; right: -20px;}
 
 
 #first .info_image img {max-width:100%;}
 #first .what a {display:none;}
}






@media (max-width: 500px) {
.advantages_inner {width: 90%;}	
}