@import url(font/Montserrat.css);
@import url(font/Raleway.css);
body {
  font-family: 'Montserrat';
}
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1100px;
  }
}
.main_btn {
  height:50px;
  color:#332E2A;
  background:#00F0B6;
  border:2px solid #00F0B6;
  padding:0 22px;
  font-size:18px;
  text-align:center;
  line-height:18px;
  font-weight:bold;
  justify-content: center;
  align-items: center;
  display:flex;
}
.main_btn:hover {
  color:#332E2A;
  text-decoration:none;
}
.main_btn_trnsp {
  background:transparent;
  color:#00F0B6;
}
.main_btn_trnsp:hover {
  color:#00F0B6;
}
.main_btn_trnsp span {

}

/******************** header *********************/

header {
  font-family: 'Raleway';
  background:url(img/header-3.jpg) no-repeat center;
  background-size:cover;
  padding:50px 0 140px;
  position:relative;
  color:#fff;
}
header:after {
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:'';
  display:block;
}
header .container {
  position:relative;
  z-index:2;
}
header nav {
  margin-bottom:80px;
}
header nav ul {
  padding:0;
  margin:0;
  display:flex;
  justify-content: flex-end;
}
header nav li {
  padding-left:70px;
  list-style:none;
}
header nav li:first-child {
  padding:0;
}
header nav a {
  font-size:18px;
  font-weight:500;
  padding:5px;
  color:#fff;
}
header nav a:hover {
  color:#fff;
}
.header_title {
  padding-bottom:4px;
}
.header_name {
  font-weight:800;
  font-size:58px;
  line-height: 48px;
}
.header_familyname {
  font-weight:800;
  color:rgba(255,255,255,0.0);
  font-size:76px;
  letter-spacing: 2px;
  line-height: 80px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;;
}
.header_function {
  font-size:24px;
  color:#0DBB91;
  padding-bottom:16px;
}
.header_text {
  font-size:18px;
  max-width:500px;
  padding-bottom:46px;
}
.header_text p:last-child {
  margin:0;
}
.header_btn {
  display:flex;
  width:580px;
  justify-content: space-between;
}
.header_btn > a:first-child {
  width:336px;
}
.header_btn > a:last-child {
  width:224px;
}

/******************** about *********************/

.about {
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.about .container {
  z-index:2;
  position:relative;
}
.about:before,
.about:after {
  position:absolute;
  content:'';
  display:block;
}
.about:before {
  width: 800px;
  height: 800px;
  right:-400px;
  transform: rotate(-45deg);
  top: 116px;
  border: 7px solid rgba(0, 240, 182, 0.6);
}
.about:after {
  width: 800px;
  height: 800px;
  left: 186px;
  transform: rotate(-15deg);
  bottom: -715px;
  border: 7px solid rgba(0, 240, 182, 0.6);
}
.about .row {
  margin-left:-25px;
  margin-right:-25px;
}
.about .row > div {
  padding-left:25px;
  padding-right:25px;
}
.about_title {
  font-size:33px;
  margin: -10px 0 26px;
  font-weight:bold;
  line-height: initial;
}
.about_title span {
  position:relative;
}
.about_title span:after {
  position:absolute;
  width:88px;
  height:2px;
  content:'';
  display:block;
  background:#03E6AF;
  right:-102px;
  top:0;
  bottom:0;
  margin:auto;
}
.about_content {
  font-size:17px;
  line-height:23px;
}
.about_content p:last-child {
  margin:0;
}
.about_img {
  height:390px;
}
.about_img img {
  height:100%;
  width:100%;
  object-fit: cover;
}
.about_top {
  margin-bottom:90px;
}

/******************** work *********************/

.work {
  color:#fff;
  background:url(img/work.jpg) no-repeat center;
  background-size:cover;
  padding:65px 0;
  font-size:18px;
  font-weight:500;
  position:relative;
}
.work:after {
  background:rgba(0,0,0,0.75);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:'';
  display:block;
}
.work .container {
  z-index:2;
  position:relative;
  padding-right:50px;
  padding-left:50px;
  max-width: 1050px;
}
.work_title {
  font-size:33px;
  text-align:center;
  margin: 0 0 36px;
  font-weight:bold;
}
.work_title span {
  position:relative;
}
.work_title span:after,
.work_title span:before {
  position:absolute;
  width:88px;
  height:2px;
  content:'';
  display:block;
  background:#03E6AF;
  top:0;
  bottom:0;
  margin:auto;
}
.work_title span:after {
  left:-102px;
}
.work_title span:before {
  right:-102px;
}
.work .row {
  margin-left:-50px;
  margin-right:-50px;
}
.work .row > div {
  padding-left:50px;
  padding-right:50px;
}
.work_left {
  text-align:right;
}
.work_right{

}
.work p {
  margin-bottom: 12px;
  line-height: 26px;
  font-weight:400;
}
.work p:last-child {
  margin:0;
}
.work b {
  font-weight:600;
}

/******************** price *********************/

.price {
  background:url(img/price.jpg) no-repeat center;
  background-size:cover;
  padding:65px 0 50px;
  position:relative;
}
.price:after {
  background:rgba(255,255,255,0.4);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:'';
  display:block;
}
.price .container {
  z-index:2;
  position:relative;
  max-width: 940px
}
.price_title {
  font-size:33px;
  text-align:center;
  margin: 0 0 36px;
  font-weight:bold;
}
.price_title span {
  position:relative;
}
.price_title span:after,
.price_title span:before {
  position:absolute;
  width:88px;
  height:2px;
  content:'';
  display:block;
  background:#03E6AF;
  top:0;
  bottom:0;
  margin:auto;
}
.price_title span:after {
  left:-102px;
}
.price_title span:before {
  right:-102px;
}
.price_item {
  background:#fff;
  padding:44px 36px;
  width:410px;
  margin:auto;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}
.price_item_title {
  display:flex;
  width:100%;
  font-size:22px;
  font-weight:bold;
  justify-content: center;
  align-items: center;
  line-height: initial;
  text-align: center;
  margin-bottom: 20px;
}
.price_item_cost {
  text-align: center;
  font-size:33px;
  color:#CD921F;
  margin-bottom: 20px;
  font-weight:bold;
}
.price_item_text {
  font-size:14px;
  line-height: 20px;
  margin-bottom: 20px;
}
.price_item_list {
  margin-bottom: 16px;
}
.price_item_list ul {
  padding:0;
  margin:0;
}
.price_item_list li {
  list-style:none;
  font-size:13px;
  position:relative;
  padding-left:20px;
  line-height: 15px;
  padding-bottom: 18px;
}
.price_item_list li:before {
  position:absolute;
  left:1px;
  top:0;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  height:14px;
  width:14px;
  background:#00F0B6;
  content:'';
  display:block;
}
.price_item_list li b {
  font-weight:600;
}
.price_item_bottom {

}
.price_item_bottom_txt {
  font-size:16px;
  text-align:center;
  font-weight:bold;
  margin-bottom: 20px;
}
.price_item_bottom a {
  max-width: 300px;
  margin: auto;
}

/******************** reviews *********************/

.reviews {
  background:url(img/reviews.jpg) no-repeat center;
  background-size:cover;
  padding:70px 0;
  position:relative;
  color:#fff;
}
.reviews:after {
  background:rgba(0,0,0,0.35);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:'';
  display:block;
}
.reviews .container,
.reviews_carousel {
  z-index:2;
  position:relative;
}
.reviews .reviews_container_top {
  display:flex;
  justify-content: space-between;
}
.carousel_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.carousel_nav > div {
  cursor:pointer;
  padding:5px 7px;
}
.carousel_nav > div path {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.carousel_nav > div:hover path {
  fill:#00F0B6;
}
.carousel_nav_next {
  position:relative;
  top:1px;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.flickity-button,
.flickity-page-dots {
  display:none;
}

.reviews_title {
  font-size:33px;
  margin: 0 0 22px;
  font-weight:bold;
}
.carousel_item {
  background: rgba(48, 48, 48, 0.75);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  width:510px;
  margin-right:50px;
}
.carousel_item > div {
  padding: 12px 20px;
}
.reviews_text {
  font-size:17px;
  font-weight:400;
  line-height: 23px;
  margin-bottom:20px;
}
.reviews_name {
  font-size:22px;
  font-weight:500;
}
.reviews_vk_btn {
  background: rgba(38, 49, 79, 0.75);
  color:#fff;
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:12px;
  text-decoration:none;
  margin-top:20px;
  display:block;
}
.reviews_vk_btn:hover {
  color:#fff;
  text-decoration:none;
}
.reviews_main_btn {
  margin:20px auto 0;
  width:350px;
}


/******************** modal *********************/

#modal {
  max-width:700px;
  padding:60px;
  line-height:initial;
}
.modal_title {
  font-size:33px;
  text-align:center;
  font-weight:bold;
  margin-bottom:16px;
}
.modal_subtitle {
  font-size:22px;
  text-align:center;
  font-weight:500;
  margin-bottom:20px;
}
.modal_type {

}
.modal_type_title,
.modal_type_btn > div {
  justify-content: center;
  display: flex;
  align-items: center;
}
.modal_type_title {
  height:80px;
  color:#332E2A;
  background:#00F0B6;
  padding:0 22px;
  font-size:22px;
  text-align:center;
  font-weight:500;
  margin-bottom:20px;
}
.modal_type_btn {
  margin:0 -10px 20px;
  display:flex;
}
.modal_type_btn > div {
  margin:0 10px;
  flex:1;
  height:80px;
  color:#332E2A;
  border:2px solid #00F0B6;
  font-size:22px;
  text-align:center;
  font-weight:500;
  cursor:pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.modal_type_btn > div.active {
  background:#00F0B6;
}
.modal_type_cons {

}
.modal_type_d_cons {

}
#modal input[type="text"] {
  margin:0 0 20px;
  height:80px;
  color:#332E2A;
  border:2px solid #00F0B6;
  font-size:22px;
  font-weight:500;
  width:100%;
  padding:0 20px;
}
#modal input[type="submit"] {
  height:80px;
  color:#332E2A;
  background:#00F0B6;
  font-size:22px;
  font-weight:500;
  border:0;
  width:100%;
  cursor:pointer;
}
.modal_form_title.active {
  height:80px;
  color:#332E2A;
  line-height:80px;
  border:2px solid #00F0B6;
  font-size:22px;
  font-weight:500;
  width:100%;
  padding:0 20px;
}

/******************** footer *********************/

footer {
  background:#303030;
  padding:12px 0;
  font-family: 'Montserrat;
}
footer .container {
  display:flex;
  justify-content: space-between;
}
footer nav {
  justify-content: center;
  display: flex;
  align-items: center;
}
footer nav ul {
  padding:0;
  margin:0;
  display:flex;
  justify-content: flex-end;
}
footer nav li {
  padding-right:80px;
  list-style:none;
}
footer nav li:last-child {
  padding:0;
}
footer nav a {
  font-size:18px;
  font-weight:500;
  padding:5px;
  color:#fff;
}
footer nav a:hover {
  color:#fff;
}
footer .social {
  display:flex;
  justify-content: center;
  align-items: center;
}
footer .social a {
  margin:0 10px;
}
footer .social img {
  display:block;
}

/******************** media *********************/

@media all and (max-width:1800px) {
  .about:before {right:-300px;}
  .about:after {left: 86px;}
}
@media all and (max-width:1700px) {
  .about:before {right:-400px;}
  .about:after {left: -86px;}
}
@media all and (max-width:1600px) {
  .about:before {right:-500px;}
  .about:after {left: -186px;}
}
@media all and (max-width:1500px) {
  .about:before {right:-600px;}
  .about:after {left: -286px;}
}
@media all and (max-width:991px) {
  .about:before {right:-600px;}
  .about:after {left: -86px;}
}
@media all and (max-width:767px) {
  .about:before {right:-700px;}
  .about:after {left: -202px;bottom: -806px;}
}
@media all and (max-width:550px) {
  .about:before {right:-800px;}
  .about:after {left: -362px;bottom: -806px;}
}
@media all and (max-width:1199px) {
  .carousel_item {
    width:440px;
  }
  #modal {
    padding:30px;
  }
  .modal_subtitle {
    margin-bottom:10px;
  }
  .modal_title {
    margin-bottom:14px;
  }
  #modal input[type="text"],
  .modal_type_title {
    margin-bottom:12px;
    height:60px;
  }
  #modal input[type="submit"] {
    height:60px;
  }
  .modal_type_btn {
    margin-bottom:12px;
  }
  .modal_type_btn > div {
  
  }
  .work .container {
    max-width:100%;
  }
}
@media all and (max-width:991px) {
  .about_top {
    margin-bottom:30px;
  }
  .about_img {
    height:300px;
    margin-bottom:30px;
  }
  .about_bottom .about_right {
    order:-1;
  }
  .about_top .about_img img {
    object-fit: cover;
    object-position: center -100px;
  }
  .about_bottom .about_img img {
    object-fit: cover;
    object-position: center -70px;
  }
  .carousel_item {
    width:690px;
  }
  .flickity-page-dots {
    display:block;
    bottom:-35px;
  }
  .flickity-page-dots li.dot {
    width:15px;
    height:15px;
    background:#fff;
  }
  .flickity-page-dots li.dot.is-selected {
    background:#00F0B6;
  }
  .reviews .reviews_container_bottom {
    padding-top:30px;
  }
  .reviews_vk_btn {
    margin-left:auto;
    margin-right:auto;
  }
  .reviews_carousel  {
    z-index:5;
  }
  .price_item {
    width: 370px;
  }
}
@media all and (max-width:767px) {
  header {
    padding:25px 0;
  }
  header nav {
    margin-bottom:160px;
  }
  header nav ul {
    justify-content: center;
  }
  header nav li {
    padding:0;
    flex:1;
    text-align:center;
  }
  .header_title {
    padding-bottom:10px;
  }
  .header_name {
    font-size:44px;
    line-height:44px;
  }
  .header_familyname {
    font-size:58px;
    line-height:62px;
  }
  .header_function {
    font-size:20px;
    line-height:23px;
    padding-bottom:10px;
  }
  .header_text {
    font-size:14px;
    color:#CDCCCB;
    line-height:22px;
    padding-bottom:20px;
  }
  .header_btn {
    font-size:14px;
  }
  .header_btn > a:first-child,
  .header_btn > a:last-child {
    width:auto;
  }
  .about {
    padding:50px 0;
  }
  .work p {
    margin-bottom: 12px;
    font-size:16px;
    line-height:24px;
  }
  .work .container {
    padding:0 15px;
  }
  .work .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  .work .row > div {
    padding-left: 15px;
    padding-right: 15px;
  }
  .price,
  .work {
    overflow:hidden;
  }
  .price_item_title {
    height:auto !important;
    margin-bottom:14px;
  }
  .price_item_cost {
    font-size:22px;
    margin-bottom:14px;
  }
  .price_item_text {
    text-align:center;
  }
  .price_item_list {
    display:none;
  }
  .price_item {
    padding:20px;
  }
  .price .container > .row > div:first-child {
    display: flex;
    justify-content: end;
  }
  .price .container > .row > div:last-child {
    display: flex;
    justify-content: flex-end;
  }
  .price .container > .row > div:first-child .price_item {
    margin:0 0 30px 10%;
  }
  .price .container > .row > div:last-child .price_item {
    margin:0  10% 0 0;
  }
  .price_item_bottom a {
    max-width:100%;
  }
  .carousel_nav {
    display:none;
  }
  .carousel_item {
    width: 500px;
  }
  .reviews_text {
    font-size:14px;
    line-height:initial;
  }
  .reviews_name {
    font-size:16px;
  }
  footer nav li {
    padding-right: 10px;
  }
  .modal_title {
    font-size:24px;
    margin-bottom:10px;
  }
  .modal_subtitle {
    font-size:18px;
    margin-bottom:10px;
  }
  .modal_type_title {
    font-size:18px;
    height:40px;
  }
  .modal_type_btn > div {
    font-size:18px;
    padding:0 10px;
    height: 60px;
  }
  #modal input[type="text"],
  #modal input[type="submit"] {
    font-size:18px;
    height:50px;
  }
  .header_btn {
    width: 100%;
  }
  .main_btn {
    padding:0 10px;
  }
  .price_item {
    width:70%;
  }
  .modal_form_title.active {
    height:40px;
    line-height:40px;
    font-size:16px;
  }
}
@media all and (max-width:550px) {
  .carousel_item {
    width: 400px;
  }
  .about_img {
    height: 250px;
  }
  .about_top .about_img img {
    object-position: center -74px;
  }
  header {
    background-position: -300px;
  }
  .work p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 20px;
  }
  .work .container {
    padding:0 10px;
  }
  .work .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  .work .row > div {
    padding-left: 10px;
    padding-right: 10px;
  }
  footer nav a,
  header nav a {
    font-size: 16px;
  }
  #modal {
    padding:10px;
  }
  .modal_title {
    font-size:24px;
    margin-bottom:10px;
  }
  .modal_subtitle {
    font-size:14px;
    margin-bottom:10px;
  }
  .modal_type_title {
    font-size:14x;
    height:40px;
  }
  .modal_type_btn > div {
    font-size:12px;
    padding:0 10px;
    height: 60px;
  }
  #modal input[type="text"],
  #modal input[type="submit"] {
    font-size:14px;
    height:50px;
  }
  .modal_type_btn {
    margin-left:-5px;
    margin-right:-5px;
  }
  .modal_type_btn > div {
    margin:0 5px;
  }
  
}
@media all and (max-width:479px) {
  .reviews,
  .price,
  .work,
  .about {
    padding:30px 0;
  }
  .reviews_title,
  .price_title,
  .work_title,
  .about_title {
    font-size: 28px; 
  }
  .main_btn {
    width:100%;
  }
  .header_btn > a:first-child {
    margin-right:10px;
  }
  .about_top .about_img img {
    object-position: center -58px;
  }
  .about_bottom .about_img img {
    object-position: center -44px;
  }
}
@media all and (max-width:450px) {
  header {
    background-position: -400px;
  }
  .carousel_item {
    width: 300px;
  }
  footer .container {
    display:block;
  }
  footer .social {
    margin-top:10px;
  }
  .price_item {
    margin-left:0 !important;
    margin-right:0 !important;
    width:100%;
  }
  .work .col-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align:center !important;
  }
  .work_left {
    margin-bottom:12px;
  }
  .about_top .about_img img {
    object-position: center -58px;
  }
  .about_bottom .about_img img {
    object-position: center -44px;
  }
  .main_btn {
    font-size:14px;
  }
  header nav a,
  footer nav a {
    padding:0;
  }
}
@media all and (max-width:400px) {
  header {
    background-position: -480px;
  }
}
@media all and (max-width:350px) {
  header {
    background-position: -520px;
  }
}