@import "prefixer.less";

@font-face {
	font-family: 'swp';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: local("swp"),
	url("/css_js/fonts/swp.woff2") format("woff2"),
	url("/css_js/fonts/swp.woff") format("woff"),
	url("/css_js/fonts/swp.ttf") format("ttf"),
	url("/css_js/fonts/swp.eot") format("eot");
}

@font-face {
	font-family: 'swp-bold';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local("swp-bold"),
	url("/css_js/fonts/swp-bold.woff2") format("woff2"),
	url("/css_js/fonts/swp-bold.woff") format("woff"),
	url("/css_js/fonts/swp-bold.ttf") format("ttf"),
	url("/css_js/fonts/swp-bold.eot") format("eot");
}

@font-face {
	font-family: 'swp-light';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: local("swp-light"),
	url("/css_js/fonts/swp-light.woff2") format("woff2"),
	url("/css_js/fonts/swp-light.woff") format("woff"),
	url("/css_js/fonts/swp-light.ttf") format("ttf"),
	url("/css_js/fonts/swp-light.eot") format("eot");
}

@red: #E51B21;
//@minwidth: 980px;
@minwidth: 300px;
@side-margin: 40px;
//@minwidth: 200px;

*{margin: 0; padding: 0;}
html{height: 100%; overflow-x: hidden;}
body{font-family: swp, arial; color: #7f7f7f; background: white; height: 100%; overflow-x: hidden;}
html,body{
  &.fixed{width: 100%; height: 100%; overflow: hidden;}
}
img{border: 0; line-height: 0;}
ul, ol{list-style: none;}
p a{color: white; .transition();
		&:hover{
			color: @red;
		}
	}


.clear{clear:both;}
.overflow{overflow: hidden;}

/*#ajaxLoader{position: absolute; width: 120px; height: 120px; background: url(/images/i/loader.gif) no-repeat; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; z-index: -1;}*/
#ajaxLoader{position: absolute; top: 0; left: 0; z-index: -1; height: 5px; background: @red; width: 0; /*.transition();*/}
#ajax_form_loader{text-align: center; display: none;}

/*
.html_format{
  p{margin-bottom: 0.9em; line-height: 1.71em;}
  b, strong{font-weight: 600; color: black;}
  h1, h2, h3, h4{margin-bottom: 0.9em; font-size: 23px; font-weight: 600; line-height: 26px; margin-bottom: 10px; color: black;} 
  a{color: #404F8A; text-decoration: none; border-bottom: 1px solid #97A3D5;}
  a:hover{color: #0289CD; border-color: #84C5E5;}
  ul{padding-left: 1.5em;}
  li{margin-bottom: 0.5em; list-style: disc;}
  table{border-collapse: collapse; border: 0;}
  td{padding: 10px; border:0; border-bottom: 1px solid grey;}
  tr:first-child{font-weight: 600;}
  th{font-weight: 600;}
}
*/

.html_format{
	a{color: white; .transition();}
	a:hover{color: @red;}
}

.red-btn{
  cursor: pointer; 
  font-family: swp-bold; 
  color: white; 
  font-size: 14px; 
  padding: 11px 19px 12px 19px; 
  .border-radius(20px); 
  text-decoration: none; 
  background: url(/images/i/btn_hover.jpg) no-repeat -600px 0 @red; 
  letter-spacing: 1px;
  &.blink{
	background: url(/images/i/btn_hover_blink.jpg) no-repeat -600px 0;
  }
  /*.transition(all 0.25s);
  &:hover{
	background-position: 0px 0px;
	color: #3a3a3a;
  }*/
}

.wrapper{width: 1370px; /*1000px*/ max-width: 100%; margin: 0 auto; padding: 0 10px; position: relative; .border-box(); z-index: 3;}

.header{
  position: fixed;	bottom: 0; left: 0; background: white; height: 60px; width: 100%; min-width: @minwidth; z-index: 100000;
  a{
	  color: #282828; text-decoration: none; transition: 0.2s all;
	  &:hover{
		  color: @red;
	  }
  }
  .left{position: absolute; left: @side-margin; top: 21px;}
  .right{position: absolute; right: @side-margin; top: 20px; font-size: 18px; font-family: swp-bold; color: #282828;
	.phn, .dlm, .soc{float: left; margin-left: 22px;}
	.dlm{width: 1px; height: 25px; background: #A9A9A9; margin-top: 0px;}
	.phn{line-height: 25px;
	  span{font-family: swp;}
	}
    .soc{
      .item{width: 21px; height: 17px; /*background: url(/images/i/soc.png) no-repeat;*/ float: left; margin-left: 15px; margin-top: 4px; overflow: hidden; /*.transition(background 0.2s);*/}
      .item img{display: block; max-width: 100%; max-height: 100%; margin: 0 auto;}
      a:first-child .item{margin-left: 0px;}
      .tw{
        &:hover .twitter__icon{top: -100%;}
        /*background-position: 0 0;
          &:hover{background-position: 0 -44px;}*/
      }
      .fb{
        background-position: 0 -22px;
        &:hover{background-position: 0 -66px;}
      }
      .bitrix{
        width: 20px; height: 20px; margin-left: 10px; margin-top: 3px; /*background: url(/images/sprite-1x.png) no-repeat 0 -31px;*/
        /*&:hover{background-position: 0 -62px;}*/
        &:hover .bitrix__icon{top: -100%;}
      }
    }
  }

  .menu{
	font-family: swp-bold; font-size: 16px; border-top: 1px solid #DADADA;
	ul{text-align: center;}
	ul li{
	  display: inline-block; 
	  text-transform: uppercase; 
	  //border-bottom: 7px solid white; 
	  height: 60px; 
	  .box-sizing(border-box);
	  position: relative;
	  &.active{
	  	//border-color: @red;
	  	a{color: #565656;}
	  }
	  #underline{
		background: @red;
		height: 7px;
		position: absolute;
		left: 0;
		bottom: 0;
	  }
	}
	a{color: black; text-decoration: none; padding: 10px 11px; line-height: 60px;}
	a:hover{color: #565656;}
  }
  .header__logo{max-height: 22px;}
}

.menu__hamburger{display: none; margin-right: 40px; cursor: pointer; .transition(0.15s);}
.menu__hamburger_box{position: relative; display: inline-block; width: 40px; height: 24px;}
.menu__hamburger_inner, .menu__hamburger_inner:before, .menu__hamburger_inner:after{position: absolute; width: 40px; height: 4px; background: black; border-radius: 4px; .transition-property(transform);}
.menu__hamburger_inner{top: 50%; margin-top: -2px; .transition-timing-function(cubic-bezier(.55,.055,.675,.19)); .transition-duration(.22s);}
.menu__hamburger_inner:before{content: ''; top: -10px; transition: top .1s ease-in .25s,opacity .1s ease-in; -webkit-transition: top .1s ease-in .25s,opacity .1s ease-in; -moz-transition: top .1s ease-in .25s,opacity .1s ease-in; -o-transition: top .1s ease-in .25s,opacity .1s ease-in;}
.menu__hamburger_inner:after{content: ''; bottom: -10px; transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55,.055,.675,.19); -webkit-transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55,.055,.675,.19); -moz-transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55,.055,.675,.19); -o-transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55,.055,.675,.19);}
.menu__hamburger.active{
  .menu__hamburger_inner{.transition-delay(.12s); .transition-timing-function(cubic-bezier(.215,.61,.355,1)); .rotate(225deg);}
  .menu__hamburger_inner:before{top: 0; opacity: 0; transition: top .1s ease-out,opacity .1s ease-out .12s; -webkit-transition: top .1s ease-out,opacity .1s ease-out .12s; -moz-transition: top .1s ease-out,opacity .1s ease-out .12s; -o-transition: top .1s ease-out,opacity .1s ease-out .12s;}
  .menu__hamburger_inner:after{bottom: 0; .rotate(-90deg); transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s; -webkit-transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s; -moz-transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s; -o-transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;}
}

.menu__mobile{position: fixed; left: 0; top: 0; right: 0; bottom: 60px; display: none; text-align: center; background: #fff; overflow: auto; z-index: 100000;}
.menu__mobile_inner{display: table; width: 100%; height: 100%;}
.menu__mobile_container{display: table-cell; vertical-align: middle;}
.menu__mobile_item{position: relative; padding: 15px 10px; font-family: swp-bold; font-size: 16px; color: #000; border-bottom: 1px solid #d0d0d0;}
.menu__mobile_item:first-child{border-top: 1px solid #d0d0d0;}
.menu__mobile_item a{position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.menu__mobile_phone{display: none;margin-top: 15px;}
.menu__mobile_phone{
  .phn{line-height: 25px;
    a{text-decoration: none; font-size: 18px; font-family: swp-bold; color: #282828;}
    span{font-family: swp;}
  }
}
.menu__mobile_icons{display: none; margin-top: 20px;}
.menu__mobile_icons{
  .soc{display: inline-block; margin: 0 10px; vertical-align: top;}
  .soc{
    .item{width: 21px; height: 17px; /*background: url(/images/i/soc.png) no-repeat;*/ margin-left: 15px; margin-top: 4px; .transition(background 0.2s);}
    a:first-child .item{margin-left: 0px;}
    .tw{
      /*background-position: 0 0;
      &:hover{background-position: 0 -44px;}*/
      /*.twitter__icon{background: #000;}*/
    }
    .fb{
      background-position: 0 -22px;
      &:hover{background-position: 0 -66px;}
    }
    .bitrix{
      width: 20px; height: 20px; margin-left: 10px; margin-top: 3px; /*background: url(/images/sprite-1x.png) no-repeat 0 -31px;*/
      /*&:hover{background-position: 0 -62px;}*/
      /*.bitrix__icon{background: #000;}*/
    }
  }
}

#content{height: 100%; min-width: @minwidth; min-height: 500px;}

.bg{
  z-index: 1;
}

.bg_dots{
  height: 100%;
  width: 100%;
  background: url(/images/bg_dots.png) repeat;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}
.bg_dots2{
  background: url(/images/bg_dots2.png) repeat;
}

.h1{
  text-transform: uppercase;
  font-size: 36px;
  font-family: swp-bold;
  color: white;
  text-align: center;
}

.duosmenu{
  height: 28px;
  margin: 0 auto;
  text-align: center;
  margin: 12px 0;
  font-size: 16px;
  font-family: swp-bold;
  color:#fff;
  text-transform:uppercase;
  .long_slash{
	background: url(/images/long_slash.png) no-repeat;
	display: inline-block;
	width: 23px;
	height: 1px;
	margin: 6px 13px;
  }
  .dlm{
	margin: 0 10px;
	color: #8A8A8A;
	vertical-align: top;
	font-family: swp;
  }
  a{
	color:#fff;
	font-family: swp-bold;
	text-decoration:none;
	display: inline-block;
	position:relative;
	.transition(0.3s);
	&:hover{
	  color: @red;
	  i{display:block;}
	}
  }
  i{
	position:absolute;
	top:0px;
	width:5px;
	height:4px;
	background: url("/images/whoweare/accent.png") no-repeat scroll center center transparent;
	display:none;
  }
  .acted{
	color: @red;
	i{display:block;}
  }
}



#page-whoweare{
  background:#000;
  position: relative;
  
  .bg{
	background: none repeat scroll 0 0 #000000;
	min-width: 980px;
	overflow: hidden;
	position: absolute;
	width: 100%;
  }
  .we-logo-block{
	width: 396px;
    max-width: 100%;
	margin: 0 auto;
	margin-top: 65px;
    .logo img {
      max-width: 100%;
    }
  }
  .wrapper{
	padding: 75px 10px 100px 10px;
  }
  
  .ourteam{
	color: #fff;
	width:400px;
    max-width: 100%;
	margin:0 auto;
	text-align: center;
	padding:175px 0 0;
	background: url("/images/whoweare/star.png") no-repeat scroll center 65px transparent;
	
	h2{
	  text-transform: uppercase;
	  font: 30px swp-bold;
	}
	.teamgrey{
	  color:#a3a3a3;
	}
  }
  .teamgallery{
	margin: 50px auto;
	position: relative;
	text-align: center;
	width: 960px;
    max-width: 100%;
	ul, .row{
	  height: 250px;
	  overflow: hidden;
	}
	
	.teamL, .teamR{
	  width: 22px; 
	  height: 37px; 
	  position: absolute;
	  top: 85px; 
	  cursor: pointer;
	  background-repeat: no-repeat;
	  background-image: url("/images/whoweare/arrows.png");
	  .transition();
	  &:hover{
		background-image: url("/images/whoweare/arrows_hover.png");
	  }
	}
	
	@team_margin: -50px;
	
	.teamL{
	  background-position: left;
	  left: @team_margin;
	}
	.teamR{
	  background-position: right;
	  right: @team_margin;
	}
	li{
	  display:inline-block; 
	  position: relative; 
	  text-align: center; 
	  width: 237px; 
	  vertical-align: top; 
	  margin-bottom: 20px;
	  
	  h3{
		font: 20px swp-bold; 
		color:#fff; 
		margin: 20px -20px 10px;
	  }
	  h5{
		font: 14px swp; 
		color: @red; 
		margin: 0 -20px;
	  }
	  i, img{
		position:absolute; 
		width: 157px; 
		height: 157px;
		left: 50%;
		top: 0;
		margin-left: -78px;
	  }
	  i{
		background: url("/images/whoweare/portrait.png") no-repeat scroll center 0 transparent; 
		z-index: 1;
		margin-left: -79px;
		top: -1px;
		width: 159px;
		height: 159px;
	  }
	  img{
		z-index: 0;
	  }
	  .circle_wr{
		height: 157px; 
		min-width: 1px;
	  }
	}
  }
  .we-text{
	text-align: center;
	width: 750px;
    max-width: 100%;
	margin: 0 auto;
	color: #fff;
	margin-top: 70px;
	font-size: 16px;
	h1, h2, h3, h4, h5, h6{
	  font-size: 22px;
	  font-family: swp-bold;
	  margin-bottom: 35px;
	  text-transform: uppercase;
	}
	.under-menu{
	  font-family: swp-bold; margin-top: 17px; line-height: 8px; font-size: 18px;
	  li{display: inline-block; margin: 0 7px;}
	  .dlm{width: 4px; height: 4px; background: @red; .border-radius(5px)}
	  a{
		text-decoration: none; 
		color: white; 
		.opacity(0.6);
		.transition(opacity 0.3s);
	  }
	  a:hover{.opacity(1);}
	}
  }
  .how-to-do{
	text-align: center;
  }
}


#page-bagira{
  background:#000;
  position: relative;
  min-height: 100vh;
  //padding: 0 0 100px;
  .box-sizing(border-box);
  .wrapper{
	padding: 75px 10px 100px 10px;
  }
  .code_blocks{
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 1024px;
	margin-left: -512px;
//	.opacity(0.9);
	img{
	  position: absolute;
//	  .transition(0.2s ease-out 0.5s);
	}
  }
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	
  }
  .we-logo-block{
	width: 184px; 
	margin: 0 auto;
	margin-top: 65px;
  }
  
  .ourteam{color:#fff;width:400px;margin:0 auto;text-align: center;padding:175px 0 0;background: url("/images/whoweare/star.png") no-repeat scroll center 65px transparent;
	h2{text-transform:uppercase;font:30px swp-bold;}
	.teamgrey{color:#a3a3a3;}
	
  
  }
  .we-text{
	min-height: 180px;
	text-align: center;
	width: 750px;
    max-width: 100%;
	margin:70px auto 50px;
	color:#fff;
	font-size: 16px;
	h1, h2, h3, h4, h5, h6{
	  font-size: 22px;
	  font-family: swp-bold;
	  margin-bottom: 35px;
	  text-transform: uppercase;
	}
	.under-menu{
	  font-family: swp-bold; margin-top: 17px; line-height: 8px; font-size: 18px;
	  li{display: inline-block; margin: 0 7px;}
	  .dlm{width: 4px; height: 4px; background: @red; .border-radius(5px)}
	  a{
		text-decoration: none; 
		color: white; 
		.opacity(0.6);
		.transition(opacity 0.3s);
	  }
	  a:hover{.opacity(1);}
	}
  }
  .how-to-do{
	text-align: center;
  }
}

body > ymaps{
    top: 0!important;
}
#page-contacts{
  background:#000;
  position: relative;
//  padding: 0 0 100px;
  .box-sizing(border-box);
  
  #map_canvas{
    position: relative;
	width: 100%;
	height: 500px;
	z-index: 100;
//	background: grey;
  }
  
  .columns{
	color: white;
	text-align: center;
    margin-top: -20px;
	padding: 60px 0 80px 0;
	.col{
	  display: inline-block;
	  width: 280px;
	  margin: 20px 20px 0;
	  vertical-align: top;
	  .icon{
		width: 108px;
		height: 108px;
		margin: 0 auto;
		margin-bottom: 30px;
		position: relative;
        text-align: center;
        line-height: 103px;
        border-radius: 50%;
        background: #e51b21;
	  }
      .icon img{
        max-height: 30px;
        vertical-align: middle;
      }
	  .title{
		font-size: 20px;
		text-transform: uppercase;
		margin-bottom: 10px;
		font-family: swp-bold;
	  }
	  .text{
		font-size: 16px;
	  }
	}
	a{
	  color: white;
	  &:hover{
		color: @red;
	  }
	}
  }
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;

  }
  .page_contacts_wr{
	padding: 75px 0 0 0;
  }
  .page_contacts_text{
	margin: 40px auto;
	width: 500px;
    max-width: 100%;
	font-size: 16px;
	text-align: center;
	color: white;
  }
}




#page-write-us{
  background:#000;
  position: relative;
  padding: 0 0 100px;
  min-height: 100%;
  color: white;
  .box-sizing(border-box);
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;

  }
  .form{
	margin: 40px auto;
	width: 445px;
    max-width: 100%;
  }
  .page_write_us_wr{
	padding: 75px 0 0 0;
  }
  .scale{
	.user-select(none);
	width: 445px;
    max-width: 100%;
	height: 51px;
	background: url(/images/write_us/scale.png) no-repeat;
	position: relative;
	margin-top: 70px;
	.min, .max{
	  position: absolute;
	  font-size: 14px;
	  color: #a1a1a1;
	  top: -3px;
	}
	.min{
	  left: 5px;
	}
	.max{
	  right: 5px;
	}
	.arrow{
	  background: url(/images/write_us/arrow.png) no-repeat;
	  width: 23px;
	  height: 13px;
	  position: absolute;
	  bottom: -13px;
	  left: 100px;
	  cursor: e-resize;
	}
  }
  .scale_text{
	.user-select(none);
	margin: 30px 0 42px 0;
	font-size: 16px;
	b{
	  font-size: 24px;
	  font-family: swp-bold;
	  font-weight: normal;
	}
  }
  .scale_select{
    display: none;
  }
  .notice{
	margin-top: 45px;
	text-align: center;
	color: @red;
	&.green{
	  color: #22CF1A;
	}
  }
}




#page-agency{
  background:#000;
  position: relative;
//  padding: 0 0 100px;
  .box-sizing(border-box);
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
  }
  .page_agency_wr{
	padding: 100px 0 150px 0;
  }
  .we-logo-block{
	width: 184px;
	margin: 0 auto;
	margin-top: 90px;
  }

  .we-text{
	text-align: center;
	width: 750px;
	margin:70px auto 50px;
	color:#fff;
	font-size: 16px;
	h1, h2, h3, h4, h5, h6{
	  font-size: 22px;
	  font-family: swp-bold;
	  margin-bottom: 35px;
	  text-transform: uppercase;
	}
	.under-menu{
	  font-family: swp-bold; margin-top: 17px; line-height: 8px; font-size: 18px;
	  li{display: inline-block; margin: 0 7px;}
	  .dlm{width: 4px; height: 4px; background: @red; .border-radius(5px)}
	  a{
		text-decoration: none;
		color: white;
		.opacity(0.6);
		.transition(opacity 0.3s);
	  }
	  a:hover{.opacity(1);}
	}
  }
  .how-to-do{
	margin-top: 110px;
	text-align: center;
  }
}

#page-lesson{
  background:#000;
  position: relative;
   min-height: 100%;
   color: white;
  .wrapper{
	padding: 100px 0 150px 0; min-height: 100%;
  }
  .lesson_h1{font-size: 36px; max-width: 600px; margin: 45px auto; text-align: center; text-transform: uppercase;}
  .lesson_wr{max-width: 950px; margin: 0 auto;}
  .lesson_content{
	max-width: 800px;
	margin: 0 auto;
	font-size: 16px;
	p{line-height: 1.5em; margin-bottom: 0.6em;}
	h1, h2, h3, h4, h5, h6{margin-bottom: 0.6em;}
	li{margin-bottom: 10px;}
	ol{padding-left: 20px; list-style: decimal; font-family: swp-bold;}
	ol li{color: @red; font-family: swp-bold;}
	ol li span{color: white; font-family: swp;}
	.wide_img{margin-left: -75px;}
  }
}


#page-site-create{
  background:#000;
  position: relative;
//  padding: 0 0 100px;
  .box-sizing(border-box);
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
  }
  .wrapper{
	padding: 75px 10px 150px;
  }
  .we-logo-block{
	margin: 0 auto;
	margin-top: 90px;
	text-align: center;
  }

  .we-text{
	text-align: center;
	width: 750px;
    max-width: 100%;
	margin:70px auto 50px;
	color:#fff;
	font-size: 16px;
	h1, h2, h3, h4, h5, h6{
	  font-size: 22px;
	  font-family: swp-bold;
	  margin-bottom: 35px;
	  text-transform: uppercase;
	}
	  ul {
		  li:before{content: ''; position: relative; top: -1px; display: inline-block; width: 5px; height: 5px; vertical-align: middle; background: #fff; border-radius: 50%; margin-right: 5px;}
	  }
	.under-menu{
	  font-family: swp-bold; margin-top: 17px; line-height: 8px; font-size: 18px;
	  li{display: inline-block; margin: 0 7px;}
	  .dlm{width: 4px; height: 4px; background: @red; .border-radius(5px)}
	  a{
		text-decoration: none;
		color: white;
		.opacity(0.6);
		.transition(opacity 0.3s);
	  }
	  a:hover{.opacity(1);}
	}
  }
  .how-to-do{
	margin-top: 110px;
	text-align: center;
  }
}

/*********************************************/
/*********************************************/
/*********************************************/
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #282828;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
/*********************************************/
/*********************************************/
/*********************************************/

#page-portfolio{
	
  .portfolio__show_more{
	  opacity: 0;
	  padding: 20px;
	  text-align: center; font-size: 20px; font-weight: bold; text-transform: uppercase; cursor: pointer;
	  transition: all 0.4s;
	  &:hover{color: @red;}
  }
	
  background:#000;
  
  position: relative;
//  padding: 0 0 100px;
  color: black;
  .box-sizing(border-box);
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	background: white;
  }
  .wrapper{
	padding-top: 100px;
  }
  .we-text{
	text-align: center;
	width: 750px;
    max-width: 100%;
	margin:0 auto 50px;
	.center{
	  font-size: 16px; 
	  font-family: swp;
	  letter-spacing: 1px;
	}
  }
  .duosmenu{
	color: black;
	a{
	  color: black;
	  &.acted{
		color: @red;
	  }
	  &:hover{
		color: @red;
	  }
	}
	i{
	  background: url(/images/portfolio/accent.png) no-repeat;
	}
  }
  .h1{
	color: black;
  }
  .portfolio_list{
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	.border-box();
	padding: 0 @side-margin 80px @side-margin;
	z-index: 3;
	a{
	  color: black;
	}
	img{
	  line-height: 0;
	}
	.item{
	  position: relative;
	  line-height: 0;
	  width: 25%;
	  overflow: hidden;
	  float: left;
	  .desc{
		text-align: center;
		line-height: normal;
		background: white;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		.border-box();
		padding: 25px 70px 20px 70px;
		.title{
		  font-size: 18px;
		  font-family: swp-bold;
		  text-transform: uppercase;
		  line-height: 28px;
		}
		.dlm{
		  border-top: 1px solid #BEBEBE;
		  height: 0px;
		  width: 123px;
		  display: inline-block;
		  margin: 15px 0 12px 0;
		}
		.type{
		  font-size: 14px;
		}
	  }
	}
  }
}


#page-clients{
  background:#000;

  position: relative;
//  padding: 0 0 100px;
  color: black;
  .box-sizing(border-box);
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	background: white;
  }
  .wrapper{
	padding-top: 100px;
  }
  .we-text{
	text-align: center;
	width: 750px;
    max-width: 100%;
	margin:0 auto 50px;
	.center{
	  font-size: 16px;
	  font-family: swp;
	  letter-spacing: 1px;
	}
  }
  .duosmenu{
	color: black;
	a{
	  color: black;
	  &.acted{
		color: @red;
	  }
	  &:hover{
		color: @red;
	  }
	}
	i{
	  background: url(/images/portfolio/accent.png) no-repeat;
	}
  }
  .h1{
	color: black;
  }
  .clients_list{
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	.border-box();
	padding: 0 @side-margin 60px @side-margin;
	z-index: 3;
	a{
	  color: black;
	}
	img{
	  line-height: 0;
	}
	.item{
	  a{
		height: 100%;
		width: 100%;
		display: block;
		text-decoration: none;
	  }
	  position: relative;
	  line-height: 0;
	  width: 25%;
	  overflow: hidden;
	  float: left;
	  height: 175px;
	  text-align: center;
	  vertical-align: middle;
	  margin-bottom: 39px;
	  &:hover{
		background: #E8EDF0;
	  }
	  img{
		display: inline-block;
        max-width: 98%;
        max-height: 100%;
		vertical-align: middle;
	  }
	  .helper {
	  	display:inline-block;
		vertical-align:middle;
		height:100%;
		width:0px;
	  }
	}
  }
}



#page-case{
  background:#000;
  position: relative;
//  padding: 0 0 100px;
  color: black;
  
  .case_prev, .case_next{
	position: fixed; 
	top: 60px; 
	color: black; 
	z-index: 100; 
	overflow: hidden; 
	.transition(0.3s); 
	margin-top: -24px;
	height: 49px;
	width: 50px;
	line-height: 49px;
	text-decoration: none;
	span{
		text-decoration: none; color: white; font-size: 18px; white-space: nowrap;
	}
  }
  .case_prev{left: @side-margin; background: url(/images/case/arrow_left.png) left no-repeat;}
  .case_prev:hover{background: url(/images/case/arrow_left_hover.png) left no-repeat; width: 115px;}
  .case_prev span{margin-left: 50px; float: left;}
  .case_next{right: @side-margin; background: url(/images/case/arrow_right.png) right no-repeat;}
  .case_next:hover{background: url(/images/case/arrow_right_hover.png) right no-repeat; width: 115px;}
  .case_next span{margin-right: 50px; float: right;}
  
  .border-box();
  .bg{
	width: 100%;
	min-width: 980px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	background: white;
  }
  .wrapper{
	text-align: center;
	padding-bottom: 80px;
	.case_logo{
	  margin-bottom: 40px;
	}
    .case_logo img{
      max-width: 100%;
    }
	.case_h1{
	  font-family: swp-bold;
	  font-size: 30px;
	  margin-bottom: 22px;
	}
	.case_text_under_h1{
	  font-size: 14px;
	  margin: 0 auto;
	  margin-bottom: 20px;
	  width: 450px;
      max-width: 100%;
	  a{
	    color: black;
		&:hover{
			color: @red;
		}
	  }
	}
	.case_site_link{
	  font-size: 14px;
	  margin: 35px 0;
	  a{
		.transition(0.2s);
		color: @red;
		padding: 5px 0 8px 0;
		border: 1px dashed #CCCCCC;
		border-left: 0;
		border-right: 0;
		text-decoration: none;
		&:hover{
		  color: black;
		}
	  }
	}
	.simple_center_text{
	  margin: 0 auto;
	  width: 650px;
      max-width: 100%;
	  font-size: 16px;
	}
	.slider{
	  margin: 40px auto 60px auto;
	  width: 735px;
      max-width: 100%;
	  height: 444px;
	  background: url(/images/case/macbook.png) no-repeat;
	  position: relative;
	  .inner{
		overflow: hidden; 
		position: absolute;
		top: 25px;
		left: 89px;
		height: 350px;
		width: 559px;
		.inner_wr{
		  width: 10000px;
		  height: 350px;
		}
		.item{
		  height: 350px;
		  width: 559px;
		  overflow: hidden;
		  float: left;
		}
	  }
	  .circles{
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: -20px;
		cursor: default;
		.item{
		  display: inline-block;
		  width: 10px;
		  height: 10px;
		  margin: 0 4px;
		  .border-radius(10px);
		  background: #B2B2B2;
		  cursor: pointer;
		  .transition(0.3s);
		  &:hover, &.active{
			background: @red;
		  }
		}
	  }
	  .lbtn, .rbtn{
		.user-select(none);
		position: absolute;
		width: 28px;
		height: 28px;
		background-image: url(/images/case/slider_arrows.png);
		background-repeat: no-repeat;
		top: 190px;
		cursor: pointer;
		.transition(0.3s);
		&:hover{
		  background-image: url(/images/case/slider_arrows_hover.png);
		}
	  }
	  .lbtn{
		left: -5px;
		background-position: left;
	  }
	  .rbtn{
		right: -5px;
		background-position: right;
	  }
	}
	.tasks{
	  margin: 65px 0;
	  .mini_logo{
		margin-bottom: 15px;
	  }
      .mini_logo img {
        max-width: 100%;
      }
	  .title{
		width: 800px;
        max-width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
		font-size: 30px;
		font-family: swp-bold;
		letter-spacing: 4px;
		text-transform: uppercase;
		background: url(/images/case/red_line.png) 0 21px repeat-x;
		text-align: center;
		.inner{
		  background: white;
		  padding: 0 20px;
		  display: inline-block;
		}
	  }
	}
	.three_cols{
	  text-align: center;
	  margin: 25px 0 100px 0;
	  .col{
		display: inline-block;
		width: 270px;
		margin: 35px 25px 0;
		font-size: 16px;
		vertical-align: top;
		.num{
		  margin: 0 auto;
		  font-size: 32px;
		  font-family: swp-bold;
		  margin-bottom: 15px;
		  width: 43px;
		  height: 49px;
		  color: white;
		  line-height: 39px;
		  background: url(/images/case/num.png) no-repeat;
		}
	  }
	}
	.simple_center_h1{
	  width: 800px;
      max-width: 100%;
	  margin: 0 auto;
	  margin-bottom: 20px;
	  font-size: 30px;
	  font-family: swp-bold;
	  letter-spacing: 4px;
	  text-transform: uppercase;
	  text-align: center;
	}
	.screenshots{
	  .title{
		font-size: 18px;
		margin-bottom: 20px;
	  }
	  .img{
		display: inline-block;
		padding: 4px;
		background: white;
		.box-shadow(0 0 23px #838383);
		line-height: 0;
	  }
      .img img{max-width: 100%;}
	  .item{
		margin-bottom: 77px;
	  }
	}
  }
}



#page-404{
  min-height: 100%; 
  position: relative;
  .bg{
	width: 100%; 
	min-width: @minwidth; 
	height: 100%; 
	overflow: hidden; 
	position: absolute; 
	z-index: -1;
	background-color: black;
	background-image: url(/images/404/404.png);
	background-repeat: no-repeat;
	background-position: center center;
//	min-height: 550px;
  }
  .logo-block{
	width: 188px; 
	margin: 0 auto;
	.red-line{
	  background: none; 
	  width: 100%; 
	  height: 5px;
	}
	.logo{
	  margin-top: 72px;
	}
  }
  .main-text{
	color: white; 
	display: block;
    width: 100%;
	/*max-width: @minwidth;*/
	white-space: nowrap;
  }
  .how-to-do{
	text-align: center;
	position: relative;
	width: 100%;
	position: absolute;
	top: 86%;
	margin-top: -50px;
  }
  .red-btn{
	display: inline-block;
	width: 200px;
  }
}



#page-home{
  height: 100%; position: relative;
  .bg{width: 100%; min-width: @minwidth; height: 100%; overflow: hidden; position: absolute; z-index: -1;}
  //.bg img{min-height: 100%;}
  .logo-block{
	width: 188px; margin: 0 auto;
	.red-line{
	  background: @red; width: 100%; height: 5px;
	}
	.logo{
	  margin-top: 72px;
      img{max-width: 188px;}
	}
  }
  .main-text_outer{display: table; width: 100%;}
  .main-text{
	text-align: center; color: white; display: table-cell; vertical-align: middle; width: 100%;/* max-width: @minwidth;*/ white-space: nowrap;
	.top{
	  font-size: 20px; font-family: swp-light; letter-spacing: 1px;
	}
	.center{
	  font-size: 80px; font-family: swp-bold; letter-spacing: 6px; text-transform: uppercase;
	}
	.under-menu{
	  font-family: swp-bold; margin-top: 17px; line-height: 8px; font-size: 18px;
	  li{display: inline-block; margin: 0 7px;}
	  .dlm{width: 4px; height: 4px; background: @red; .border-radius(5px); margin-bottom: 3px;}
	  a{
		text-decoration: none; 
		color: white; 
		.opacity(0.6);
		.transition(opacity 0.3s);
	  }
	  a:hover{.opacity(1);}
	}
  }
  .how-to-do{
	text-align: center;
  }
  .present, .showreel{
	position: absolute; top: 78px; color: white; font-size: 14px; cursor: pointer; width: 120px;
  	.ico{float: left; margin-right: 8px; margin-top: 1px;}
	.opacity(0.8);
	.transition(opacity 0.2s);
	z-index: 100;
	width: 125px;
	&:hover{
	  .opacity(1);
	}
  }
  .present{
	right: @side-margin;
	.ico{margin-top: 2px;}
  }
  .showreel{
	left: @side-margin;
  }
}

@-webkit-keyframes opacity {
  from {
	.opacity(1);
  }
  70% {
	.opacity(0.2);
  }
  to {
	.opacity(1);
  }
}

@keyframes opacity {
  from {
	.opacity(1);
  }
  70% {
	.opacity(0.2);
  }
  to {
	.opacity(1);
  }
}

#page-howtodo{
  height: 100%;
  .scroll-arrows{
	position: fixed;
	left: 50%;
	bottom: 90px;
	margin-left: -11px;
	width: 21px;
	height: 33px;
	z-index: 100;
	.item{
	  width: 21px;
	  height: 11px;
	  background: url(/images/i/scroll_arrow.png) no-repeat;
	  .animation-duration(1.8s);
	  .animation-name(opacity);
	  .animation-iteration-count(infinite);
	}

	.item:nth-child(1){
	  .animation-delay(0.4s);
	}
	.item:nth-child(2){
	  .animation-delay(0.8s);
	}
	.item:nth-child(3){
	  .animation-delay(1.2s);
	}
  }
  .scroll-arrows--up{
    top: 40px;
    bottom: auto;
    display: none;
    .rotate(180deg);
  }
  .slider{
	height: 100%;
	overflow: hidden;
	position: relative;
	.item{
	  position: absolute; max-width: 100%; height: 100%; overflow: hidden;
	  img{line-height: 0;}
	  .center{
		position: absolute;
		top: 50%;
		width: 100%;
		color: white;
		text-align: center;
		.number{
		  font-size: 35px;
		  font-family: swp-bold;
		  width: 48px;
		  height: 48px;
		  border: 6px solid white;
		  border: 6px solid rgba(255, 255, 255, 0.5);
		  .border-radius(50px);
		  display: inline-block;
		}
		.main{
		  text-transform: uppercase;
		  font-size: 80px;
		  font-family: swp-bold;
		  margin-top: 55px;
		}
		.desc{
		  font-size: 24px;
		  .opacity(0.7);
		  letter-spacing: 2px;
		  margin-top: 15px;
		}
	  }
	}
  }
  .circle-menu{
	position: fixed;
	top: 50%;
	right: 60px;
	z-index: 100;
	padding: 2px 12px;
	.border-radius(37px);
	background: url(/images/i/trans_white_bg.png);
	.item{
	  width: 15px;
	  height: 15px;
	  background: white;
	  .opacity(0.5);
	  margin: 15px 0;
	  cursor: pointer;
	  .border-radius(15px);
	  .transition(opacity 0.3s);
	  &:hover{
		.opacity(1);
	  }
	}
	.active{
	  background: @red;
	  .opacity(1);
	}
  }
  
  .htd_red_btn{
	margin-top: 120px;
	display: inline-block;
  }
}


/* form styles */
.form_line{
  margin-bottom: 32px;
}
.form_line_text a{color: #fff; .transition(0.3s);}
.form_line_text a:hover{color: @red;}

button, input[type="text"], input[type="password"], select, textarea{
  border: 0;
  outline: 0;
}

input[type="text"], input[type="password"], select, textarea{
  width: 100%;
  .border-box();
  font-size: 13px;
  font-family: swp-bold;
  color: black;
  padding: 7px 6px;
  border: 2px solid transparent;
  &.vr-error{
	border: 2px solid @red;
  }
  &.vr-correct{
	border: 2px solid #16C916;
  }
}

textarea{
  min-height: 175px;
  resize: vertical;
}

/*select.disabled{
  color: #A9A9A9;
}*/

.file_btn{font-size: 14px; color: #333333; cursor: pointer; background: white; border-radius: 20px; padding: 6px 15px 7px 15px; display: inline-block; font-family: swp-bold;}
.file_btn:hover{color: black;}
.file_path{display: inline-block; margin-left: 10px;}
#form_write_us input[type="file"]{.opacity(0); position: fixed; left: -9999px;}

.ny{background:black url(/images/i/garland.png) repeat-x;
    .menu{border-top:0;
        a{color:white;}
	}
    .right{
	  .phn{color:white;
	    span{.opacity(0.6);}
	  }
	  .soc{
	    .item{background: url(/images/i/soc2.png) no-repeat;}
	  }
    }
}

div.simple_center_text > p > a {
	position: relative;
	color: #000; .transition();
	text-decoration: underline;
	&:hover {
		color: @red;
		/*&:before {
          background-color: @red;
			visibility: visible;
			.transform(scaleX(1));
		}*/
	}
	/*&:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 1px;
		bottom: 0;
		left: 0;
		background-color: #000;
		*//*visibility: hidden;
		.transform(scaleX(0));*//*
		.transition(all 0.3s ease-in-out 0s);
	}*/
}

.twitter__icon{position: relative; top: 0; display: block; width: 21px; height: 17px; margin: 0 auto; background: url(/images/twitter.svg) center center; background-size: cover; .transition(0.2s);}
.twitter__icon:last-child{background: url(/images/twitter-hov.svg) center center; background-size: cover;}
.bitrix__icon{position: relative; top: 0; display: block; width: 20px; height: 20px; margin: 0 auto; background: url(/images/bitrix-b.svg) center center; background-size: cover; .transition(0.2s);}
.bitrix__icon:last-child{background: url(/images/bitrix.svg) center center; background-size: cover}