@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=cyrillic');

/* общие настройки - начало */
*	{ 
	margin: 0;
	/* margin-left: 1%; */
	padding: 0;
	font-size: 1rem;
	color: #000;}
	

body {
	width: 100%;
	font-family: Roboto,  Arial, sans-serif;
	direction: ltr;
 background-color:grey; 
    opacity: 1;
	/* background: #fcc; */}

/* for OLD IE */
#top1__hidden-for-mobile{
	display: flex;
    flex-direction: row;
    width: 100%;
    float: left;
    height: 50px;
    /* margin: 5px; */
    color: black;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(176, 176, 177);
}
div.toPart1>img{
	
    width: 200px;
    margin: 30px 0;
    padding: 30px 0;

}

  .toPart1, .toPart2, .toPart3, .toPart4 {
    padding-left: 3%;
 
}  
div.toPart4{
	padding-right: 5%;
}
/* span.topspan{
	color: white;
} */
#top1mobile,#top2mobile,#top3mobile{display: none;}
main {
	display: block;}

img	{
	/* исправляем 'глюки' гартинок */
	vertical-align: top;
	border: 0;}

.two-columns-elements-of-equal-width__container, 
.three-columns-elements-of-equal-width__container {
	display: -ms-flexbox; /* for IE10 */
	display: flex;
	justify-content: space-between;
	padding-top: 30px;
	padding-bottom: 30px;
	/* border: 2px dashed #000; */
	}

.two-columns-elements-of-equal-width__element {
	width: calc(50% - 30px);
	display: inline-block; /* */
	  border: 2px solid #000; 
	  border-radius: 15px;
	  background-color:#f5f3f3;
	  gap: 5%;
	}

.three-columns-elements-of-equal-width__element {
	width: calc(100% / 3 - 40px / 3);
	display: inline-block; /* */
	/* border: 2px solid #000; */
	border-radius: 0px;
background: #f1f1f1;
box-shadow:  7px 7px 7px #9a9a9a,
             -7px -7px 7px #ffffff;
	}
a.active{
	color: greenyellow !important
}
.display-block {
	display: block;}

.margin-bottom-16px {
	margin-bottom: 16px;}

.margin-bottom-50px {
	margin-bottom: 50px;
    margin-right: 30px;
	margin-top: 70px;}

.font-size-1-5rem {
	font-size: 1.5rem;}

.font-size-2rem {
	font-size: 2rem;}

.color-white {
	color: #fff;}

.text-align-center {
	text-align: center;}

.font-weight-700 {
	font-weight: 700;}

.border-1px-solid-ccc {
	border: 1px solid #ccc;}

.background-white {
	background: #fff;
border:1px solid #00600f }

/* фон блоков 'about-specialists-content__text', маркированные списки из блока 'Packages' */
.background-f1f1f1 {
	background: #f1f1f1;}

/* элемент списка 'Basic' из блока 'Packages' */
.background-616161 {
	background: #616161;}

/* фон блока footer, элемент списка 'Pro' из блока 'Packages', правой кнопки 'Sing Up', кнопки 'Send Message' */
.background-f44336 {
	text-align: center;
    color: #fff;
    border: 0;
    padding: 12px 24px;
    cursor: pointer;
    background-color: #0fe330;
    background: linear-gradient(135deg, rgb(0 96 15 / 95%), #dbf7df);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border-radius: 20px; */
    border: 1px solid rgb(0 96 15 / 85%);
    box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%);}

.opacity-0-60 {
	opacity: 0.60;}
/* общие настройки - завершение */


#root {
	min-width: 940px;
	background-color: rgb(204 204 204 / 95%);}

header {
	width: 100%;
	z-index: 1000;
	position:sticky;
	left: 0;
	top: 0;	
	box-sizing: border-box;
	padding:  0 0 0 0;
	height: 150px;
	background-color: #3b3937;}
	a:link{
		color:#016724;
	}
	a:visited{color:#016724}
    a:hover{color:#04da19}
    a:active{color:#03ab1c}
a{text-decoration: none;}
img.logo {
	color: #fff;
	height:100px;
	width: 100px;
	top: 15px;
    left: 32px;
    position: absolute;
	}
div.toPart2>img{
	width: 25%; padding: 5%;	
}

div.toPart3>img{
	width: 25%; padding: 5%;	
}
 img.logo:hover {
	text-decoration: underline;}

.hamburger-icon_image-top {
	display: none;}	
 
.main-menu {
	/* position: absolute;
	overflow: hidden; */
	/* padding-top: 25px; */


    /* display: flex;
    flex-direction: row;
    justify-content: space-around; */
	  display: table;

    /* margin-top: 3%; */
    width: 100%;
    background-color: #3b3937;
    /* top: 45px; */
    list-style: none;
	/* border: 1px solid #900; */
	}
	.main-menu li{
		display: table-cell;
	}

.main-menu a {
	/* display: flex; */
	display: block;
	text-align: center;

    padding: 35px 10px;
    color: #fff;
    text-decoration: none;
    flex-wrap: nowrap;
    /* background-color: rgb(128, 128, 128, 0.2); */
    align-content: center;
    align-items: center;
    justify-content: space-between;
z-index: 10000;
transition: all ease-out .2s .2s ;
}
	



.main-menu a:hover {
color: rgb(87, 255, 9);
background-color: rgb(128, 128, 128, 0.2); 
/* background: linear-gradient(225deg, #006710, #00560e); */
 
}

main {
	margin: 0 40px 0 40px;
	/* padding-top: 100px; */
	min-height: 100vh;
	overflow: hidden;
	/* background-color: rgba(120, 121, 120, 0.85); */
	/* border: 5px solid #090; */
	}

 

h1	{
	font-size: 48px;
	margin: 16px 10px;}

/* h2 оформление единое */
h2	{
	font-size: 32px;
	margin: 16px 0;
	color: #00600f;
	/* background: #ccf; */
	}
h2.first:after{
	width: 55%;
	height: 6px;
	display: block;
	content: '';
	border-radius: 5px;
	margin-top: 10px;
	background: #00600f;

}
h2:after {
	width: 50%;
	height: 6px;
	display: block;
	content: '';
	border-radius: 5px;
	margin-top: 10px;
	background: #00600f;}


h3{
	font-size: 1.2rem;
	line-height: 1;
	padding-top: 1em;
}	
.our-work-photos {
	border-radius: 0px;
    /* background: #f1f1f1; */
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 3%;
   
	}

.our-work-photos img {
	opacity: 0.8;
	cursor: pointer;
	/* width: 80%; */
	padding: 3%;}

.our-work-photos img:last-child {
	padding-bottom: 0;
	width: 80%;}

.our-work-photos img:hover {
	opacity: 1;}


 

/* p оформление единое */
p 	{
	margin: 16px 0;
	/* background: #cfc; */
	margin-right: 30px;
	font-size: 1rem;
	line-height: 2;
	}


 
 

/* .about-specialists-content img {
	width: 100%;	
	filter: grayscale(55%);}

.about-specialists-content img:hover{
		width: 100%;	
		filter: none;
	transition: 1.5s;} */

	 
 

#packages-version ul {
	list-style: none;
	text-align: center;
	background: #f1f1f1;}

#packages-version li {
	padding: 16px 0;
	border-bottom: 1px solid #ddd;}

#packages-version li:first-child {
	padding: 32px 0;
	color: white;}

#packages-version button {
	padding: 12px 24px;
	border: 1px;
	cursor: pointer;}

#packages-version button:hover {
	background: #000;
	color: #fff;
 }
 
 
form {    margin-right: 15%;
	  overflow: hidden; 
	}

/* form input,
form textarea {
	width: 90%;
	display: block;
	box-sizing: border-box;
	padding: 8px;
	margin-bottom: 16px;
border-radius: 10px;}
div.form-group.col-md-6.col-sm-6{
	border-radius: 10px;
}
form textarea {
	height: 70px;
	resize: none;} */

form input[type="submit"] {
	text-align: center;
	color: #fff;
	border: 0;
	padding: 12px 24px;
	cursor: pointer;
	 
	text-align: center;
    color: #fff;
    border: 0;
    padding: 12px 24px;
    cursor: pointer;
     
    background: linear-gradient(135deg, rgb(0 96 15 / 95%), #dbf7df);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;  
      border: 1px solid rgb(0 96 15 / 85%);  
      box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%);} 

form input[type="submit"]:hover {
	color: #fff;
	background: #616161;} 

 button[type="submit"]{
	background-color: rgb(87, 255, 9);
	color: rgb(0, 0, 0);
		padding: 1%;
		border-radius: 10px;
		font-size: 1rem;
		margin-right: 5%;

 }
 button[type="submit"]:hover{
	background: linear-gradient( rgb(87, 255, 9),  #00ffea,  #00ff9d); 
	color: rgb(0, 0, 0);
	padding: 1%;
	border-radius: 10px;
	font-size: 1rem;
	/* font-weight: bolder; */
	margin-right: 5%;}

/* .horizontalMenu li {
	display: inline;}

.horizontalMenu li:not(:last-child):after  {
	content: ' |';
	padding: 0 8px;}

ul.horizontalMenu a {
	display: flex;
	flex-direction: row; 
	justify-content: space-around; 
	width: 100%; 
	top: 45px;
	color: white;
	list-style: none; 
	flex-wrap: wrap; 
	line-height: 1.2;
	padding-right: 5%;
	text-decoration: none;
	white-space: nowrap;}

.horizontalMenu a:hover {
	text-decoration: underline;
color:greenyellow} */


	/* .slider {
		max-width: 800px;
	  }
  
	  дополнительные стили для этого примера
	  .slider__items {
		counter-reset: slide;
	  }
  
	  .slider__item {
		position: relative;
		counter-increment: slide;
	  }
  
	  .slider__item::after {
		content: counter(slide);
		position: absolute;
		top: 10px;
		right: 20px;
		color: #fff;
		font-style: italic;
		font-size: 32px;
		font-weight: bold;
	  }
  
	  .img-fluid {
		display: inline-block;
		height: auto;
		max-width: 100%;
	  } */
	  #footer{
		background-color: #3b3937;
		color: #f5f3f3;
		width: 100%;
		height: auto;
		padding: 16px;
	  }
	  .footer-menu {
		height: 50px;
		display: flex;
		flex-direction: row;
		gap: 10%;
		flex-wrap: wrap;
		align-content: space-around;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
.footer-links{
	padding: 50px 0;
	padding-left: 10px;
	display: flex;
	flex-direction: row;
    justify-content: space-around;
    align-items: center;	
}
.footer-links *, .footer-links a{
	color: #fff ;
	text-decoration: none;
}
.footer-links a:hover{
	color: greenyellow ;
	text-decoration: none;
}
.footer-links .first-footer-link {
	padding-top: 40px;
  line-height: 1px;
}

	div.fourth-footer-link{    padding-right: 5%;}

	button{
		background-color: #106b05;
		color: white;
		padding: 1%;
		border-radius: 10px;
		font-size: 1rem;
		margin-right: 5%;
	}
	button:hover{
		background-color: rgb(87, 255, 9);
		color: rgb(0, 0, 0);
		padding: 1%;
		border-radius: 10px;
		font-size: 1rem;
		/* font-weight: bolder; */
		margin-right: 5%;
	}
	div.log { width: 200px;
		background-repeat: no-repeat;
	   
	}
div.log :hover{
   background: url(./myLogo.svg);
		width:200px;
	   
	}
	div.lg {
		/* background: url(./myLogo1.svg); */
		width: 200px;
		background-repeat: no-repeat;
		padding-top: 30%;
	}
				  a.log{
				width: 200px;
				height: 100px;
				  background-image: url(./LogoRedVers.svg);  
				background-repeat: no-repeat;
				display: block
			}
			a.log:hover{
				width: 200px;
				 background-image: url(./LogoWhiteVers.svg);  
				background-repeat: no-repeat;
			}
		 
@media screen and (max-width: 576px) {
	div.lg {
		display: none;
	}
	div.log {
		display: none;
	}
	div#orderBut.orderBut_image-top{
		display: flex;
		margin-left: 10%;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		background-color: rgb(255, 255, 255);
		color: rgb(0, 0, 0); 
		padding: 2%;
		border-radius: 10px;
		border: 1px solid rgb(0, 0, 0);
	}
	div#orderBut.orderBut_image-top:hover{
		display: flex;
		margin-left: 10%;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		background-color: #fff;
		color: #039c48; 
		padding: 2%;
		border-radius: 10px;
		border: 1px solid rgb(87, 255, 9);
	}

	button{
		background-color: rgb(87, 255, 9);
		color: rgb(0, 0, 0); 
		padding: 2%;
		border-radius: 10px;
		border: 1px solid rgb(0, 0, 0);
		font-size: 1rem;
		margin-right: 5%;
	}
	button:hover{
		background-color: rgb(87, 255, 9);
		color: rgb(0, 0, 0);
		padding: 1%;
		border-radius: 10px;
		font-size: 1rem;
		/* font-weight: bolder; */
		margin-right: 5%;
	}
	a:link{
		color:green;
	}
	a:visited{color:#313131}
    a:hover{color:#00ff26}
    a:active{color:#00ff26}

	.footer-links{
		display: none
	}

	input#range.custom-range{
		width:100%}
	#root {		
		background-color:  rgba(204, 204, 204, 0.85);
		min-width: 300px;
		padding: 0 5px;
		background-color: rgb(112 110 110 / 95%);
		/* border: 2px solid #ddd;
		background: #cdcac7; */
		}

		p {
			margin: 16px 0;
			/* background: #cfc; */
			margin-right: 30px;
			font-size: 1.2rem;
			line-height: 2;
			color: rgb(239, 237, 237);
		}
		div.two-columns-elements-of-equal-width__element>p{
			margin: 16px 0;
			/* background: #cfc; */
			margin-right: 30px;
			font-size: 1.2rem;
			line-height: 2;
			color: rgb(100, 100, 100);
		}
	header {
		width: auto;
		height: 70px;
		position: sticky;
		z-index: 1000;
		left: 0;
		top: 0;	
		background-color: #00600f;
		padding: 20px 0 0;
		/* border: 2px dashed #000; */
		}
	#top1__hidden-for-mobile{
		display: none;
	}

	#top1mobile{
		display: flex;
    flex-direction: row;
	position: sticky;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
	}
	#top3mobile {
		display: flex;
		position: sticky;
		flex-direction: row;
		background-color: #3b3937;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: center;
	}

	#top3mobile>h3 {
		align-self: center;
		color: greenyellow;
		font-size: 1.5rem;
	}
	h1{
		margin: 5rem 0rem 2rem;
		font-weight: bold;
	}
	h2:after {
		width: 50%;
		height: 6px;
		display: block;
		content: '';
		border-radius: 5px;
		margin-top: 10px;
		background: #0fe330;}
	
	h2.first::after{
		width: 85%;
		height: 6px;
		display: block;
		content: '';
		border-radius: 5px;
		margin-top: 10px;
		background: #0fe330;
	
	}
	h2.first{
		color:#0fe330;
		font-size: 24px;
		margin-top: 35px
	}
	h3{
		color:whitesmoke;
	}
	p>a:link{
		color:#00ff26
	}
	span{
		color:white;
	}
	img.logo {		
		top:0px;
		color: #fff;
		height: 50px;
		width: 50px;
		top: 15px;
		left: 15px;
		position: absolute;}
		
	img.logo:hover {
		text-decoration: none;}	

	/* Оформление меню - начало	*/
	.hamburger-icon_image-top {
		position: absolute;
    display: flex;
    /*top: 10px;
     margin-left: 3%; */
    margin-right: 3%;
    /* right: 50px; */
    left: 80%;
    width: 50px;
    height: 50px;
    background: url(hamburger-icon-50x100px-2.png) left top;
    cursor: pointer;
    /* border: #000 1px solid; */
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
		/* border: #000 1px solid; */
		}

	.hamburger-icon_image-bottom	{
		background-position: left bottom;}

    #top2mobile{
		display: flex;
		flex-direction: row;
		gap: 10%;
		margin-top: 5%;
		width: 100%;
		background-color: #ccc;
		flex-wrap: nowrap;
		position: sticky;
    justify-content: space-between;}

	.main-menu {
		position: absolute;
		display: flex;
		width: 100%;
		z-index: 1;
		/* margin-top: 5%; */
		background-color: #000000;
		/* border: 1px solid #900; */
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: flex-start;
		align-items: stretch;
	}

	.main-menu_hidden-for-mobile {
		display: none;}	

	.main-menu a {
		text-decoration: underline;
		padding: 25px 10px;
		background: rgb(206 211 207 / 95%);}

	.main-menu a:hover {
		color: #fff;
border-radius: 10px;
background: linear-gradient(225deg, #006710, #00560e);
box-shadow:  -3px 3px 3px #003d0a,
             3px -3px 3px #008314;
	}		
	/* Оформление меню - завершение	*/


	/* для блоков 'две колонки' и 'три колонки' (общие св-ва) - начало */
	.two-columns-elements-of-equal-width__container,
	.three-columns-elements-of-equal-width__container {
		display: block;
		 
	}
	 
	.two-columns-elements-of-equal-width__element,
	div.three-columns-elements-of-equal-width__element 
		{
			width: 95%;
			display: flex;
			padding-top: 30px;
			padding-right: 30px;
			align-self: center;
			padding-bottom: 30px;
			padding-top: 30px;
			padding-bottom: 30px;
			border-radius: 15px;
			background: #f1f1f1;
			/* box-shadow: 7px 7px 7px #9a9a9a, -7px -7px 7px #ffffff; */
			flex-wrap: wrap;
			flex-direction: column;
			align-content: center;
			align-items: center;
			justify-content: space-around;
		}
	/* для блоков 'две колонки' и 'три колонки' (общие св-ва) - завершение */


	/* блок две колонки - начало */
	.two-columns-elements-of-equal-width__element:not(:last-child) {
		margin-bottom: 20px;}
	/* блок две колонки - завершение */


	

	main {
		margin: 0;
		padding-top: 0;}

	
	#block-one {
		margin-top: 75px;
		}

	h1	{color:#00ff9d;
		font-size: 26px;
	    margin: 30px 20px 10px 0;}

	/* h2 оформление единое */
	h2	{color:#0fe330;
		font-size: 24px;
		margin-top: 35px}

	div#CompName.CompName_image-top{
		    display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;}


		#block-two,#block-three,#block-four,#block-five {
			padding-top: 55px;
			}
			ul.horizontalMenu 
			{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: 100%;
				top: 45px;
				padding-top: 5%; 
				color: white;
				list-style: none;
				flex-wrap: wrap;
				line-height: 2;
				padding-right: 5%;
				align-items: center;
			}	
  
.mobile-menu {
	display: block;
	width: 100%;
	/* max-width: 96%; */
	padding-left: 1%;
}
.mobile-menu li{
	display: inline-block;
}
.mobile-menu a{
	padding: 10px 0px;
	text-decoration: none;
	background: transparent;
	transition: none;
	color: white;
}
.mobile-menu a:hover{
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
#footer{
	padding: 0;
}

}
  
ul.horizontalMenu 
			{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: 100%;
				top: 45px;
				
				color: white;
				list-style: none;
				flex-wrap: wrap;
				line-height: 2;
				padding-right: 5%;
				align-items: center;
			}	
	li::after{
		display: none;

	}  
	.footer-menu {
		display: flex;
		flex-direction: column;
		gap: 10%;
		flex-wrap: nowrap;
		align-content: stretch;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}

	form>p{
		font-size: 1.5rem;
	}
	input#range.custom-range{
		width:70%}
  
		 
		input[type=button] {
			background-color: #106b05;
				color: white;
				padding: 1%;
				border-radius: 10px;
				font-size: 1rem;
				margin-right: 5%;
		  }
		  input[type=button]:hover {
			background-color: #0fe330;
				color: rgb(0, 0, 0);
				padding: 1%;
				border-radius: 10px;
				font-size: 1rem;
				margin-right: 5%;
		  }
/* #303135 
#707070
#A3A4A8
#D8D8D8
#F0EAEA




#FFFFFF




#075801
#287204
#0B8702
#A7E83A
#82CE49
#85E83A */


.container {
	width: 100%;
	margin: 0 auto;
}


@media screen and (max-width: 850px) {
	.footer-links {
		display: none;}
		ul.horizontalMenu {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			width: 100%;
			/* top: 45px; */
			padding-top: 0;
			color: white;
			gap:3%;
			padding-top: 10%;
			list-style: none;
			flex-wrap: wrap;
			line-height: 3;
			padding-right: 5%;
			align-items: center;
		}


}