.logo figure{ 
	display:flex;
	align-items: center ;
 	
	width:100%;
	max-width:50%;
	height:auto;
	padding:0;
	margin:0;
	  
}

.logo h1{
	font-family: var(--font_2);
	display: block; 
	margin:0;
	padding:0;
	text-indent: -9999px;
	position:absolute;
	left:-1200vw;
	height:0;
	width:0;
	overflow:hidden  
}

.logo .st0{
	fill: var( --first_color );
}

.logo .st1{
	fill: var( --body_color );
}

#logoTop{
	display:block; 
	width:100%;
	max-width:165px;
	padding:13px 0 
	 
}

#logoTop svg{
	 
}
/*
@media (max-width: 992px) {
	>>>>>>>>>>>> ============================================ RESPONSIVE CSS 
} 
*/
#footer figure{ 
	width:100%;
	max-width:220px; 
	border-radius:50%; 
	background-color: rgba(255,255,255,1);
	padding:15px
}

#logoFootter{
	display:block;
	width: 100%;
	height:auto 
}

/* ------------------------------------------------------------------------------------------- end logo */

.page{
	min-height:50vh;
	padding-top:60px;
	padding-bottom:30px 
}

.page_baner{
	background-color: var( --first_color );
	padding: 80px 0;
	color: #fff 
}

#module-5,
.page_baner{
	position:relative
}

#module-5::before,
#module-6::before,
.page_baner::before {
	content:" ";
	
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0; 
	
	background-attachment: fixed;
	
	background-image: url(../img/bkg.svg?v=4); /*  img-bg-01.webp  | bkg-1.jpg   */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/*opacity: 0.2;*/
	/*mix-blend-mode: luminosity;*/
	transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
	/*z-index:-1*/
	
}

.page_baner::before{
	opacity: 0.2; 
	mix-blend-mode: luminosity
}
 
#module-6::before{
	opacity: 0.2;
	mix-blend-mode: luminosity
}

#module-5::before { 
	opacity: 0.05;
	mix-blend-mode: luminosity 
}

/* ============================================================================================================================================== */

#home-line-1 .title,
.page_baner h2{
	
	position:relative;
	/*
	-webkit-text-stroke: 2px rgba(0,0,0,1);
	text-shadow: 4px 4px 0 rgba(0,0,0,.35);*/
} 

.page_baner h2{
	color: var( --white_color );
	text-transform:uppercase;
	font-family: var(--font_1);
	font-size: 70px;
	font-weight: var(--font_weight_600);
	position:relative;
	z-index:2
}

/* ------------------------------------------------------------------------------------------- contacts */

.contacts{
	padding:0 15px;
	margin:30px 0;
	font-size: 85%;
	border: dotted 2px var(--body_color);
	border-radius: 5px;
}
.contacts i.fas{
	font-size:1.5em;
	margin-right:1rem
}

.contacts-page .title{ 
	margin:5px 0;
	padding:0;
	line-height:1.1
}

.contacts-page form{
	margin:20px 0 30px 0
}


/* ------------------------------------------------------------------------------------------- About us */
 
.body-about-us #as-row-1 h2.title{
	margin:0;
	padding:0;
	line-height:1.1;  
	/*font-weight: var(--font_weight_500)*/
}

.body-about-us #as-row-1 article{
	padding:30px 0 
}

#as-row-1 .color-fill{
	display:none;
	background-color:var(--first_color)
}
 

/* 
**************************************************************************
**************************************************************************
************************************************************************** elem_design_1
**************************************************************************
**************************************************************************
*/

.design1{
	overflow:hidden;
	border:solid 2px var( --body_color );
	background:none !important;
	padding:0 !important
}

.design1 > figure{
	display:block;
	width:100%;
	height:100%;
	max-width:  calc(100% - 10px) ;
	max-height: calc(100% - 10px) ;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	 
background: var(--first_color);
background: -moz-linear-gradient(left,  var(--first_color) 0%, var(--secondary_color) 100%);
background: -webkit-linear-gradient(left,  var(--first_color) 0%,var(--secondary_color) 100%);
background: linear-gradient(to right,  var(--first_color) 0%,var(--secondary_color) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--first_color)', endColorstr='var(--secondary_color)',GradientType=1 );

	
}

.elem_design_1{ 
	position:relative;
	display:block; 
	height: 100%;
} 

/* ----------------------------------- elem_design_1 decoration */

.elem_design_1 .decoration{
	display:flex;
	width:150px;
	height:150px;
	margin:auto ;
	position: absolute;
	right:0;
	bottom:15px 
}

.elem_design_1 .decoration::before,
.elem_design_1 .decoration::after{
	content:"";
	display: block;
	
	width: 100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	
	mask-position:center;
	-webkit-mask-position: center center;
 
    mask-size: contain;
	-webkit-mask-size: contain;
	
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat
}

.elem_design_1 .decoration::before{ 
	background-color: var( --first_color );
	mask-image: url(../img/img-shape-09.webp);
	-webkit-mask-image: url(../img/decoration-1.webp);
	transform:translate( -28px, 15px ) 
}
.elem_design_1 .decoration::after{ 
	background-color: var( --secondary_color );
	mask-image: url(../img/img-shape-10.webp);
	-webkit-mask-image: url(../img/decoration-2.webp) 
	
}

/* ----------------------------------- / elem_design_1 decoration */

.elem_design_1 .image{
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height:340px;
	margin-bottom:30px; 
	position: relative;
	z-index: -1;
	overflow: hidden;
	border-radius: 3% 3% 50% 3%;
	/*background-image: url(../img/about-us-1.webp);*/
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	box-shadow: -22px 46px 120px 0px rgba(0, 0, 0, 0.1);
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
} 

/* 
**************************************************************************
**************************************************************************
************************************************************************** elem_design_2
**************************************************************************
**************************************************************************
*/

.elem_design_2{ 
	position:relative;
	display:block; 
	height: 100% 
} 

/* ----------------------------------- elem_design_2 decoration */

.elem_design_2 .decoration{
	display:flex;
	width:150px;
	height:150px;
	margin:auto ;
	position: absolute;
	left: 0;
	bottom:0 
}

.elem_design_2 .decoration::before,
.elem_design_2 .decoration::after{
	content:"";
	display: block;
	
	width: 100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	
	mask-position:center;
	-webkit-mask-position: 0 center;
 
    mask-size: contain;
	-webkit-mask-size: contain;
	
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat
}

.elem_design_2 .decoration::before{ 
	background-color: var( --first_color );
	mask-image: url(../img/img-shape-09.webp);
	-webkit-mask-image: url(../img/elem_design_2-1.webp?m=1);
	
}
.elem_design_2 .decoration::after{ 
	background-color: var( --secondary_color );
	mask-image: url(../img/img-shape-10.webp);
	-webkit-mask-image: url(../img/elem_design_2-2.webp?m2) ;
	transform:translate( 35px, -10px ) 
	
}

/* ----------------------------------- / elem_design_1 decoration */

.elem_design_2 .image{
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height:340px;
	margin-bottom:30px; 
	position: relative;
	z-index: -1;
	overflow: hidden;
	border-radius: 3% 3% 3% 50%;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	box-shadow: 100px 41px 100px 0px rgba(0, 0, 0, 0.1);
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
} 

@media (min-width: 992px) {
	.elem_flex_row{
		display: flex;
	}
	
	.elem_flex_row{
		 flex: 1;
	}
	
	.body-about-us #as-row-1{
		padding-left:30px
	}
	
	.body-about-us #as-row-1 h2.title{ 
		max-width:85%;
	}
	
	.body-about-us #as-row-1 article{
		padding:40px 30px 30px 0 
	}
	
	#as-row-1 .color-fill{
		display:flex;
	
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
		border-radius:50%;
		position:relative
	}
 
  	.elem_design_1{
		padding-right:30px 
	}
}
/*
.body-about-us .row-2,
.body-about-us .row-2 div{
	min-height:100px;
	border:solid 1px red
}
*/
.body-about-us .row-2{
	background-color:var(--first_color);
	padding:50px 0;
	margin:50px 0;
	color:#fff;
	font-size: 23px;
	/*font-weight: bold */
}

.body-about-us .row-2 .title{
	margin:0;
	padding:0;
	line-height:1.1
}

.body-about-us .row-3 b,
.body-about-us .row-3 strong{
	font-weight: var(--font_weight_900)
}

.body-about-us .row-3{ 
	padding:0 0 30px 0;
	margin: 0 0 30px 0;
	font-size: 17px;
	/*font-weight: var(--font_weight_600) */
}

.body-about-us .row-3 .title{
	margin:0;
	padding:0;
	line-height:1.1
}

/* ======================================================================= Services */

/* --------------------------------------------------------------- row-1 */
.body-services .row-1{
	margin-top:50px; 
	padding:30px 0 
}

.body-services .row-1 .elem-style-1 .title{
	line-height:1;
	margin-bottom:0 
} 

.body-services .row-1 .elem_design_2 .decoration::before{ 
	background-color: var( --first_color );
	mask-image: url(../img/decoration-1.webp);
	-webkit-mask-image: url(../img/decoration-1.webp);
	transform:translate( 0, 15px ) 
}
.body-services .row-1 .elem_design_2 .decoration::after{ 
	background-color: var( --secondary_color );
	mask-image:  url(../img/decoration-2.webp);
	-webkit-mask-image: url(../img/decoration-2.webp); 
	transform:translate( 0, 0 ) 
}

/* --------------------------------------------------------------- row-3 */

.body-services .row-3,
.body-services .row-6{
	margin-bottom:30px;
	padding:30px 0
}
/*
.elem_design_1.elem_second{
	border:solid 1px red
}
*/

.row_elem_design{
	padding:30px 0;
	margin: 30px 0 
}


.elem_design_1.elem_second .decoration::before,
.elem_design_1.elem_second .decoration::after{
	width: 100px;
	height:100px;
	right:0;
	bottom:0;
	margin:0;
	padding:0 
}

.elem_design_1.elem_second .decoration::before{ 
	background-color: var( --first_color );
	mask-image: url(../img/elem-3-2.webp?m=4);
	-webkit-mask-image: url(../img/elem-3-2.webp?m=4);
	transform:translate( -20px, 80px )
	 
}
.elem_design_1.elem_second .decoration::after{ 
	background-color: var( --secondary_color );
	mask-image: url(../img/elem-3-1.webp?m=4);
	-webkit-mask-image: url(../img/elem-3-1.webp?m=4); 
	transform:translate( 0, 20px ) 
}

.body-services .row-13{
	margin-top:60px
}

/* ---------------------------------------------------------------------------------------------- CONTACTS */
/* ...................................... DESIGN FORM ERRORS */

#form_cnt{ 
	min-height:200px
}

#form_cnt .g-recaptcha{
	margin:auto
}

#form_cnt .form-group{
	position:relative
}


form .error,
form .empty {
	display: block;
	position: absolute !important;
	top: -26px;
	left: 0;
	z-index: 900;
	font-family: var(--font_1);
	font-size: calc( var(--small_text_size) * 0.7 );
	text-transform: uppercase;
	/*font-weight: 400;*/
	line-height: normal;
	letter-spacing: 1px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap !important;
	font-style: normal !important;
	padding: 6px 12px;
	border-radius:6px;
	margin: 0;
	color: #fff; 
	background-color: #f44040;
}

form .error:after,
form .empty:after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: var(--body_font_size) /*30px*/;
	width: 0;
	height: 0;
	border-color: #f44040 transparent transparent transparent;
	border-style: solid;
	border-width: calc( var(--body_font_size)/2 ) /*10px*/;
}

/* ........................... success .................................................*/
  

#success,
.success form,
.preloader_form form {
	display: none
}

.preloader_form {
	background-image: url(/assets/img/loader_small.svg) !important;
	min-height: calc( var(--body_font_size) * 10 );
	background-repeat: no-repeat;
	background-position: center center;
}

#success {
	padding: var(--body_font_size);
	background: #fff; 
	margin: var(--body_font_size) 0;
	text-align: center
}

#success article alert{
	padding: var(--body_font_size)
}

#success .btn {
	margin: var(--body_font_size) auto 0 auto
}

.success #success {
	display: block !important
}

#success h3 {
	text-align: center;
	display: block
}

.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1 
}

.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6 
}

#success .alert {
	padding: calc(var(--body_font_size)/2);
	margin-bottom: calc(var(--body_font_size)*0.6666666666666667);
	border: 1px solid transparent;
	border-radius: 4px;
}

/*
==================================================================================== ANIMATION waypoints
*/
.moove_left,
.moove_right,
.moove_botoom{
	opacity:0
}

/*
 ################################################################################### ----------------> waypoints
*/

.anim_left, .anim_right, .anim_bottom, .anim_top, .anim_opacy {
	opacity: 0
}
/* ....................................................................... anim_left 
*/
.anim_left.animate {
	-webkit-transform: translateX(-200px) scale(0.6);
	transform: translateX(-200px) scale(0.6);
	-webkit-animation: anim_left 0.8s ease-in-out forwards;
	animation: anim_left 0.8s ease-in-out forwards;
}
 @-webkit-keyframes anim_left {
 0% {
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 opacity: 1;
}
}
 @keyframes anim_left {
 0% {
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
 opacity: 1;
}
}
/* ....................................................................... anim_right 
*/
.anim_right.animate {
	-webkit-transform: translateX(200px) scale(0.6);
	transform: translateX(200px) scale(0.6);
	-webkit-animation: anim_right 0.8s ease-in-out forwards;
	animation: anim_right 0.8s ease-in-out forwards;
}
 @-webkit-keyframes anim_right {
 0% {
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 opacity: 1;
}
}
 @keyframes anim_right {
 0% {
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
 opacity: 1;
}
}
/* ....................................................................... anim_bottom 
*/
.anim_bottom.animate {
	-webkit-transform: translateY(200px) scale(0.9);
	transform: translateY(200px) scale(0.9);
	-webkit-animation: anim_bottom 0.8s ease-in-out forwards;
	animation: anim_bottom 0.8s ease-in-out forwards;
}
 @-webkit-keyframes anim_bottom {
 0% {
}
 100% {
 -webkit-transform: translateY(0) scale(1);
 opacity: 1;
}
}
 @keyframes anim_bottom {
 0% {
}
 100% {
 -webkit-transform: translateY(0) scale(1);
 transform: translateY(0) scale(1);
 opacity: 1;
}
}
/* ....................................................................... anim_top 
*/
.anim_top.animate {
	-webkit-transform: translateY(-200px) scale(0.9);
	transform: translateY(-200px) scale(0.9);
	-webkit-animation: anim_top 0.8s ease-in-out forwards;
	animation: anim_top 0.8s ease-in-out forwards;
}
 @-webkit-keyframes anim_top {
 0% {}
 100% {
	 -webkit-transform: translateY(0) scale(1);
	 opacity: 1;
	}
}
 @keyframes anim_top {
 0% {
}
 100% {
	 -webkit-transform: translateY(0) scale(1);
	 transform: translateY(0) scale(1);
	 opacity: 1;
	}
}
/* ....................................................................... anim_opacy 
*/ 
.anim_opacy.animate {
	-webkit-animation: anim_opacy 1s ease forwards;
	animation: anim_opacy 1s ease forwards;
}
@-webkit-keyframes anim_opacy {
	0% {}
	100% {
		opacity: 1
	}
}
@keyframes anim_opacy {
	0% {}
	100% {
		opacity: 1
	}
}