* {
	box-sizing : border-box;
	outline : none;
}

html {
/*	width : 100vw;*/
/*	overflow-x : hidden;*/
}

body {
	font-size : 12pt;
	background-color : #fff;
	color : #000;
	font-family: 'helioslight','Helvetica','sans-serif';
	padding : 0;
	margin : 0;
/*	background-image : url('../images/back.jpg');*/
	background-size : 100% auto;
	background-repeat : repeat-y;
	overflow-x : hidden;
}

body.noscroll {
	overflow : hidden;
}

body.noscroll .block {
	transform : translateX(100%);
	
}

.grid1200 {
	width : 1200px;
	margin : 0 auto; 
	padding : 0 1rem;
}

.grid1920 {
	max-width : 1920px;
	margin : 0 auto; 
}

.grid2, .grid3, .grid5, .grid6 {
	display : flex;
	padding : .5rem 0;
}

.grid2>* {
	width : 50%;
}

.grid3>* {
	width : 33%;
}

.grid5>* {
	width : 20%;
}

.grid6>* {
	width : 16%;
}

a {
	color : #0066af;
	text-decoration : none;
}

a:hover {
	text-decoration : underline;
}

.bannerTop {
	display : flex!important;
	position : relative;
	width : 100%;
	min-height : 100vh;
	height : 100%;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	background-color: #121212;
	background-image : linear-gradient(320deg, #000, #2d1d07);
	background-image : linear-gradient(320deg, #000, #212121);
	background-position : center center;
	background-repeat : no-repeat;
	background-size : cover;
}

.bannerTop .openMenu {
	font-size : 3rem;
	color : #fff;
	position : fixed;
	top : 1rem;
	left : 1rem;
	display : inline-flex;
	width : 5rem;
	height : 5rem;
	text-align : center;
	border-radius : 50%;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	z-index : 99;
	background-color : #18041d;
}

.bannerTop .logo {
	display : inline-flex;
	position : relative;
	align-items: flex-start;
	justify-content: center;
	width : 20vw;
	height : 20vw;
}

.bannerTop .logo a { display : inline-block; width : 100%;}
.bannerTop .logo a img { display : inline-block; width : 100%; height : auto;}


.bannerTop .subscript { display : flex; width : 100%; align-items : center; position : relative; z-index: 2;}
.bannerTop .subscript p { font-family : 'ER-Bukinist-1251-Bold-Italic','serif'; font-style : italic; color : #fff; font-size : 1.5rem; }
.bannerTop .subscript span { display : block; height : .15rem; flex-grow : 1; background-color : transparent; margin : 0 1rem; opacity  : 1; box-shadow : 0 0 .5rem #ff61bf; border : 1px solid #ff61bf; border-radius : .2rem;}
.bannerTop .social { display : flex; width : 100%; align-items : center; justify-content: center; position : relative; z-index: 2;}
.bannerTop .social a { font-size : 1.2rem; color : #fff; text-decoration : none; margin : 0 1rem; width : 2rem; height : 2rem; display : inline-flex; align-items : center; justify-content : center; text-align : center;}

.block {
/*	min-height : 100vh;*/
	position : relative;
	background-position : center center;
	background-repeat : no-repeat;
	background-size : 100% 100%;
	transition : transform .5s ease;
}

.block .grid1200 {
	z-index : 1;
	position : relative;
}

.block.withdeco:before {
	content : '';
	display : inline-block;
	width : 25rem;
	height : 40rem;
	background-image : url('../images/glow.png');
	background-repeat : no-repeat;
	background-size : contain;	
	top : 10%;
	position : absolute;
	background-position : right center;
}

.block.withdeco.decoleft:before {
	left : 0;
	
	transform: scaleX(-1);
}

.block.withdeco.decoright:before {
	right : 0;
	background-position : right center;
}

.block .iconSect {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
/*    position: absolute;*/
/*    top: 50%;*/
/*	width : 30rem;*/
/*	height : 30rem;*/
	background-repeat : no-repeat;
	background-size : contain;
/*	transform : translateY(-20rem);*/
	z-index : 0;
	font-size: 20rem;
}

.block.iconLeft .iconSect {
/*	left: -10rem;*/
/*	top: 10rem;*/
/*	background-position : left center;*/
}

.block.iconRight .iconSect {
/*	right: 0;*/
/*	background-position : right center;*/
}

/*.block#about {	background-image : url('../images/about.jpg');}*/

.block#about .iconSect {
/*	background-image : url('../images/about.png');*/
/*	top : 0;*/
/*	transform : translateY(0rem);*/
/*	width : 25rem;*/
/*	height : 25rem;*/
}

/*
.block#directions .iconSect {background-image : url('../images/services.png');}
.block#team .iconSect {background-image : url('../images/team.png');}
.block#clients .iconSect {background-image : url('../images/clients.png');}
.block#contacts .iconSect {background-image : url('../images/contacts.png');}
*/

.block header { text-transform : uppercase; font-family : 'heliosblack'; padding : 3rem 0;}

.block header h2 { font-size : 3rem; margin : 0; }
.block header p { font-size : 1.5rem; margin : 0; }

.block#about article { max-width : 600px; margin : 0 auto 0 0; }
.block#about article p {}
.block#about article p strong {
	font-weight: bold;
	display: block;
}


.features { display : flex; justify-content : space-around; margin : 7rem 0 1rem 0;}
.features .item { display : inline-block; position : relative; color : #d6983d; width : 33%; font-family : 'heliosblack'; text-transform : uppercase; height : 15rem;}
.features .item b {
	font-size: 3rem;
    margin-top: 3rem;
    display: inline-block;
    width: 100%;
    padding-right: 6rem;
    text-align: right;
}
.features .item p { margin : 0 0 0 3rem; text-align: right; }
.features .item i { font-size : 5rem; position : absolute; display : inline-block; right : 0rem; top : 0; width : 5rem; }
.features .item span {
	display: inline-block;
    width: 10rem;
    height: 10rem;
    background-color: #d9d9d9;
    opacity: .1;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: .25rem solid #492f09;
    z-index: -1;
/*    border-radius: 50%;*/
}

#directions nav {
	display : flex;
	flex-direction : row;
	width : 100%;
	z-index : 2;
	justify-content : space-between;
	background-color : rgba(255,255,255,0.2);
	border-radius : 0rem;
	padding : 0rem;
}

#directions .grid2 {
	flex-direction : column;
	width : 80%;
}

#directions nav a { display : inline-flex; flex-direction : column; text-decoration : none; color : #fff; justify-content : center; align-items : center; margin-bottom : 0rem; text-transform : none; width : 25%; padding : 1rem; text-align : center; position : relative; transition : background-color .5s ease;}
#directions nav a:after {
	content : '';
	display : inline-block;
	position : absolute;
	top : 100%;
	left : 50%;
	z-index : 3;
	border-top : 1rem solid rgba(255,255,255,0.3);
	border-left : 1rem solid transparent;
	border-bottom : 1rem solid transparent;
	border-right : 1rem solid transparent;
	margin-left : -1rem;
	opacity : 0;
	transition : opacity .5s ease, top .5s ease;
}

#directions nav a.selected {
	background-color : rgba(255,255,255,0.1);
}

#directions nav a.selected:after {
	top : 100%;
	opacity : 1;
}
#directions nav a span.icon { display : inline-flex; position : relative; height : auto; width : 4rem; align-items : center; justify-content : center; margin-right : 0rem;}
#directions nav a span.icon i { display : inline-block; font-size : 2rem; }
#directions nav a span.icon span { display : inline-block; position : absolute; border-radius : 50%; background-color : #fff; opacity : .3; top : 0; left : 0; width : 100%; height : 100%; transform : scale(0); opacity : 0; transition : transform .5s ease, opacity .5s ease; display : none;}
#directions nav a:hover span.icon span { transform : scale(.9); opacity : .1;}
#directions nav a.selected span.icon span { transform : scale(1); opacity : .3;}
#directions nav p { margin : 0; font-size : .9rem; margin : 1rem 0 0 0;}

#directions article { position : relative; width : 100%; z-index : 1; height : 40rem;}
#directions article .text { opacity : 0; display: inline-block; width : 100%; /*height : 70vh;*/ transition : opacity .5s ease, transform .5s ease; top : 0; position : absolute; transform : translateX(-50%); overflow-x : hidden; z-index:1; padding : 2rem 0; background-color : rgba(0,0,0,.5);}
#directions article .text nav { display : none; }
#directions article .text.visible { opacity : 1; transform : translateX(0%); z-index:2;}
#directions article .text .content {
	display : flex;
	flex-wrap : wrap;
}
#directions article .text .content span {
	display : inline-block;
	width : 25%;
	padding : 1rem;
	text-align : center;
}

#directions article .text .content span p {
	font-size : .8rem;
	color : #bdbdbd;
	margin : 0;
	padding : .5rem .5rem;
	background-color : rgba(0,0,0,0.2);
	border-radius : 1rem;
	margin-top : 1rem;
	cursor : default;
}

#directions article .text .content span i {
	font-size : 2rem;
	color : #704870;
	color : #ff61bf;
}

#directions article .links { margin-top : 2rem;}
#directions article .links a { 
	color: #fff;
    font-size: 1rem;
	display : inline-block;
	padding: .5rem 2rem;
	/* text-transform: uppercase; */
	/* text-decoration : underline; */
}

#directions article .links a+a {
	display : none;
}

#directions article .links a:hover {
	text-decoration : underline;
}

#team .persons { margin-top : 3rem;}
#team .persons .item .photo { display : inline-flex; width : 7rem; height : 7rem; overflow : hidden; border-radius : 50%; margin-right : 2rem; position: relative; flex-shrink : 0;}
#team .persons .item .photo img { display : inline-flex; width : 100%; height : 100%; overflow : hidden; object-fit : cover; position : absolute; border-radius : 50%;}
#team .persons .item .photo img+img { transform: scale(0); transition: transform .5s ease, opacity .5s ease; opacity : 0;}
#team .persons .item:hover .photo img+img { transform: scale(1); opacity : 1; }
#team .persons { padding-left : 20%; }
#team .persons .item .info p { margin : 0; }
#team .persons .item .info p.name { font-size : 1.5rem; }
#team .persons .item .info p.position { font-size : .8rem; }
#team .persons .item .info p.description { margin-top : 1rem; }

#clients { padding-bottom : 5rem; }
#clients .clients {
	width : 80%;
	margin-right : auto;
}

#clients .clients>* {
	display : inline-flex;
	padding : 1rem 1rem;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	background-color : #fff;
	margin-right : 1rem;
	z-index : 2;
	transition : transform .2s ease;
	position : relative;
}

#clients .clients>*:hover {
	/* transform : scale(1.2); */
	z-index : 3;
	box-shadow : 0 0 .5rem #000;
}

#clients .clients div p {
	color : #fff;
	display : inline-flex;
	padding : 1rem;
	align-items : center;
	justify-content : center;
	top : 100%;
	left : 0%;
	margin-left : 1rem;
	height  : calc( 100% + 1rem);
	width : 100%;
	position : absolute;
	background-color : rgba(255,255,255,1);
	background-color : #18041d;
	margin : 0;
	text-align : center;
	font-size : .9rem;
	transform : translateY(-100%);
	transition : transform .5s ease, opacity .5s ease;
	cursor : default;
	z-index : 3;
	margin-left : 0rem;
	opacity : 0;
	border : 1px solid #fff;
}

#clients .clients div p:before {
	position : absolute;
	content : '';
	border-right : 1rem solid transparent;
	border-top : 1rem solid transparent;
	border-left : 1rem solid transparent;
	border-bottom : 1rem solid #18041d;
	top : -2rem;
}

#clients .clients div:hover p {
	transform : translateY(0);
	opacity : 1;
}

#clients .clients div span {
	display : inline-flex;
	width : 100%;
	padding : 0;
	object-fit : contain; 
	/* background-color : #fff; */
	/* border-radius : 50%; */
	overflow : hidden;
		align-items : center;
	justify-content : center;
	flex-direction : column;
	margin-top : 0rem;
}

#clients .clients div span img {
	display : inline-block;
	width : 100%;
	height : auto;
	filter : grayscale(100%);
	transition : filter .5s ease;
	/* object-fit : contain;  */
	/* border-radius : 50%; */
}

#clients .clients div:hover span img {
	filter : grayscale(0%);
}

.block#contacts { 
	padding-bottom: 5rem;
/*	min-height : 40rem; background-image : url('../images/contactsBack.png'); background-position : right bottom; background-size : 30% auto; background-repeat : no-repeat;*/
}

#contacts .contacts {
	width : 100%;
	margin-left : auto;
/*	padding-left: 20%;*/
}

#contacts .contacts a {
	color : #3d2400;
}

#contacts .line {
	display : flex;
	align-items : center;
	margin-bottom : .5rem;
}


#contacts .contacts .withicon>div i,
#contacts .connect i {
	font-size : 1.5rem;
	color : #d6983d;
	width: 2rem;
	text-align: center;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	margin-right: .5rem;
}

#contacts .connect a {
	font-size : 1.2rem;
}

#contacts .social a {
	font-size : 1rem;
	width : 2.5rem;
	height : 2.5rem;
	display : inline-flex;
	align-items : center;
	justify-content : center;
}

#contacts .line p {
	margin : 0;
}

#contacts .line.small p {
	font-size : 1rem;
}

#contacts .contacts .withicon>div {
	display : flex;
}


#contacts .contacts .withicon>div span {
	margin-right : .5rem;
	font-size : .8rem;
	font-weight : bold;
}

.button {     
	display: inline-block;
    padding: .5rem 2rem;
    text-transform: uppercase;
    color: #fff;
    border: .15rem solid #2c1c07;
    font-size: 1.2rem;
    background-color: #d6983d;
    text-decoration: none !important;
    transition: background-color .5s ease;
    position: relative;
    cursor: pointer;
}

.button:hover {
	text-decoration : none;
}

.button:after {
	position: absolute;
	z-index : 0;
	content : '';
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background-color : #fff;
	opacity : 0;
	transform : scale(.1);
	transition : transform .5s ease, opacity .5s ease;
}

.button:hover:after {
	transform : scale(1);
	opacity : .1;
}

.button:hover { 
	background-color : rgba(255,255,255,0.2);
	text-decoration : none!important;
}

.links {
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction: column-reverse;
}

#directions article .links+.links {
	margin-top: 0;
}

.links p {
	font-size: .8rem;
	color : #eee;
	padding: 0;
	margin: .5rem;
}



#team .subscript {
	text-align : center;
}

#team {
	padding-bottom : 5rem;
}

#clients .clients .openFeedback {
	font-size: .8rem;
	text-transform : none;
    color: #fff;
    border: 1px solid #aaa;
    background-color: rgba(255,255,255,0.2);
}

#clients .clients .openFeedback i { 
	font-size : 2rem;
}

#clients .clients .openFeedback:hover {
	transform : none;
}

.menu {
	position : fixed;
	z-index : 999;
	top : 0;
	left : -100%;
	width : 100vw;
	height : 100vh;
	background-color : #010002;
	background-image : url('../images/banner.jpg');
	background-position : center center;
	background-repeat : no-repeat;
	background-size  :cover;
	display : flex;
	justify-content  :center;
	align-items : center;
	opacity : 0;
	transition : left .5s ease, opacity .5s ease;
}

.menu.opened {
	left : 0;
	opacity : 1;
}

.menu .closeMenu {
	font-size : 3rem;
	color : #fff;
	position : absolute;
	top : 1rem;
	left : 1rem;
	display : inline-flex;
	width : 5rem;
	height : 5rem;
	text-align : center;
	border-radius : 50%;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	z-index : 999;
}

.menu .menuGrid {
	position : relative;
	height : 40rem;
	width : 40rem;
	margin : auto;
}

.menu .menuGrid>* {
	display : inline-flex;
	width : 20rem;
	height : 20rem;
	position : absolute;
	text-align : center;
	border-radius : 50%;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}

.menu a:hover {
	text-decoration : none;
}

.menu a:after {
	position: absolute;
	z-index : 0;
	content : '';
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	border-radius : 50%;
	background-color : #fff;
	opacity : 0;
	transform : scale(.1);
	transition : transform .5s ease, opacity .5s ease;
}

.menu a:hover:after {
	transform : scale(1);
	opacity : .2;
}

.menu .menuGrid>a:nth-child(1) {top: 0; left : 0;}
.menu .menuGrid>a:nth-child(2) {top: 0; right : 0; animation-delay: 2s!important;}
.menu .menuGrid>a:nth-child(3) {top: 10rem; left : 10rem;}
.menu .menuGrid>a:nth-child(4) {bottom: 0rem; left : 0rem;}
.menu .menuGrid>a:nth-child(5) {bottom: 0rem; right : 0rem;}

.menu .menuGrid>a:nth-child(1) i, #directions nav a:nth-child(1) span.icon i {animation-delay: 1s;}
.menu .menuGrid>a:nth-child(2) i, #directions nav a:nth-child(2) span.icon i {animation-delay: 3s;}
.menu .menuGrid>a:nth-child(3) i, #directions nav a:nth-child(3) span.icon i {animation-delay: 7s;}
.menu .menuGrid>a:nth-child(4) i, #directions nav a:nth-child(4) span.icon i {animation-delay: 8s;}
.menu .menuGrid>a:nth-child(5) i {animation-delay: 6s;}

.menu .menuGrid>a:before {
	opacity : .5;
	background-color : transparent;
	box-shadow : 0 0 .5rem #ff61bf; border : 1px solid #ff61bf; border-radius : .2rem;
}

.menu .menuGrid>a:nth-child(1):before { position : absolute; transform : rotate(45deg); content : ''; height : 2px; width : 5rem; top : 15rem; left : 12.5rem;}
.menu .menuGrid>a:nth-child(2):before { position : absolute; transform : rotate(-45deg); content : ''; height : 2px; width : 5rem; top : 15rem; left : 2.5rem;}
.menu .menuGrid>a:nth-child(4):before { position : absolute; transform : rotate(-45deg); content : ''; height : 2px; width : 5rem; top : 5rem; left : 12.5rem;}
.menu .menuGrid>a:nth-child(5):before { position : absolute; transform : rotate(45deg); content : ''; height : 2px; width : 5rem; top : 5rem; left : 2.5rem;}

.menu .menuGrid>a {
	
}

.menu .menuGrid>a i {
	font-size : 5rem;
	z-index : 2;
}
.menu .menuGrid>a p {
	z-index : 2;
}

.roundButton {
	position : relative;
}

.roundButton:hover {
	text-decoration : none;
}

.roundButton:after {
	position: absolute;
	z-index : 0;
	content : '';
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	border-radius : 50%;
	background-color : #fff;
	opacity : 0;
	transform : scale(.1);
	transition : transform .5s ease, opacity .5s ease;
}

.roundButton:hover:after {
	transform : scale(1);
	opacity : .2;
}

#footer {
	min-height : 0;
	background-color: #3d2400;
	color: #d6983d;
	background-image : linear-gradient(320deg, #000, #2d1d07);
	background-position : center top;
	background-repeat : no-repeat;
	background-size : cover;
}

.grid1200.grid2 {
	padding-left : .5rem;
	padding-right : .5rem;
}

#footer .footerLinks {
	display : flex;
	flex-direction : column;
	align-items : flex-end;
	justify-content : center;
}

#footer .footerLinks a i {
	color : #ff61bf;
}

#footer .footerLinks a {
	color : #ff61bf;
	display : inline-block;
	padding : .5rem 1rem;
	border-radius : 1rem;
	background-color : rgba(0,0,0,0.2);
	transition : background-color .5s ease;
	font-size : .9rem;
}

#footer .footerLinks a:hover {
	text-decoration : none;
	background-color : rgba(0,0,0,0.5);
}

#footer.block header h2 {
	font-size : 2rem;
}

#footer.block header p {
    font-size: 1rem;
}

#footer.block header {
    padding: 2rem 0;
}


.feedback {
	position : fixed;
	z-index : 9999;
	left : -100%;
	top : 0;
	width : 100vw;
	height : 100vh;

	background-color : #353535;
	background-image : linear-gradient(320deg, #252525, #353535);
	background-image : linear-gradient(320deg, #000, #212121);
	background-size : cover;
	display : flex;
	align-items : center;
	justify-content  : center;
	opacity : 0;
	transition : left .5s ease, opacity 1s ease, background-color 1s ease;
	/* visibility : hidden; */
}

.feedback.visible {
	left : 0%;
	opacity : 1;
	/* visibility : visible; */
}

.feedback .modal {
	display : inline-flex;
	width : 100%;
	height : 100%;
	padding : 3rem;
	flex-direction : column;
/*	background-image : url('../images/feedback.png');*/
/*	background-position : left center;*/
/*	background-repeat : no-repeat;*/
	/* box-shadow : 0 0 5rem rgba(255, 211, 246, 0.5); */
	/* transform : scale(2); */
	/* transition : transform .5s ease, opacity .5s ease; */
	/* opacity : 0; */
}

.feedback .modal form {
	width: 100%;
	max-width : 40rem;
	margin : auto;
	flex-grow : 1;
	display : flex;
	flex-direction : column;
	justify-content : center;
	position: relative;
	z-index: 2;
/*	background-color : rgba(0,0,0,.1);*/
/*	padding : 3rem;*/
/*	border-radius : 1rem;*/
}

.feedback.visible .modal {
	/* transform : scale(1); */
	/* opacity : 1; */
}

.feedback .modal header a {
	color : #fff;
	display : inline-flex;
	width : 3rem;
	height : 3rem;
	align-items  :center;
	justify-content : center;
	/* margin : -.5rem -.5rem 0 0; */
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 999;
}

.feedback .modal .small {
	font-size : .7rem;
	margin-bottom : 1rem;
	color : #ccc;
	text-align : center;
}

.feedback .modal .small a {
	color : inherit;
}

.feedback header {
	text-transform: uppercase;
    font-family: 'heliosblack';
	font-size : 2rem;
	display : flex;
	justify-content : space-between;
	margin-bottom : 2rem;
	align-items : center;
}

.feedback p { margin : 0; color: #fff; }
.feedback p.title { margin: 0; color: #2b2b2b; font-size: 10rem; display: inline-block; position: absolute; top: 2rem; left: 2rem; max-width: 40%; line-height: .75;}
.feedback p#results { margin : 1rem 0 0 0; text-align : center; }
.feedback p#results i { display : inline-block; margin-right  :1rem; }
.feedback .line {
	margin-bottom : 1rem;
}
.feedback input, .feedback textarea {
	display : inline-block;
	padding : 1rem 0;
	background-color : rgba(255,255,255,0.2);
	background-color: transparent;
	border : 0;
	border-bottom : 1px solid #d6983d;
	font-family : inherit;
	width : 100%;
	font-size : 1rem;
	color : #fff;
}

.feedback *::placeholder {
	color : #ccc;
}

.feedback textarea {
	height : 10rem;
	resize : none;
}

.feedback .button {
	width : 100%;
}

footer #wadline img {
    width: 5rem;
    height: 5rem;
}

.certs { justify-content  :center; display : flex; align-items : center; }

/* css прокрутки */
.jspContainer{
overflow: hidden;
position: relative;

}

.jspPane{
position: absolute;
transition : top .2s ease;
}

.jspVerticalBar{
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    z-index: 3;
    /* background: red; */
}

.jspHorizontalBar{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}

.jspCap{
display: none;
}

.jspHorizontalBar .jspCap{
float: left;
}

.jspTrack{
	background: #64406d;
    position: relative;
    /* opacity: .5; */
    width: 2px;
    margin: 0 4px;
}

.jspDrag{
    background: #ffffff;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: top .2s ease;
    width: 6px;
    margin-left: -2px;
    border-radius: .3rem;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag{
float: left;
height: 100%;
}

.jspArrow{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}

.jspArrow.jspDisabled{
cursor: default;
background: #80808d;
}

.jspVerticalBar .jspArrow{
height: 16px;
}

.jspHorizontalBar .jspArrow{
width: 10px;
float: left;
height: 100%;
}

.jspVerticalBar .jspArrow:focus{
outline: none;
}

.jspCorner{
background: #eeeef4;
float: left;
height: 100%;
}

.jspContainer:before {
	content : '';
	display : inline-block;
	height : 2rem;
	width : 100%;
	background: linear-gradient(#130018, transparent);
	z-index : 2;
	position : absolute;
	top : 0;
	left : 0;
}

.jspContainer:after {
	content : '';
	display : inline-block;
	height : 2rem;
	width : 100%;
	background: linear-gradient(transparent,#130018);
	z-index : 2;
	position : absolute;
	bottom : 0;
	left : 0;
}

.jspPane>*:first-of-type { margin-top : 2rem; }

@media (max-width: 1200px){
	.grid1200 { width  :100%; }	
}

@media (max-width: 1024px){
	
}

@media (max-width: 768px){
	#team .persons { flex-direction : column; }
	#team .persons+.persons { margin-top : 0; }
	.persons .item { width : 100%; }
	.persons .item .info { width : 100%; }
	.grid6 { flex-wrap : wrap; padding : 0;}
	.grid6>* { width: 30%; margin-bottom : 1rem;}
	.block#contacts { padding-bottom : 3rem; background-image: linear-gradient(320deg, #000, #212121); }
	#contacts .contacts { flex-direction : column; width : 100%; margin-left : 15rem; padding : 0;}
	#clients .clients { width  :100%; margin:0; padding-right: 15rem; }
	#directions .grid2 { width: 100%; padding-right: 0;}
	.menu { left : 0; visibility : hidden;}
	.menu.opened { visibility : visible;}
	.feedback { left : 0; visibility : hidden; }
	.feedback.visible { visibility : visible; }
	body.noscroll .block {transform: translateX(0%);}
	.features .item { width : 80%; height  :12rem; }
}

@media (max-width: 425px){
	.grid2 {
		flex-direction: column-reverse;
	}

	.iconLeft .grid2 {
		flex-direction: column;
	}

	.grid2>* {
		width: 100%;
	}

	.block .grid2>div.iconblock {
		display: flex;
        justify-content: center;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
        background-image: linear-gradient(320deg, #000, #212121);
        color: #d6983d;
	}

	#contacts.block .grid2>div.iconblock {
		background-image: none;
		padding-top: 2rem;
	}

	.feedback p.title {
		z-index: 1;
		opacity: .5;
		top: 1rem;left: 1rem;
		font-size: 5rem;
		width: 100%;
	}

	#contacts.block {
		color: #fff;
	}

	.bannerTop .logo { width: 50vw; height: 50vw; }
	.block header { padding-bottom : 1rem; }
	.menu .menuGrid>a {
		display: flex;
		height: auto;
		width: 100%;
		top: 0!important;
		left: 0!important;
		position: relative;
		flex-direction: row;
		margin: 2rem 0;
		justify-content: flex-start;
	}
	
	.menu .menuGrid { width : 100%; height : 100%; }
	.menu .menuGrid>a i { font-size : 2rem; margin : 0 1rem; width : 3rem; text-align : center; }
	
	.menu .menuGrid>a:before { display : none; }
	
	.grid1200.grid2 { flex-direction : column; }
	.grid1200.grid2>* { width : 100%; }
	#footer .footerLinks { align-items : center; }
	#footer.block header { text-align : center; }
	.block .iconSect {width: 10rem; height: 10rem; font-size: 8rem; display: inline-flex; background-color: rgb(214 152 61 / 3%); border-radius: 50%;}

	.features {
		display: flex;
		justify-content: space-around;
		margin: 1rem 0 1rem 0;
		flex-direction : column;
		align-items : center;
	}
	
	.features .item { margin-bottom : 2rem; }
	#directions article .text .content span { width : 50%; }
	#directions article .text nav { display : flex; }
	#directions .grid2>nav { display : none; }
	#directions article { height : auto; }
	#directions article .text {
		opacity: 1;
		display: block;
		width: 100%;
		top: 0;
		position: relative;
		transform: translateX(0);
		padding: 0rem 0 2rem 0;
	}
	
	#directions article .text>div { display : none!important;	}
	#directions article .text.visible>div { display : flex!important; padding : .5rem; flex-direction : column;}
	
	#directions article .links { text-align : center; }
	
	#directions article nav a { width  :100%; }
	#team .persons { padding-left : 0; background-color: rgba(0,0,0,.5); padding : .5rem; margin-top : 0;}
	.persons .item { flex-direction : column; align-items : center; text-align : center; margin : 2rem 0;}
	#team .persons .item .photo { margin : 0 0 1rem 0; }
	#clients .clients { padding : 0 .5rem; justify-content : center; }
	#clients .clients>* { margin : .5rem; background-color : transparent;}
	#clients section { padding : .5rem 0; background-color: rgba(0,0,0,.5);}
	#contacts .contacts { margin-left: 0; padding: 0;}
	#contacts section {}
	#contacts .connect .line a  {
		color: #757575;
	}
	.contacts.grid2>* { width : 100%; }
	
	.feedback .modal { padding : 1rem; }
	.feedback .modal form { width : 100%; padding : 1rem; }
	
	.grid3 {
		flex-direction : column;
	}
	
	.grid3>* {
		width : 100%;
	}
	
	.grid6 {
		flex-wrap : wrap;
	}
	
	.grid6>* {
		width : 45%;
	}
}

@media (max-width: 375px){
	.grid6>* {
		width : 100%;
	}
	
	#directions article .text .content span {
		width: 100%;
	}
	
	#clients .clients div span { width : 50%; background-color : #fff; }
	
	#clients .clients div p {
		color: #fff;
		display: inline-flex;
		padding: 1rem;
		align-items: center;
		justify-content: center;
		top : 0;
		margin-left: 1rem;
		height: auto;
		width: 100%;
		position: relative;
		background-color: transparent;
		margin: 0;
		text-align: center;
		font-size: 1rem;
		transform: translateY(-0%);
		margin-left: 0rem;
		opacity: 1;
		border: 0;
	}
	
	#clients .clients div p:before { display : none; }
	.bannerTop .social { flex-wrap : wrap; justify-content  :center; }
	.bannerTop .subscript p { font-size : 1rem; }
}

@media (max-width: 320px){
	.bannerTop .logo {
		width: 80vw;
		height: 80vw;
	}
}