@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;800&display=swap');

body {font-family: 'Open Sans', sans-serif;font-size: 15px;line-height: 1.6;font-weight: 500; color: #000;}
	* {box-sizing: border-box;}
.wrapper {width:95%; max-width:1080px; margin:0 auto;}
.outer {width:95%; max-width:1200px; margin:0 auto;}
.inner {width:95%; max-width:960px; margin:0 auto;}

	a {transition:.2s}
	
.separ {display:flex; align-items:center; justify-content:center; margin-top:50px}
	.separ	i {width:70px; height:2px; display:block; background:#eee}
		.separ svg {margin:0 30px; width:50px}
			.separ svg * {fill:#eee}
			
/*breadcrumbs*/
.breadcrumbs {margin-top:20px}
	.breadcrumbs .outer {background:url(../images/bcbg.svg) right 50px center/ 50px no-repeat, #00AADA;  padding:30px 50px; box-sizing:border-box; }
		.breadcrumbs h6 {font-weight:bold; font-size:20px;color:#fff}
		
		
.header {}
	header .wrapper {padding:15px; display:flex}
		header .wrapper .logo {max-width:190px; margin-right:auto; }
			header .wrapper .logo img {display:block; width:100%}
		header .wrapper nav {display:flex; align-items:center;}
			header .wrapper nav a {display:block; padding:10px 20px;  text-decoration:none; color:#000}
				header .wrapper nav a:hover {color:#00AADA;}
				header .wrapper nav a.active {color:#00AADA; font-weight:bold}
		.header-contacts {display: flex;flex-direction: column; margin-left: 30px;}
			.header-contacts a {display:block; text-decoration:none; color:#000}
.footer {padding:0 0 10px 0}	
	.footer-bottom  {padding:15px; display:flex}
		.footer-bottom  .logo {max-width:190px; margin-right:auto; }
			.footer-bottom  .logo img {display:block; width:100%}
		.footer-contacts {display: flex;flex-direction: column; margin-left: 30px;}
			.footer-contacts a {display:block; text-decoration:none; color:#000}	
			
/*home*/
.promo  {margin-top:20px}
	.promo .outer {background:#00AADA; display:flex; padding:30px 50px; box-sizing:border-box;}
		.promo-text {display: flex;flex-direction: column; margin-right: auto;justify-content: center;}
			.promo-text h1 {font-weight:bold; font-size:60px; margin-bottom:20px; color:#fff}
			.promo-text h2 {font-weight:300; font-size:24px;color:#fff}
		.promo-img {position:relative; width:400px; flex-shrink:0; margin-left:50px}
			.promo-img span {width:10px; height:10px; position:absolute; top:50%; margin-top:-5px;  left:50%; margin-left:-5px;box-shadow: 0px 0px 180px 180px #fff;border-radius: 100%;}
			.promo-img img {display:block;position:relative;width: 100%;}
			
			
.about {padding:100px 0 50px 0;}
	.about-text {font-size:24px; font-weight:300; text-align:center;}
		.about-text strong {font-weight:bold}

			
.products-widget { padding-bottom:50px}
	.products-widget .wrapper {display:flex; justify-content:space-between}
		.products-widget-item {background-position:center; background-size:cover;min-height:400px;  padding:0 0 50px 0; width:32%;display: flex;flex-direction: column;justify-content: flex-end; text-align:center;    box-shadow: 4px 4px #00aada; text-decoration:none; color:#000 }
			.products-widget-item-text {padding:20px 10px; background:RGBA(255,255,255,0.7)}
				.products-widget-item-text h3 {font-size:20px; font-weight:bold; margin-bottom:10px}
				
				
.content  {padding:50px 0;}
	.content .wrapper {display:flex}
		.content-text {width:calc(100% - 400px); }
			.content h2 {font-weight:bold; margin-bottom:50px; font-size:20px}
			.content h3 {font-weight:bold; margin-bottom:20px}
			.content h4 {font-weight:bold; margin-bottom:10px}
				.content h3 svg {width:30px; display:inline-block;float: left; margin-right:20px}
			.content-text-separ {margin:25px 0; height:1px}
			
			
		.content-sidebar {width:350px; margin-left:50px; border-left:1px solid #eee; padding-left:50px; box-sizing:border-box;}
			.products-menu {}
				.products-menu > li > span, .products-menu > li > a {font-weight:bold;}
				.products-menu ul {padding-left:40px; margin-bottom:20px}
					.products-menu ul > li {    list-style: disc;}
					.products-menu ul ul {padding-left:20px}
					
					.products-menu a {color:#000; text-decoration:none; margin-bottom:5px; display:table}
						.products-menu a:hover {color:#00AADA;}
						.products-menu a.active {color:#00AADA; font-weight:bold}
			
			.products-menu .has-child {}
				.products-menu .has-child span {color:#000; text-decoration:none; margin-bottom:5px; display:table; cursor:pointer}
				.products-menu .has-child ul {overflow: hidden;max-height: 0;margin-bottom: 0; transition:.2s}
					.products-menu .has-child.show ul  {max-height:none; margin-bottom:20px; transition:.2s}
		
/*dev page*/
.dev  {margin-top:20px}
	.dev .outer {background:#00AADA;  padding:100px 50px; box-sizing:border-box; text-align:center}
		.dev h1 {font-weight:bold; font-size:60px; margin-bottom:40px; color:#fff}
		.dev h2 {font-weight:300; font-size:24px;color:#fff}



/*about*/		
.steps-item {display:flex; margin-bottom:30px;border-bottom: 3px solid #00AADA; padding-bottom: 30px;}
		.steps-item:last-child {border-bottom:none; padding-bottom:0}
	.steps-item img {display:block; margin-right:20px; width:260px; object-fit:cover}
	.steps-item h4 {margin-bottom:20px; font-weight:bold}
	
/*serv*/	
.services-flex {display:flex; flex-wrap:wrap; justify-content:space-between}
	.services-item {width:48%; padding:20px; box-sizing:border-box; margin-bottom:4%;border:1px solid #eee; box-shadow: 4px 4px #00aada; }
		.services-item svg {height:50px; margin:0 auto 20px auto;}
			.services-item svg * {fill:#00aada}
			
			
/*contacts*/
.contacts {margin:50px auto}
	.contacts .outer {background:#00AADA;  padding:100px 50px; box-sizing:border-box;  position:relative; overflow:hidden}
		.contacts h6 {font-weight:bold; font-size:60px; margin-bottom:40px; color:#fff}
		.contacts p {color:#fff; margin-bottom:20px}
			.contacts p a {font-weight:bold; color:#fff; text-decoration:none}
		.contacts svg {position:absolute; top:-20px; right:-20px; width:300px;transform: scale(-1, 1) }
			.contacts svg * {fill:RGBA(255,255,255,0.8)}

/*products mini*/
.mini-product-item { margin-bottom:50px}
	.mini-product-item h6 {font-weight:bold; margin-bottom:30px}
	.mini-product-item-wrapper {overflow:hidden}
		body .mini-product-item-wrapper img {display:block; margin:0 20px 20px 0; width:220px; float:left;}

.mini-product-item._center {margin:30px auto}
	.mini-product-item._center .mini-product-item-wrapper {display:flex; align-items:center}
/*products tabs*/
.products-tabs {}
	.products-tabs h3 {font-size:18px}
	.products-tabs strong {font-weight:bold}
	.products-tabs b {font-weight:bold}
	.products-tabs p {margin-bottom:20px}
	.products-tabs ul {margin:20px 0;}
		.products-tabs li {margin-bottom:5px;list-style: disc;list-style-position: inside;padding-left: 20px;}	
			.products-tabs li:last-child {margin-bottom:0}
	.products-tabs img {display:block; margin:20px auto; width:100%;}
	
	.content-table {width:100%; overflow-x:auto}
		.content-table table {margin:30px 0; min-width:500px}
			.content-table table td {border:1px solid #bbb; padding:5px}
	

.icon-set {display:flex; justify-content:space-between; margin:30px 0}	
	.icon-set-col {width:32%; }
		.icon-row {display:flex; align-items:center; margin-bottom:10px; font-size:12px}
			.icon-row img {display:block; margin:0 10px 0 0; width:30px; }
	
@media (max-width:960px)	{
header .wrapper {flex-wrap:wrap;align-items: center;}
	header .wrapper .logo {order:1}
	.header-contacts {order:2}
	header .wrapper nav {order:3; width:100%; justify-content:center; flex-wrap:wrap; margin-top:20px;}
		header .wrapper nav a {padding:7px 15px;}

.promo-img {display:none}	

.content .wrapper {display:block}
	.content-text {width:100%}
	.content-sidebar {width:100%; margin:50px 0 0 0; padding:50px 0 0 0; border:none;  border-top: 1px solid #eee}
}

@media (max-width:750px)		{
.products-widget .wrapper {display:block}
	.products-widget-item  {width:100%; margin:0 0 20px 0;    min-height: 300px;}

.steps-item {display:block}
	.steps-item img {margin:0 auto 20px auto}	
	
.services-item {width:100%}

.contacts svg * {    fill: RGBA(255,255,255,0.2);}
}
@media (max-width:480px)	{
header .wrapper .logo { max-width: 120px;}
.header-contacts{font-size:12px}

.footer-bottom .logo{ max-width: 120px;}
.footer-contacts{font-size:12px}

.contacts .outer {padding:20px;}
	.contacts h6{font-size:40px}
	
.promo .outer {padding:20px;}
	.promo-text h1 {font-size:40px}
	
.breadcrumbs .outer  {padding:20px;background-image: none;}

.about-text {font-size:18px}


body .mini-product-item-wrapper img {float:none; margin:0 auto 20px auto;}

.mini-product-item._center .mini-product-item-wrapper {display:block}

.icon-set {display:block; margin:30px 0}	
	.icon-set-col {width:100%; }
	
	
}