@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic&subset=latin,cyrillic);
/*
font-family: 'Exo 2', sans-serif;
Thin 100  
Extra-Light 200  
Light 300  
Normal 400  
Medium 500  
Semi-Bold 600  
Bold 700  
Extra-Bold 800  
Ultra-Bold 900


font-family: 'Open Sans', sans-serif;
Light 300
Normal 400
Semi-Bold 600
Bold 700
Extra-Bold 800
*/


/*
.ease { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }

.animation { animation: dash 2s linear forwards; }
@keyframes dash { 100% {} }

::-webkit-input-placeholder {color:#fff;}
::-moz-placeholder {color:#fff;}
:-moz-placeholder {color:#fff;}
:-ms-input-placeholder {color:#fff;}

*/


/* Common rules --------------------------------------------------- */
* { outline:none; }
html { background-color:#fff; }
body, html { margin:0; padding:0; }
body { font-family: 'Open Sans', sans-serif; font-weight:300; }

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; }

a { text-decoration:none; }
a:hover { text-decoration:underline; }

a.button14:after {
  content: "\bb";
  position: relative;
  bottom: 0;
  display: inline-block;
  margin-left: 1.4em;
  vertical-align: middle;
  font-family: "Times","Times New Roman","serif","sans-serif","EmojiSymbols";
  font-weight: 700;
  font-size: 140%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

img { display:block; }
a img { border:0; outline:none; }

.wrapper { position:relative; max-width:1150px; margin:0 auto; padding:1px 0 1px 0; }

.cleaFix {}
.cleaFix:after { display:block; content:""; clear:both; }

.content.cleaFix.ajax-tab-content.active-tab-content { padding:0; }





/* Header rules --------------------------------------------------- */
header { height:670px; color:#fff; background:url(../images/main_bg_0.jpg) center 0 ; background-size:100% cover; background-attachment:fixed; position:relative; overflow:hidden; }
header .wrapper { height:100%; }
header:after { display:block; position:absolute; left:50%; bottom:0; margin:0 0 0 -960px; content:""; width: 0; height: 0; border-style: solid; border-width: 0 0px 100px 1920px; border-color: transparent transparent #ffffff transparent;  }

.logo { position:absolute; top:15px; left:0; animation-delay:0s; line-height:13px; }
.logo img { display:block; margin:0; padding:0; }
.logo span { font-size:16px; text-align:center; margin:0; line-height:13px; }

.tel { position:absolute; top:15px; right:0; font-family: 'Exo 2', sans-serif; font-weight:700;  animation-delay:.3s; } 
.tel a { font-size:30px; color:#fff; text-decoration:none; transition: all 0.2s ease; -webkit-transition: all 0.2s ease;  }
.tel a:first-child { margin:0 0 10px; display:block; }
.tel a:hover { color:#fff; }
.tel span { display:block; }
.callBack { height:40px; color:#fff; position:relative; z-index:10; line-height:40px; border-radius:100px; overflow:hidden; font-size:16px; text-transform:uppercase; text-align:center; background-color:#5abfcb; }
.callBack a { display: block; text-decoration: none; cursor: pointer; user-select: none; position: relative; color:#fff; font-size:16px; }
.callBack a:hover { color:#000; }




.offer { position:absolute; top:170px; width:420px; }
.offer h2 { font-family: 'Exo 2', sans-serif; font-size:48px; line-height:48px; color:#fff; font-weight:800; text-transform:uppercase; margin:0 0 30px 0; }
.offer h2 span { display:block; }
.offer h2 span:nth-child(1) { animation-delay:.5s; }
.offer h2 span:nth-child(2) { animation-delay:.7s; }
.offer h2 span:nth-child(3) { animation-delay:.9s; }
.offer h2 span:nth-child(4) { animation-delay:1.1s; }
.offer h2 span:nth-child(5) { animation-delay:1.3s; }
.offer p { margin:0 0 30px 0; animation-delay:1.5s; }


ul.platforms { margin:0; padding:0; list-style:none; overflow:hidden; }
ul.platforms li { float:left; margin:0 70px 0 0; }
ul.platforms li span { display:none; }
ul.platforms li:before { font-size:30px; }
ul.platforms li:nth-child(1) { animation-delay:1.5s; }
ul.platforms li:nth-child(2) { animation-delay:1.8s; }
ul.platforms li:nth-child(3) { animation-delay:2.1s; }
ul.platforms li:nth-child(4) { animation-delay:2.4s; }


.optionsList { position:absolute; top:170px; right:0; width:460px; }
.optionsList ul { margin:0; padding:0; list-style:none; font-size:20px; }
.optionsList ul li { position:relative; padding:0 0 0 30px; margin:0 0 20px 0; }
.optionsList ul li:before { position:absolute; top:50%; left:0; margin:-13px 0 0 0; font-size:25px; width:25px; height:25px; }
.optionsList ul li a { color:#fff; text-decoration:none; }
.optionsList ul li:nth-child(1) { animation-delay:2s; }
.optionsList ul li:nth-child(2) { animation-delay:2.3s; }
.optionsList ul li:nth-child(3) { animation-delay:2.6s; }
.optionsList ul li:nth-child(4) { animation-delay:2.9s; }
.optionsList ul li:nth-child(5) { animation-delay:3.1s; }
.optionsList ul li:nth-child(6) { animation-delay:3.3s; }

.optionsList span.show { display:inline-block; animation-delay:3.5s; margin:0 0 0 30px; border-bottom:1px dashed #fff; cursor:pointer; position:relative; z-index:1000; }

.serviceList ul { margin:0; padding:0 20px; list-style:none; font-size:16px; }
.serviceList ul li { position:relative; padding:0 0 0 22px; margin:0 0 10px 0; }
.serviceList ul li:before { position:absolute; top:1px; left:0; margin:0; font-size:18px; width:25px; height:25px; color:#b5a68f }

.popCallBack { cursor:pointer; display:block; overflow:hidden; color:#8fbe00; font-size:16px; font-weight:500; margin:10px 20px 10px; }
.popCallBack span { display:block; float:right; border:1px solid #8fbe00; border-radius:5px; padding:2px 10px; }


/* Content rules --------------------------------------------------- */
h2.headline { text-transform:uppercase; font-size:36px; font-family: 'Exo 2', sans-serif; font-weight:300; color:#8dbb00; margin:0 0 70px; }
h2.white { color:#fff; }

.features { font-size:18px; padding:20px 0 0 0; }
.features .headline { margin:0 0 70px 0; }
.features ul { margin:0; padding:0; list-style:none; overflow:hidden; text-align:center; }
.features ul li { width:30%; display:inline-block; text-align:center; height:250px; vertical-align:top; margin:0 0 30px }
.features ul li:before { display:block; width:100%; text-align:center; font-size:80px; color:#b5a68f; margin:0 0 20px; }
.features ul li a { color:#000; text-decoration:none; display:block; }
.features ul li a:before { display:block; width:100%; text-align:center; font-size:80px; color:#b5a68f; margin:0 0 20px; }
.features ul li:nth-child(3n-1) { margin:0 3% 30px; }



.work { color:#fff; background:url(../images/main_bg_1.jpg) center center no-repeat fixed; background-size:cover; position:relative; overflow:hidden; padding:50px 0; }
.work:after, .work:before { display:block; content:""; position:absolute; left:50%; width: 0; height: 0; border-style: solid; margin:0 0 0 -960px; }
.work:before { border-width: 100px 1920px 0 0px; border-color: #ffffff transparent transparent transparent; top:0; }
.work:after { border-width: 0 0px 100px 1920px; border-color: transparent transparent #ffffff transparent; bottom:0; }

.work .wrapper { padding:70px 0 70px; height:500px; position:relative; }
.work div a { color:#fff; text-decoration:none; display:block; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.work div a:hover { color:#000; }
.work div a[class*=icon]:before { font-size:70px; display:block; margin:0 0 20px; }
.work div[class*=icon]:before { font-size:70px; display:block; margin:0 0 20px; }
.step5:before { font-size:100px !important; animation:pulse 2s ease-out infinite; }

.step1, .step2, .step3, .step4, .step5 { position:absolute; width:250px; text-align:center; z-index:1000; }
.step1 { top:190px; left:0; }
.step2 { top:75px; left:392px; animation-delay:0.8s; }
.step3 { top:361px; left:490px; animation-delay:1.6s; }
.step4 { top:95px; right:100px; animation-delay:2.2s; }
.step5 { top:368px; right:0; animation-delay:3.2s; }


.work object { position:absolute; }

.path1 { top:100px; left:168px; width:293px; animation-delay:.4s; }
.path3 { top:115px; left:583px; width:163px; animation-delay:1.2s; }
.path2 { top:77px; left:570px; width:300px; animation-delay:2s; }
.path4 { top:124px; right:12px; width:165px; animation-delay:2.6s; }
.path5 { bottom:191px; right:202px; width:276px; animation-delay:2.9s; }






.rates { background:url(../images/main_bg_2.jpg) center center no-repeat fixed; background-size:cover; overflow:hidden; position:relative; padding:50px 0 80px; }
.rates .wrapper { padding:70px 0 70px;  }
.rates:after, .rates:before { display:block; content:""; position:absolute; left:50%; width: 0; height: 0; border-style: solid; margin:0 0 0 -960px; }
.rates:before { border-width: 100px 1920px 0 0px; border-color: #ffffff transparent transparent transparent; top:0; }
.rates:after { border-width: 0 0px 100px 1920px; border-color: transparent transparent #ffffff transparent; bottom:0; }

.ratesRow { display:table; width:100%; border:0; border-collapse:collapse; margin:0 0 40px 0; font-size:16px; }
.rateBlock { display:table-cell; width:33.3333333%; text-align:center; padding:20px 0; }
.rateBlock .container { margin:0 10px; padding:30px 0 0; background-color:rgba(255,255,255,0.9); border-radius:8px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.rateBlock:hover .container { box-shadow:0 10px 45px rgba(0,0,0,.6) }

.rateBlock h3 { font-family: 'Exo 2', sans-serif; font-size:25px; color:#9c1227; font-weight:500; margin:0 0 20px 0; }
.rateBlock h3:before { display:block; font-size:70px; color:#9c1227; margin:0 0 10px; }

.rateBlock ul { text-align:left; margin:0 0 30px; list-style:none; padding:0; } 
.rateBlock ul li { display:block; border-top:1px solid #fff; padding:5px 20px 5px 40px; position:relative; min-height:25px; }
.rateBlock ul li:before { display:block; position:absolute; left:15px; top:7px; width:20px; height:20px; font-size:20px; line-height:20px; color:#5abfcb; }

.rateBlock .price { font-size:25px; font-weight:600; background-color:#5abfcb; margin:0 -6px 0; padding:10px 0; box-shadow:0 2px 5px rgba(0,0,0,0.6); position:relative; color:#fff; }

.rateBlock .container.light { position:relative; top:-50px; }
.light .price { background-color:rgba(188,27,189,.8); }
.profi .price { background-color:rgba(39,30,221,.8); }
.individ .price { background-color:rgba(180,35,18,.8); }

.differ {}

.icon-rub { font-size:20px; }
.perMonth { display:block; font-size:14px; }

.button { margin:0 auto; width:100%; padding:25px 0 25px; border-radius:0 0 5px 5px; font-size:20px; font-weight:100; color:#000; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; cursor:pointer; }
.light .button { background-color:#e4b8f1; color:#fff; }
.profi .button { background-color:#8e85ee; color:#fff; }
.individ .button { background-color:#d78683; color:#fff; }
.light .button:hover { background-color:#ad1bd9; color:#fff; }
.profi .button:hover { background-color:#271edd; color:#fff; }
.individ .button:hover { background-color:#9c1226; color:#fff; }

.single { color:#fff; }
.singleHead { display:inline-block; font-size:30px; color:#fff; font-weight:600; border-bottom:2px dashed #fff; cursor:pointer; padding:0 0 0 40px; position:relative; margin:0 0 20px 0; }
.singleHead:hover { border-bottom-style:solid; }
.singleHead:before { line-height:20px; position:absolute; top:50%; margin:-15px 0 0 0; left:0; }
.single ul { margin:0 50px 20px 0; padding:0; list-style:none; display:block; width:290px; color:#fff; text-align:left; float:left; }
.single ul li { display:block; position:relative; padding:5px 0px 5px 30px;  }
.single ul li:before { display:block; position:absolute; left:5px; top:7px; margin:0 0 0 0; width:20px; height:20px; font-size:20px; line-height:20px; }
.single .masterGo { width:290px; margin:0 auto; border:2px solid #fff; color:#fff; background:transparent; border-radius:5px; padding:5px 0; cursor:pointer; clear:both; float:right; text-align:center; }
.single .masterGo:hover { color:#000; background-color:#fff; }

.single .textBlock { overflow:hidden; width:auto; }
.single .textBlock p { margin:0 0 15px; padding:5px 0 0;  }

.listContainer { display:none; overflow:hidden; }










/* Forms rules -------------------------*/
.forms .wrapper { padding:0 0 70px; }

.forms .textBlock { float:left; width:51%; margin:0 80px 0 0; }
.forms .textBlock a[href*=tel] { font-weight:700; color:#000; text-decoration:none; display:inline-block; white-space:nowrap; }

ul.tabsHolder { overflow:hidden; padding:50px 0 0; z-index:2; list-style:none;  max-width:1150px; margin:0 auto 50px; }
ul.tabsHolder li { float:left; position:relative; font-family: 'Exo 2', sans-serif; text-transform:uppercase; margin:0 40px; }
ul.tabsHolder li br { display:none; }
ul.tabsHolder li a { display:inline-block; padding:0; color:#8fbe00; font-size:20px; font-weight:700; border-bottom:4px solid #5cceee; margin:0 0 0 0; text-decoration:none; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
ul.tabsHolder li a:hover {color:#5abfcb; }
ul.tabsHolder li.active-tab a { color:#5abfcb; border:0; }
ul.tabsHolder li:first-child { margin:0 40px 0 0; }
ul.tabsHolder li:last-child { margin:0 0 0 40px; }

ul.tabsHolder li.ui-tabs-active a { border-color:transparent; color:#5abfcb; }

ul.aspects { margin:0; padding:0; list-style:none; text-align:center; border-bottom:1px solid #ebebeb; }
ul.aspects li { display:inline-block; width:31%; margin:0 0 30px; text-align:center; vertical-align:top; }
ul.aspects li span { display:block; }
ul.aspects li:before { font-size:56px; color:#b5a68f; margin:0 0 30px; }

.formContainer { overflow:hidden; position:relative; border:1px solid #D1D1D1; padding:0 50px; }
.formContainer .requestForm, .formContainer .payForm { display:none; }
.formContainer .active { display:block; }
.other { padding:30px 50px 0; }

.formContainer .tabs { border-bottom:1px solid #D1D1D1; margin:0 -50px 30px; text-align:center; }
.formContainer .tabs span { display:inline-block; width:50%; padding:10px 0; font-size:14px; font-family: 'Exo 2', sans-serif; text-transform:uppercase; cursor:pointer; justify-content:center; }
.formContainer .tabs span.active { background-color:#D1D1D1; cursor:default; }
.formContainer a { color:#169fcc; font-weight:700; font-size:15px; text-align:center; display:block; margin:10px -50px 0; padding:20px 0 20px 0; border-top:1px solid #D1D1D1; }
.have { color:#169fcc; font-weight:700; font-size:15px; text-align:center; display:block; margin:10px -50px 0; padding:20px 0 20px 0; border-top:1px solid #D1D1D1; cursor:pointer; }
.have:hover { text-decoration:underline; }

.row { margin:0 0 20px 0; }
.row label { display:block; margin:0 0 5px; }
.row input[type=text],
.row input[type=email],
.row input[type=tel],
.row textarea { width:95%; border:1px solid #D1D1D1; padding:0 2% 0; margin:0; height:42px; font-size:16px; font-family: 'Open Sans', sans-serif; }
.row textarea { height:100px; }
.row button { width:100%; border:0; background-color:#5abfcb; font-size:18px; height:45px; border-radius:100px; text-align:center; color:#fff; text-transform:uppercase; cursor:pointer; }










.feedBacks { margin:0 0 40px 0 }
.feedBacks .wrapper { padding:70px 0; }

.sliderContainer { margin:0 64px 70px; animation-delay:.5s; }
ul.partners { margin:0 0 0; padding:0; list-style:none; }

.feeds { text-align:center; }
.feeds .feedBlock { width:30%; display:inline-block; }
.feeds .feedBlock:nth-child(2) { margin:0 3%; }
.photo {}
.photo img { display:block; margin:0 auto 10px; border-radius:200px; width:166px; }
.name { text-transform:uppercase; text-align:center; }
.company { text-align:center; font-size:16px; font-style:italic; margin:0 0 15px; }

.feedBlock:nth-child(1) .photo { animation-delay:0.7s; }
.feedBlock:nth-child(1) .name { animation-delay:.9s; }
.feedBlock:nth-child(1) .company { animation-delay:1.1s; }
.feedBlock:nth-child(1) .text { animation-delay:1.4s; }

.feedBlock:nth-child(2) .photo { animation-delay:0.9s; }
.feedBlock:nth-child(2) .name { animation-delay:1.2s; }
.feedBlock:nth-child(2) .company { animation-delay:1.5s; }
.feedBlock:nth-child(2) .text { animation-delay:1.8s; }

.feedBlock:nth-child(3) .photo { animation-delay:1.1s; }
.feedBlock:nth-child(3) .name { animation-delay:1.4s; }
.feedBlock:nth-child(3) .company { animation-delay:1.7s; }
.feedBlock:nth-child(3) .text { animation-delay:1.9s; }













.map { height:600px; position:relative; overflow:hidden; }
.map:after, .map:before { display:block; content:""; position:absolute; left:50%; width: 0; height: 0; border-style: solid; margin:0 0 0 -960px; z-index:1000; }
.map:after { border-width: 0 0px 100px 1920px; border-color: transparent transparent #ffffff transparent; bottom:0; }
ymaps.ymaps-2-1-38-map { position:relative; top:22px; }
ymaps.ymaps-2-1-38-copyrights-pane { height: 0px; bottom: auto; right: 3px; top: 135px !important; left:auto !important; width:175px !important; }
ymaps.ymaps-2-1-38-copyright.ymaps-2-1-38-copyright_logo_no { display:none !important; }

.map h2 { text-align:center;  position:absolute; top:0; z-index:100; width:100%; font-weight:600; background-color:#fff; }
.map h2:before { display:block; content:""; position:absolute; left:50%; width: 0; height: 0; border-style: solid; margin:0 0 0 -960px; z-index:1000; border-width: 100px 1920px 0 0px; border-color: #ffffff transparent transparent transparent; top:100%; }

.contactsBlock { position: absolute;
    top: 180px;
    right: 15%;
    width: 250px;
    color: #000;
    background-color: #fff;
    border-radius: 10px;
    z-index: 100;
    box-shadow: 0 10px 32px -7px rgba(0,0,0,.8);
    padding: 20px;
}
.contactsBlock h3 { text-align:center; }

.contactsBlock span { font-size:11px; font-weight:400; line-height:14px; display:block; text-align:center; }



.buttonUp { position:fixed; bottom: 150px; right:7%; font-size:40px; cursor:pointer; z-index:10000; display:none; }
.buttonUp a { display:block; width:50px; height:50px; line-height:50px; background-color:#fff; border-radius:100px; box-shadow:0 3px 10px rgba(0,0,0,.8); text-align:center; color:#ccc; text-decoration:none; opacity:.5; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
.buttonUp a:hover { color:#000; opacity:1; }
.buttonUp a:before { line-height:47px; display:block; }
.appear { display:block; }



/* Footer rules --------------------------------------------------- */
footer { padding:10px 0 30px 0; font-style:italic; font-size:15px; }
.copy { float:left; margin:25px 0 0 0; }
.footCOntacts { float:right; width:140px; text-align:right; }

footer a[href*=tel] { color:#000; }









/*---------------------------PopUps----------------------------------------------------------------*/
.popups { position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999999; color:#474747; display:none; }
.popups:after { display:block; content:""; position:fixed; top:0; left:0; width:100%; height:120%; background-color:#000; opacity:.5; z-index:-1; }
.popups .close { position:fixed; cursor:alias; width:100%; height:100%; }
.popWindow .close { position:absolute; cursor:pointer; width:28px; height:29px; left:auto; top:-32px; right:-32px; background:url(../images/cross.png) no-repeat; }

.popWindow { position:fixed; top:10%; left:25%; width:50%; height:auto; background-color:#ffffff; z-index:1000; padding:10px 0;  display:none; border-radius:7px; border:1px solid #000; box-shadow:0 5px 30px -5px #000; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
	


.popWindow h2 { text-align:center; margin:0 0 20px; }
.popWindow form { margin:0 20px; }
.popWindow .row { margin:0 0 10px 0; }
.popWindow .row label { font-size:14px; }
.popWindow .row input, .popWindow .row textarea { height:35px; border-color:#ccc; }
.popWindow .row textarea { height:101px; margin:0; }
.popWindow .row select { height:35px; width:100%; border:1px solid #ccc; }
.col { float:left; width:48%; margin: 0 2% 0 0; }
.col2 { overflow:hidden; }

.serviceList { width:60%; left:20%; }
.serviceList h3 { margin:0 0 20px 20px; }
.serviceList ul { -webkit-column-count:2; -moz-column-count:2; column-count:2; }

.termsPop { width:30%; left:35%; }





/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
	display: block; position: absolute;
	background: hsl(186, 36%, 99%);
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5);}
}