body {  background-image: url(../image/fon/Osn.jpg); 
        background-repeat:no-repeat;
        background-attachment: fixed;
        background-size:cover;
        font-family: Arial, Verdana, Helvetica, sans-serif;

 min-width: 1800px;


}

#pocenter{  margin:0 10% 0 10%;  width:100%;}
/*----------------------- Меню ------------------------------ */

#head{
    margin-left: auto;
    margin-right: auto;

}


nav {    
    width: 900px;
    margin-top:-70px;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
    z-index: 99;
}
nav ul:after {
  content: "";
  display: table;
  clear: both;
    z-index: 99;
}

nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}
.topmenu > li {
  float: left;
  position: relative;
    z-index: 99;

}
.topmenu > li:first-child {border-left: 0;}
.topmenu > li > a {  
  padding-right: 15px;
  font-size: 28px;
  color: #ffffff;

}
.topmenu > li > a.active, 
.submenu a:hover {color: #ffe000;}
.topmenu a:hover {color: #ffe000;}
.topmenu .fa, 
.submenu .fa {
  margin-left: 5px;
  color: inherit;
  z-index: 99;
}
.submenu {
  position: absolute;
  z-index: 99;
  min-width: 350px;
  visibility: hidden;
  background: rgba(34, 90, 74, 0.8);
  opacity: 0; 
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: .3s linear;  
}
.submenu li {position: relative;   z-index: 99;}
.submenu li a {
  color: #ffffff;
  font-size: 26px;
  padding: 10px;
  z-index: 99;

}
.submenu .submenu {
  position: absolute;
  left: 100%;
  top: -1px;
  transition: .3s linear;
  z-index: 99;
}
nav li:hover > .submenu {
  transform: rotateX(0deg);
  visibility: visible;
  opacity: 1;

}

/*----------------------- Первая картинка ------------------------------ */

.face{
   		width: 104%;
		height:700px;
 		margin-top:60px;
		margin-left:-1%;			
		background-image: url(../image/fon/iot1.jpg); 
        background-repeat:no-repeat;
        background-attachment: fixed;
        background-size:cover;
}

.face .loz0{
   		width: 650px;
		height:60px;  
		position: relative;

		
}

.face .loz1{
  		background: rgba(34, 90, 74, 0.6);
   		width: 650px;
		height:60px;  
		color: #ffffff;
		position: relative;
		margin-top:10px;  		
		font-size: 34px;
		margin-left:12%;
		padding-top: 15px;
		padding-left: 15px;	
		
}

.face .loz2{
  		background: rgba(34, 90, 74, 0.5);
   		width: 650px;
		height:60px;  
		color: #ffffff;
		position: relative;
		margin-top:30px;  		
		font-size: 34px;
		margin-left:12%;
		padding-top: 15px;
		padding-left: 15px;	
		
}


video {
		position: relative;
		float: left;
		margin-left:950px;
		margin-top:-430px;
		border:5px solid;
		border-color:#ffffff;
}


/*----------------------- О нас  и О предприятии------------------------------ */


.o_nas {
        margin-top:60px;
		position: relative;
   		width: 104%;
		margin-left:-1%;
}

.o_nas .left_onas {
  		background: rgba(255, 255, 255, 0.6);
		position: relative;
   		width: 50%;
        float: left;



}
.o_nas .left_onas .onastext {
  		background: rgba(255, 255, 255, 0.9);
		position: relative;
   		width: 70%;
        margin-top:15px;
        margin-left:25%;

}

.o_nas #hid {
        background-size:cover;
        position: relative;
        width: 50%;
        height:1532px; 
        margin-left:50%;
 
}
.o_nas #hid .exmpl {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.o_nas #hid .exmpl img {
    width: auto;
    height: 1532px;
    flex-shrink: 0;
  }

.o_nas #hid1 {
        background-size:cover;
        position: relative;
        width: 50%;
        height:1500px; 
        margin-left:50%;
}
.o_nas #hid1 .fig_orusoil {
	background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
	box-shadow: inset 0 0 1vw #000;
	outline: .3vw solid #ffffff;

	display: inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin: 3px 5px 5px 5px;
	width: 600px;
	height: 405px;
  }
.o_nas #hid1 .fig_orusoil img {
		position: absolute;
    	width: 100%;
	    height: 100%;
		opacity: 1;
		left: 0;
		top: 0;
  }

/*----------------------- Блок Цифры ------------------------------ */

#info_block {
   	   width: 104%;
	   margin-left:-1%;
       position: relative;
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.1));

}


#info_block #info_tab {
        color: #ffffff;
        font-size: 38pt;
        text-align:center;
        width: 90%;
        padding: 50px;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 1px 1px 1px #000;

}

#info_block #info_tab #two_line{
        font-size: 24pt;
        font-weight: bold;
        text-shadow: 1px 1px 1px #000;

}



/*----------------------- Блок  проекты ------------------------------ */

#pr_titl{
   	   width: 104%;
	   margin-left:-1%;
       position: relative;


}

#pr_titl .pr_img{
		position: relative;
        top: 50px;
transition: all 0.5s ease;
   
}

#pr_titl .pr_img table{
        margin: auto;
        position: relative;

}
#pr_titl .pr_img table .second_block {
  display: none;
}

#pr_titl .pr_img div:hover .second_block{
    display: block;
    z-index: 3;
        color: #000000;
        font-size: 24pt;
        text-align:center;
  		background: rgba(255, 255, 255, 0.6);
        
}

#pr_titl .pr_img div{
    
    overflow: hidden;
    border:solid 3px;
    border-color:#ffffff;
    margin: auto;
    height: 450px;
    width: 500px;
    justify-content: center;
    align-items: center;
    position: relative;
}


#pr_titl .pr_img div:hover{
border-radius:300px 0px 300px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;

}



#pr_titl .pr_img div img {
    width: auto;
    height: 450px;

  }

.fig_glav {
    
	background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
	box-shadow: inset 0 0 1vw #000;
	outline: .2vw solid #ffffff;

	display: inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin: 70px 5px 5px 5px;
	width: 200px;
	height: 105px;

}

.fig_glav img {

		position: absolute;
	    width: 100%;
	
		opacity: 1;
		left: 0;
		top: 0;

	}



/*----------------------- Блок  контакты ------------------------------ */

#kont{
	position: relative;
    width 50%;
    margin-left: 25%;    
    margin-top: 60px;
}


#kont #form_obr{
	position: relative;
   	width: 35%;
	height: 805px;
    float: left;
    margin-left: 0;  
	border: .1vw dashed #999; 
    background: rgba(255, 255, 255, 0.7);	 

}


#kont #form_tel{
  	background: rgba(255, 255, 255, 1);	
    position: relative;
    width:35%;
	height: 805px;
    margin-left:35%;
  	border: .2vw solid rgba(0, 0, 0, 0.2);
}

/*----------------------- О предприятии ------------------------------ */

#face1{
		height:600px;
 		margin-top:60px;
		width: 104%;
        margin-left: -3%;
}

#face1 div {
       overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: center;
       height:600px;
       position: relative;
}

#face1 div img{
    width: 100%;
}
	
#face1:hover div img{

    flex-shrink: 0;
    margin-top:100px;
    transition: all .5s;
}


/*----------------------- Документы ------------------------------ */


#docs{
	   position: relative;
	   margin-top:80px;
	   margin-left:4%;
	
}


#docs #fig1{
	   position: relative;
       overflow: hidden;
       height:600px;
	   width:45%;
}

#docs #fig1 img{
	   width:100%;
}

#docs #textlic{

  		background: rgba(34, 90, 74, 0.8);
   		width: 50%;
		color: #ffffff;
		position: absolute;
		margin-top:-450px;  		
		font-size: 26px;
		line-height: 1.5;
		text-align:justify;
		margin-left:38%;
		padding: 10px 30px 30px 80px;
			
}
#docs #obs{

  		background: rgba(34, 90, 74, 0.8);
   		width: 50%;
		color: #ffffff;
		position: absolute;
		margin-top:0px;  		
		font-size: 20px;
		line-height: 1.5;
		text-align:justify;
		margin-left:2%;
		padding: 10px 30px 30px 80px;
			
}
#docs #obs a {color: #eeeeee;}


#docs #textlic a {color: #eeeeee;}
#docs #textlic a:visited {color: #eeeeee;}
#docs #textlic a:hover {color: #ffe000;}

#imgdocs{
	   position: relative;
	   margin-top:420px;
	   margin-left:4%;
}

#imgdocs img{
		width: 30%;
}


/*----------------------- Услуги ------------------------------ */


#docsusligi{
	   position: relative;
	   margin-top:80px;
	   margin-left:4%;
	z-index: 100;
	
}

#docsusligi #uslugifig1 img.rot {
  animation: 1s linear 0s normal none  running rot;
  -webkit-animation: 1s linear 0s normal none running rot;
  width: 520px;
  margin-left:200px;
	z-index: 4;
  
}
@keyframes rot {
  0% {
	opacity: 0;
    transform:  rotate(0deg);
  }
  100% {
	opacity: 1;
    transform:  rotate(720deg);
  }
}
@-webkit-keyframes rot {
  0% {
	opacity: 0;
    transform:  rotate(0deg);
  }
  100% {
	opacity: 1;
    transform:  rotate(720deg);
  }
}

.marker a {color: #ffffff; text-decoration:none;}
.marker a:visited {color: #ffffff; text-decoration:none;}
.marker a:hover {color: #ffe000; text-decoration:none;}

#marker1{
 		animation: 3s linear 0s normal none  running marker1;
 		-webkit-animation: 1s linear 0s normal none running marker1;

 		background: rgba(34, 90, 74, 0.6);
   		width: 350px;
		margin-top:-500px;
		margin-left:200px;
		color: #ffffff;
		position: relative;
		font-size: 24px;
		border-radius: 30px;
		padding: 10px 10px 10px 30px;
}

#marker2{
 		animation: 3.5s linear 0s normal none  running marker1;
 		-webkit-animation: 1.5s linear 0s normal none running marker1;
 		background: rgba(34, 90, 74, 0.6);
   		width: 350px;
		margin-top:50px;
		margin-left:140px;
		color: #ffffff;
		position: relative;
		font-size: 24px;
		border-radius: 30px;
		padding: 10px 10px 10px 30px;
}

#marker3{
 		animation: 4s linear 0s normal none  running marker1;
 		-webkit-animation: 2s linear 0s normal none running marker1;
 		background: rgba(34, 90, 74, 0.6);
   		width: 350px;
		margin-top:50px;
		margin-left:80px;
		color: #ffffff;
		position: relative;
		font-size: 24px;
		border-radius: 30px;
		padding: 10px 10px 10px 30px;
}

#marker4{
 		animation: 4.5s linear 0s normal none  running marker1;
 		-webkit-animation: 2.5s linear 0s normal none running marker1;
 		background: rgba(34, 90, 74, 0.6);
   		width: 350px;
		margin-top:50px;
		margin-left:20px;
		color: #ffffff;
		position: relative;
		font-size: 24px;
		border-radius: 30px;
		padding: 10px 10px 10px 30px;
}

@keyframes marker1 {
  0% {
	opacity: 0;
  }
  80%{
  	opacity: 0;
  }

  100% {
	opacity: 1;


  }
}

@-webkit-keyframes marker1 {
  0% {
	opacity: 0;
  }
  80%{
  	opacity: 0;
  }

  100% {
	opacity: 1;


  }
}

#textuslugi{

  		background: rgb(24, 90, 24);
   		width: 40%;
		margin-top:140px; 
		color: #ffffff;
	    position: absolute;
		margin-left:38%;
		padding: 10px 30px 30px 120px;
		z-index: 1;
			
}

#textuslugi #textblockuslugi{
		background:#f9eeb1;		
		color: #222222;		
		font-size: 22px;
		line-height: 1.1;
		padding: 20px 20px 20px 50px;
		text-align:justify;
		border-radius: 0 20px; 
		z-index: 1;
}

#textuslugi #uslugianimacion{

		padding: 5px;
		z-index: 1;

}

#textuslugi  #uslugianimacion #uslugiimg1{
 		animation: 4s linear 0s normal none  running uslugiimg1;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg1;
}
#textuslugi  #uslugianimacion #uslugiimg2{
 		animation: 4s linear 0s normal none  running uslugiimg2;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg2;
}
#textuslugi  #uslugianimacion #uslugiimg3{
 		animation: 4s linear 0s normal none  running uslugiimg3;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg3;
}
#textuslugi  #uslugianimacion #uslugiimg4{
 		animation: 4s linear 0s normal none  running uslugiimg4;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg4;
}
#textuslugi  #uslugianimacion #uslugiimg5{
 		animation: 4s linear 0s normal none  running uslugiimg5;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg5;
}
#textuslugi  #uslugianimacion #uslugiimg6{
 		animation: 4s linear 0s normal none  running uslugiimg6;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg6;
}
#textuslugi  #uslugianimacion #uslugiimg7{
 		animation: 4s linear 0s normal none  running uslugiimg7;
 		-webkit-animation: 4s linear 0s normal none running uslugiimg7;
}

@keyframes uslugiimg1 {
  0% {opacity: 0;}
  15%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg2 {
  0% {opacity: 0;}
  20%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg3 {
  0% {opacity: 0;}
  35%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg4 {
  0% {opacity: 0;}
  40%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg5 {
  0% {opacity: 0;}
  55%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg6 {
  0% {opacity: 0;}
  60%{opacity: 0;}
  100% {opacity: 1;}
}
@keyframes uslugiimg7 {
  0% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes uslugiimg1 {
  0% {opacity: 0;}
  15%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg2 {
  0% {opacity: 0;}
  20%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg3 {
  0% {opacity: 0;}
  35%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg4 {
  0% {opacity: 0;}
  40%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg5 {
  0% {opacity: 0;}
  55%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg6 {
  0% {opacity: 0;}
  60%{opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes uslugiimg7 {
  0% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 1;}
}

.uslugislade{
 	   position: relative;
        width:660px; 

        background:rgba(255, 255, 255, 0.6);
        float:left; 
        text-align:center;
		margin-left:10px;
		margin-top:10px;

}

.uslugislade .fig_orusoil {
	display: inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
	width: 600px;
	height: 400px;
  }
.uslugislade .fig_orusoil img {
		position: absolute;
    	width: 100%;
	height: 100%;
		left: 0;
		top: 0;
  }



.projectslade{
 	   position: relative;
        width:810px; 
		height: 560px;
        background:#f1f1f1; 
        float:left; 
        text-align:center;
		margin-left:35%;
		margin-top:20px;

}

.projectslade .fig_orusoil {
	display: inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
	width: 800px;
	height: 550px;
		margin-left:5px;
		margin-top:5px;
  }
.projectslade .fig_orusoil img {
		position: absolute;
object-fit: cover;
	width: 800px;
	height: 550px;
		left: 0;
		top: 0;


  }

.projecttext{
 	   position: absolute;
        width:610px; 
        background:#f1f1f1; 
        float:left; 
		margin-left:0;
		margin-top:20px;

}