@import url(reset.css);
@import url(fonts.css);

html {background: #ffffff;}
body {font-size: 14px; font-family: 'Helvetica', sans-serif; font-weight: 300; font-weight: 400; background: #ffffff; color: #000; overflow-x: hidden; min-height: 100%; min-width: 1366px;}

body * {-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;}


.clear {clear: both;width: 0px;height: 0px;overflow: hidden;font-size: 0px;line-height: 0px;}

a {-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;
    text-decoration: none; color: #000;
    -webkit-appearance: none;
}
a:hover {text-decoration: none; color: #b32222;}

b, strong {font-weight: 600;}

body img {max-width: 100%;}


input, textarea, select {font-family: 'Helvetica', sans-serif; -webkit-appearance: none; -webkit-appearance: none; border-radius: 0;
  -webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease; font-weight: 300;
}

.btn {color: #fff; position: relative; text-align: center; display: inline-block; font-family: 'Helvetica', sans-serif; font-weight: 500;
  -webkit-appearance: none; border: 2px solid #b32222; background: #b32222; font-size: 12px; padding: 16px 25px 14px 25px; text-transform: uppercase; font-weight: bold; height: auto; color: #fff; border-radius: 50px; cursor: pointer; text-align: center;
  -webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;
}
.btn:hover {text-decoration: none; background: #8e0000; color: #fff; border-color: #8e0000;}

.btn-blank {color: #8e0000; background: transparent;}
.btn-blank:hover {color: #fff; background: #8e0000; border-color: #8e0000;}

.btn-super-big {font-size: 17px;}

.btn-phone {}
.btn-phone:before {content: ""; position: absolute; margin: auto; left: 19px; top: 0; bottom: 0; width: 16px; height: 16px;
  background-color: #fff;
  -webkit-mask-image: url(../images/phone.svg);
  mask-image: url(../images/phone.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
}
/*.btn-phone:hover:before {background-color: #b32222;}*/
.btn-wa {}
.btn-wa:before {content: ""; position: absolute; margin: auto; left: 19px; top: 0; bottom: 0; width: 16px; height: 16px;
  background-color: #fff;
  -webkit-mask-image: url(../images/wh.svg);
  mask-image: url(../images/wh.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
}
/*.btn-wa:hover:before {background-color: #b32222;}*/


.pull-left {float: left;}
.pull-right {float: right;}

.desktop {display: block;}
.mobile {display: none!important;}

.cont {padding: 0 70px; position: relative; margin: 0 auto; /*max-width: 1340px;*/}
.cont-2 {max-width: 1560px;}
.cont-3 {max-width: 1520px;}
.cont-4 {max-width: 1380px;}

.flex {display: flex;}
.flex-justify {justify-content: space-between;}
.flex-center {align-items: center;}
.flex-wrap {flex-wrap: wrap;}


header {position: fixed; left: 0; top: 0; width: 100%; z-index: 2; padding: 42px 0;}
.header-white {}
.header-cont {}
header .logo {width: 374px; height: 28px; 
  background-color: #fff;
  -webkit-mask-image: url(../images/svarat.svg);
  mask-image: url(../images/svarat.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
header ul {}
header ul li {margin: 0 40px;}
header ul li a {font-size: 18px; text-transform: uppercase; color: #fff; font-weight: bold;}
header ul li a:hover {color: #b32222!important;}
header .btn {}
header .contact-cont {}
header .contact-cont .phone {font-size: 20px; font-weight: bold; color: #fff; position: relative; padding: 0 0 0 29px;}
header .contact-cont .phone:before {content: ""; position: absolute; margin: auto; left: 0; top: 0; bottom: 0; width: 16px; height: 16px;
  background-color: #fff;
  -webkit-mask-image: url(../images/phone.svg);
  mask-image: url(../images/phone.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
}
header .contact-cont .wa {width: 22px; height: 22px; display: inline-block; margin: 0px 0 0 77px;
  background-color: #fff;
  -webkit-mask-image: url(../images/wh.svg);
  mask-image: url(../images/wh.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
}
.header-black .logo {background-color: #000;}
.header-black ul li a {color: #000;}
.header-black .contact-cont .phone {color: #000;}
.header-black .contact-cont .phone:before {background-color: #000;}
.header-black .contact-cont .wa {background-color: #000;}

.full-page-cont {}
.full-item {position: relative; width: 100%; height: 100vh; min-height: 800px; overflow-x: hidden;}
.full-item-1 {background: url(../images/slider-block.jpg) center; background-size: cover;}
.full-item-2 {background: url(../images/service-block.jpg) center; background-size: cover;}
.full-item-3 {background: url(../images/about-page.jpg) center; background-size: cover;}
.full-item-4 {background: #fff;}
.full-item-5 {background: url(../images/footer.jpg) center; background-size: cover;}
.full-item video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.full-item-1:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.2; z-index: 1;}
.full-item .cont {z-index: 2;}

.slider-block {color: #fff; padding: 50px 0 0px 69px; width: 50%;}
.slider-block h1 {font-size: 49px; line-height: 50px; font-weight: bold; text-transform: uppercase; margin: 0 0 37px 0;}
.slider-block .short {font-size: 20px; line-height: 26px;}

.service-block {padding: 50px 0 0px 69px;}
.service-block .left-menu {width: 30%; padding: 20px 0 0 0;}
.service-block .left-menu li {margin: 0 0 40px 0;}
.service-block .left-menu li a {display: block; font-size: 18px; color: #767d80; text-transform: uppercase; line-height: 20px; font-weight: bold; position: relative;}
.service-block .left-menu li a:before {content: ""; position: absolute; height: 4px; width: 0px; top: 9px; left: -260px; background: #b42121;
  -webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease; font-weight: 300;
}
.service-block .left-menu li a:hover,
.service-block .left-menu li a.active {color: #b42121;}
.service-block .left-menu li a:hover:before,
.service-block .left-menu li a.active:before {width: 200px;}
.service-content {width: calc(100% - 33%);}
.service-content .title {text-transform: uppercase; font-size: 46px; line-height: 50px; font-weight: bold; margin: 0 0 25px 0;}
.service-content .short {font-size: 20px; line-height: 26px; width: 80%;}
.service-content .short p {margin-bottom: 26px;}
.service-content .short p:last-child {margin-bottom: 0;}
.service-content .nav {margin-top: 30px;}
.service-content .nav .prev {width: 20px; height: 30px; background: url(../images/left.svg) no-repeat center; background-size: contain;}
.service-content .nav .nums {}
.service-content .nav .nums span {width: 10px; height: 10px; border-radius: 10px; border: 1px solid #767d80; margin: 0 4px;}
.service-content .nav .nums span.active {background: #b32222; border-color: #b32222;}
.service-content .nav .next {width: 20px; height: 30px; background: url(../images/right.svg) no-repeat center; background-size: contain;}

.about-page-cont {padding: 50px 0 0px 70px;}
.about-counts {color: #fff; margin: 0 0 88px 0;}
.about-counts .item {width: 33%;}
/*.about-counts .item:first-child {width: 35%;}*/
.about-counts .item b {display: block; font-size: 46px; line-height: 40px; font-weight: 300; margin: 0 0 22px 0;}
.about-counts .item span {display: block; font-size: 20px; line-height: 26px;}
.about-page {color: #fff;}
.about-page .video {width: 30%; height: 300px; background: url(../images/video.jpg) no-repeat; background-size: cover; position: relative;}
.about-page .video .play {position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; width: 60px; height: 60px; background: #fff; overflow: hidden; border-radius: 60px;}
.about-page .video .play:before {content: ""; position: absolute; margin: auto; left: -1px; top: -1px; right: 0; bottom: 0; width: 62px; height: 62px; background: url(../images/play.png) no-repeat; background-size: contain;}
.about-page .text {font-size: 20px; line-height: 26px; width: calc(100% - 33%);}
.about-page .text p {margin-bottom: 20px;}

.contact-page {color: #000; padding: 50px 0 0px 70px;}
.contact-page .title {font-size: 48px; line-height: 50px; text-transform: uppercase; font-weight: bold; margin: 0 0 40px 0;}
.contact-page p {font-size: 20px; line-height: 26px; margin: 0 0 48px 0;}
.contact-page-cont {}
.contact-page-cont .map {width: calc(100% - 37%); height: 420px; background: #ccc; filter: grayscale(1);}
.contact-page-cont .text {font-size: 20px; line-height: 26px; width: 34%;}
.contact-page-cont .text p {margin-bottom: 20px;}
.contact-page-cont .text p a {color: #b32222;}
.contact-page-cont .btns {line-height: normal;}
.contact-page-cont .btns .btn {margin-right: 20px;}

.footer {padding: 50px 0 0px 70px;}
.footer ul {width: 33%;}
.footer ul li {margin: 0 0 40px 0;}
.footer ul li a {display: block; color: #767d80; font-size: 18px; line-height: 20px; font-weight: bold;}
.footer-text {width: calc(100% - 33%); margin: -20px 0 0 0; position: relative;}
.footer-text .title {font-size: 36px; line-height: 50px; margin: 0 0 16px 0;}
.footer-text p {font-size: 20px; line-height: 26px; width: 90%; margin: 0 0 20px 0;}
.footer-text .btn {padding-left: 50px; margin: 0 0 50px 0;}
.footer-text .bottom {margin: 11vh 0 0 0;}
.footer-text .bottom .link {font-size: 16px; line-height: 26px; color: #b42121;}
.footer-cont {margin: 23px 0 0 0;}
.footer-cont span {font-size: 16px; line-height: 26px;}
.footer-cont a {font-size: 14px; line-height: 26px; color: #767d80;}

#fp-nav ul li a, 
.fp-slidesNav ul li a {border: 1px solid #767d80; width: 10px; height: 10px; border-radius: 20px;}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {display: none;}

#fp-nav ul li a.active,
#fp-nav ul li a:hover, 
.fp-slidesNav ul li a.active,
.fp-slidesNav ul li a:hover {border-color: #b32222; background: #b32222;}


.modal-hidden {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; display: none;}
.modal {position: fixed; right: -600px; top: 0; background: #fff; z-index: 101; background: #fff; width: 580px; height: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;
}
.modal-open {right: 0;}
.modal-cont {padding: 11.5vh 69px 70px 69px;}
.modal {}
.modal .close {position: relative; float: right; width: 20px; height: 20px; margin: 0 0 48px 0; cursor: pointer;
  background-color: #000;
  -webkit-mask-image: url(../images/close.svg);
  mask-image: url(../images/close.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
}
.modal .close:hover {background-color: #b32222;}
.modal .title {font-size: 38px; line-height: 50px; font-weight: 600; text-transform: uppercase; margin: 0 0 12px 0;}
.modal .short {font-size: 20px; line-height: 26px; margin: 0px 0 7.7vh 0;}
.modal input[type="text"] {background: #fff; border: 2px solid #767d80; padding: 0 23px; font-size: 20px; border-radius: 40px; height: 54px; width: calc(100% - 52px); margin-bottom: 5vh;}
.modal input[type="text"]:focus {border-color: #000;}
.modal input[type="text"].error {border-color: #b32222;}
.modal .check {margin: 8px 0 5vh 0;}
.modal .check input[type="checkbox"] {display: none;}
.modal .check input[type="checkbox"]+label {font-size: 16px; line-height: 24px; position: relative; display: block; padding: 0 0 0 60px;}
.modal .check input[type="checkbox"]+label a {color: #b42121;}
.modal .check input[type="checkbox"]+label:before {content: ""; position: absolute; left: 0; top: 7px; border: 2px solid #b32222; border-radius: 10px; width: 32px; height: 32px;}
.modal .btn {}




@media screen and (max-width: 1600px) {
  body {min-width: 100%;}

  header {padding: 45px 0;}
  header .logo {width: 212px; height: 16px;}
  header ul li {margin: 0 20px;}
  header ul li a {font-size: 14px;}
  header .contact-cont .wa {width: 14px; height: 14px; margin-left: 50px;}
  header .contact-cont .phone {font-size: 13px; padding-right: 31px;}
  header .contact-cont .phone:before {width: 14px; height: 14px;}

  .full-item {min-height: auto;}

  .btn {font-size: 12px; padding: 12px 20px;}

  .slider-block {}
  .slider-block h1 {font-size: 25px; line-height: 30px; margin-bottom: 30px;}
  .slider-block .short {font-size: 14px; line-height: 22px;}
  .slider-block {width: 60%;}
  .service-block {}
  .service-block .left-menu li {}
  .service-block .left-menu li a {font-size: 14px; line-height: 20px;}
  .service-block .left-menu li a:hover:before,
  .service-block .left-menu li a.active:before {left: -230px;}
  .service-block .left-menu li a:before {height: 3px; top: 8px;}

  .service-content .title {font-size: 25px; line-height: 30px; margin-bottom: 30px;}
  .service-content .short {width: 100%; font-size: 14px; line-height: 22px;}

  .about-page-cont {}
  .about-counts {margin: 0 0 30px 0;}
  .about-page .text {font-size: 14px; line-height: 22px;}
  .about-counts .item b {font-size: 26px; line-height: 35px; margin: 0 0 12px 0;}
  .about-counts .item span {font-size: 14px; line-height: 22px;}
  .about-page .video {width: 30%; height: 190px;}

  .contact-page {}
  .contact-page .title {font-size: 25px; line-height: 30px; margin-bottom: 30px;}
  .contact-page p {margin: 0 0 20px 0; font-size: 14px; line-height: 22px;}
  .contact-page-cont .map {width: calc(100% - 37.5%); height: 310px;}
  .contact-page-cont .text {width: 33%;}
  .contact-page p {font-size: 14px; line-height: 22px;}
  .contact-page-cont .text p {margin-bottom: 10px;}
  .contact-page-cont .btns {width: 80%;}
  .contact-page-cont .btns .btn {}

  .footer {}
  .footer ul {}
  .footer ul li {margin: 0 0 37px 0;}
  .footer ul li a {font-size: 14px; line-height: 20px;}
  .footer-text {margin-top: 0;}
  .footer-text .title {font-size: 26px; line-height: 35px; margin: 0 0 30px 0;}
  .footer-text .btn {margin: 0 0 30px 0;}
  .footer-text p {font-size: 14px; line-height: 22px; margin-bottom: 22px;}
  .footer-text .bottom {margin: 6vh 0 0 0;}
  .footer-text .bottom .link {font-size: 12px; line-height: 16px;}
  .footer-cont span {font-size: 12px; line-height: 16px;}
  .footer-cont a {font-size: 12px; line-height: 17px;}

  .btn-phone {}
  .btn-phone:before {width: 14px; height: 14px;}
  .btn-wa {}
  .btn-wa:before {width: 14px; height: 14px;}

  .modal {width: 480px; right: -500px}
  .modal-open {right: 0;}
  .modal-cont {padding: 5.5vh 49px 50px 49px;}
  .modal .close {margin-bottom: 8px;}
  .modal .title {font-size: 26px; line-height: 35px; margin: 0 0 30px 0;}
  .modal .short {font-size: 14px; line-height: 22px; margin-bottom: 22px;}
  .modal input[type="text"] {margin-bottom: 10px; font-size: 16px; height: 44px;}
  .modal .check input[type="checkbox"]+label {font-size: 14px; line-height: 22px; margin-bottom: 22px;}

}


@media screen and (max-width: 800px) {
	.desktop {display: none!important;}
	.mobile {display: block!important;}	
    
  body {min-width: 100%;}
  .cont {width: auto; padding: 0 20px;}

  header {border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 24px 0;}
  header .menu-mobile {width: 20px;}
  header .menu-mobile span {display: block; background: #fff; height: 2px; margin: 6px 0;}
  header .contact-cont .phone {width: 16px; height: 16px; text-indent: -1000000px; padding-left: 0; padding-right: 0;}
  header .logo {width: 174px; height: 13px;}
  .header-black .menu-mobile span {background: #000;}
  .header-black {border-color: rgba(0, 0, 0, 0.15);}

  .slider-block {width: calc(100% - 60px); text-align: center; padding: 0 30px 0 30px;}
  .slider-block h1 {font-size: 18px; line-height: 24px; margin: 0 0 23px 0;}
  .slider-block .short {font-size: 12px; line-height: 18px;}

  .service-block {padding-top: 0; padding-left: 0;}
  .service-content {width: calc(100% - 60px); text-align: center; padding: 0 30px 0 30px;}
  .service-content .title {font-size: 18px; line-height: 24px; margin: 0 0px 23px 0px; height: 48px;}
  .service-content .short {font-size: 12px; line-height: 18px; height: 400px;}
  .service-content .short p:nth-child(4n),
  .service-content .short p:nth-child(5n),
  .service-content .short p:nth-child(6n) {display: none;}

  .about-counts {display: block; text-align: center;}
  .about-page-cont {padding-top: 0; padding-left: 0;}
  .about-page-cont .title {text-align: center; text-transform: uppercase; font-weight: 600; color: #fff; font-size: 18px; margin: 0 0 45px 0;}
  .about-counts {margin: 0 0 50px 0;}
  .about-counts .item {width: 100%; margin: 0 0 37px 0;}
  .about-counts .item b {font-size: 28px; line-height: 28px; margin: 0 0 0px 0;}
  .about-counts .item span {font-size: 13px; line-height: 24px;}
  .about-page .video {margin: 0 0px 0 0px; width: 100%;}
  .about-page .text {width: calc(100% - 40px); text-align: center; padding: 0 20px; font-size: 12px; line-height: 18px;}

  .contact-page {text-align: center; padding-top: 0; padding-left: 0;}
  .contact-page .title {font-size: 18px; line-height: 24px; margin: 0 0 17px 0;}
  .contact-page p {font-size: 12px; line-height: 18px; padding: 0 20px;}
  .contact-page-cont {display: block!important;}
  .contact-page-cont .map {width: calc(100% + 40px); margin: 0 -20px;}
  .contact-page-cont .text {width: calc(100% - 40px); padding: 0 20px;}
  .contact-page-cont .text p {font-size: 14px; line-height: 22px;}
  .contact-page-cont .btns {margin: 30px 0 0 0;}
  .contact-page-cont .btns .btn {font-size: 12px; padding: 10px 23px;}

  .footer {padding-top: 0; display: block!important; padding-left: 0;}
  .footer-text {width: calc(100% - 40px); padding: 0 20px; text-align: center; padding-top: 6vh;}
  .footer-text .title {font-size: 20px; line-height: 30px;}
  .footer-text p {font-size: 14px; line-height: 20px; width: 100%; margin: 0 0 10px 0;}
  .footer-text .btn {margin: 0 0 10px 0; font-size: 12px;}
  .footer-text .bottom {margin: 2vh 0 0 0;}
  .footer-text .bottom .link {font-size: 14px; line-height: 22px;}
  .footer-cont {text-align: center; display: block!important;}
  .footer-cont span {display: block; font-size: 14px; margin-bottom: 10px;}
  .footer ul {width: 100%; text-align: center; margin: 0 0 50px 0;}
  .footer ul li a {font-size: 19px; line-height: 20px;}


  
}