@charset "utf-8";

html {
	width: 100%; height: 100%; /*должны быть по 100% и в html, и в body для отображения фона на все страницу (при включенном масштабировании)*/
	background-color: #fff;
	background-image: url(../images/obzor/bgr1.jpg); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment:fixed;
	position: absolute;
	overflow: hidden;
}
body {
	width: 100%; /*должны быть по 100% и в html, и в body для отображения фона на все страницу (при включенном масштабировании)*/
	height: 100%; /*должны быть по 100% и в html, и в body для отображения фона на все страницу (при включенном масштабировании)*/
    font-family: Verdana, Arial, sans-serif;    
    /*background-color: #f7f7f7;*/
	/*background-image: url(../animation_assets/welcome/Background_stars_i.gif);*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment:fixed;
	overflow: hidden; /*должны быть отключено (при включенном масштабировании)*/
}

hr{
	color:deepskyblue;
	border-width: 2px;
	
}

#wrapper {
	margin-top: 3%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	top: 0%;
	height: 1050px;
	width: 1371px;
	/*background-color: aqua;*/
	position: relative;
    display: block;

}

/*Main->*/

#obz_header {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	height: 235px;
	width: 100%;
	/*background-color: blue;*/
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 5px 0px;
	margin-top: auto;
	float: left;
	clear: both;
	
		
}



#obz_main{
	
	left: 338px;
	top: 110px;
	height: 834px;
	width: 688px;
	/*background-color:green;*/
	position: absolute;
	z-index: 5;
	
}

#obz_main_header{
	/*background-color: greenyellow;*/
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -12px -250px;
	height: 108px; /*157px*/
	width: 688px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	opacity: 1;
	
}


#obz_main_header p{
	
	margin: -20px;
	letter-spacing: 2px;
	color: white;
	font-weight: bold;
	font-size: 22px;
	text-align: center;
	text-shadow: 2px 2px 2px red;
}

#obz_main_center{
	/*background-color:cadetblue ;*/
	height: 688px; /*157px*/
	width: 688px;
	position: relative;
	left: 0px;
	top: 127px;
	z-index: 5;
	
	-webkit-transform-style:preserve-3d;
	
	transform: scale(0.57);
}

#obz_main_center div{
	/*background-color:cadetblue ;*/
	height: 688px; /*688px*/
	width: 688px; /*688px*/
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 5;
	overflow: hidden;
	/*opacity: 0.5;*/
	transform-origin:50% 50% -497px;  /*z-влияет на приближение и расоплзание плоскотстей куба -344px*/
}


.p1 {/*background: #4cadeb; */
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform: perspective(1200px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	opacity: 0.01;
    border-radius: 100px; 
}
.p2 {/*background:#7ac2f0;*/ 
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform:perspective(1200px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
	opacity: 0.01;
    border-radius: 100px;
}
.p3 {/*background:#a8d7f5;*/ 
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform:perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	opacity: 1;
    border-radius: 100px;
	position: absolute;
}

.p4 {/*background:#eb8a4c;*/ 
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform:perspective(1200px)  rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	opacity: 0.01;
    border-radius: 100px;
}
.p5 {/*background:#f0a87a;*/ 
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform:perspective(1200px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	opacity: 0.01;
    border-radius: 100px;
}
.p6 {/*background:#9b9b9b;*/
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 1px -524px;
	
	transform:perspective(1200px)  rotateX(-90deg) rotateY(180deg) rotateZ(0deg);
	opacity: 0.01;
    border-radius: 100px;
}

/*.box3d {width:200px; height:200px; margin:100px auto; position:relative;
 -webkit-transform-style:preserve-3d;
}
.box3d div {position:absolute; left:0; top:0; width:200px; height:200px;

opacity: 0.5;	
transform-origin:50% 50% -100px;
}*/

#obz_main_center div p{
	color:navy;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	text-shadow: 2px 2px 20px white;
}


#obz_main_center div div{
	background-color:red;
	
	height: 100%; /*157px*/
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 50;
	
	opacity: 1;
	
	
}

.inner_wrap{
	/*background-color:green;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -690px -520px;
	
	height: 688px; /*157px*/
	width: 688px;
	position: absolute;
	left: 0px;
	top: 125px;
	z-index: 50;
	display: block;
	opacity: 1;
	border-radius: 100px;
	transform: scale(0.87);
	overflow: hidden;
}

.inner{
	/*background-color:blue;*/
	height: inherit; /*157px*/
	width: inherit;
	position: absolute;
	left: -265px;
	top: -120px;
	z-index: 50;
	display: block;
	opacity: 1;
	border-radius: 100px;
	
}

/*.inner{
	background-color:red;
	height: 688px; 
	width: 688px;
	position: absolute;
	left: 0px;
	top: 125px;
	z-index: 50;
	display: block;
	opacity: 1;
	border-radius: 100px;
	transform: scale(0.87);
	overflow: hidden;
}*/

#Up{
	width: 50px;
	height: 20px;
	left: 200px;
	top: 50px;
	
	background-color: aqua;
	position: absolute;
}
#Dow{
	width: 50px;
	height: 20px;
	left: 200px;
	top: 100px;
	
	background-color: aqua;
	position: absolute;
}

#Left{
	width: 60px;
	height: 20px;
	left: 200px;
	top: 150px;
	
	background-color: aqua;
	position: absolute;
}
#Right{
	width: 60px;
	height: 20px;
	left: 200px;
	top: 200px;
	
	background-color: aqua;
	position: absolute;
}

#Update{
	width: 100px;
	height: 20px;
	left: 200px;
	top: 300px;
	
	background-color: aqua;
	position: absolute;
}


#Up1{
	width: 50px;
	height: 20px;
	left: 50px;
	top: 50px;
	
	background-color: aqua;
	position: absolute;
}
#Up2{
	width: 50px;
	height: 20px;
	left: 50px;
	top: 100px;
	
	background-color: aqua;
	position: absolute;
}

#Up3{
	width: 50px;
	height: 20px;
	left: 50px;
	top: 150px;
	
	background-color: aqua;
	position: absolute;
}



#obz_aside_l{
	/*background-color: brown;*/
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 2px -1234px;
	
	height: 787px; /*157px*/
	width: 470px;
	position: absolute;
	left: 0px;
	top: 153px;
	z-index: 30;
	/*display: none;*/
	
	clip-path: polygon(0px 693px, 217px 757px, 470px 787px, 470px 0px, 0px 0px, 0px 787px);
}


#obz_aside_l_canvas{
	/*background-color:coral;*/
	
	background-image: url(../images/obzor/bkgrnd.png); 
	background-repeat: no-repeat;
	background-position: 4px 5px;
	
	left: 30px;
	right: auto;
	top: 50px;
	/*transform: scale(1);*/
	/* В канвасе не работают события мыши из-за задания размеров в css, нужно задавать в коде html
	width: 900px;
	height: 450px;*/
	position: absolute;
	border: 0px solid green;
	
	z-index: 1;
	
	display: block;
}


.obz_aside_l_btn_up{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -1030px -1275px;
	
	height: 164px; /*157px*/
	width: 148px;
	position: absolute;
	left: 305px;
	top: 30px;
	z-index: 3;
	overflow: hidden;
	
	clip-path: polygon(25px 168px, 150px 52px, 10px 0px); /*идет от нижней левой границы выбранного элемента против часовой стрелки (отсчет коородинат от верхнего левого угла)*/
	/*display: none;*/
}


.obz_aside_l_btn_up:active{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -1200px -1275px;
	
}

.obz_aside_l_btn_dwn{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -2px -2087px;
	
	
	height: 122px; /*157px*/
	width: 295px;
	position: absolute;
	left: 155px;
	top: 655px;
	z-index: 3;
	overflow: hidden;
	
	clip-path: polygon(0px 72px, 230px 122px, 300px 122px, 157px 0px); /*идет от нижней левой границы выбранного элемента против часовой стрелки (отсчет коородинат от верхнего левого угла)*/
	
	/*display: none;*/
}

.obz_aside_l_btn_dwn:active{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -315px -2087px;

}



#obz_aside_r{
	/*background-color: brown;*/
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -524px -1234px;
	
	height: 787px; /*157px*/
	width: 470px;
	position: absolute;
	right: 0px;
	top: 153px;
	z-index: 30;
	/*display: none;*/
	
	clip-path: polygon(0px 787px, 305px 748px, 470px 693px, 470px 0px, 0px 0px, 0px 787px);
}

.obz_aside_r_text{
	/*background-color: azure;*/
	
	background-image: url(../images/obzor/bkgrnd.png); 
	background-repeat: no-repeat;
	background-position: -268px 5px;
	
	height: 633px; /*157px*/
	width: 268px;
	position: absolute;
	right: 38px;
	top: 200px;
	z-index: 2;
	overflow: hidden;
	/*display: none;*/
}

.obz_aside_r_text p{
	/*background-color: gray;*/
	height: 637px; /*637px*/
	width: 238px;  /*270px*/
	position: absolute;
	right: 10px;
	top: 25px;
	z-index: 2;
	overflow: hidden;
	
	/*display: none;*/
	color: skyblue;
	text-align:justify;
	font-size: 18px;
	text-shadow: 2px 2px 2px darkblue; 
}

.obz_aside_r_btn_up{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -1021px -1468px;
	
	
	height: 164px; /*157px*/
	width: 148px;
	position: absolute;
	right: 305px;
	top: 30px;
	z-index: 3;
	overflow: hidden;
	
	clip-path: polygon(0px 55px, 125px 168px, 141px 0px);
	/*display: none;*/
}

.obz_aside_r_btn_up:active{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -1183px -1468px;

}

.obz_aside_r_btn_dwn{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -645px -2087px;
	
	height: 122px; /*157px*/
	width: 295px;
	position: absolute;
	right: 150px;
	top: 655px;
	z-index: 3;
	overflow: hidden;
	
	clip-path: polygon(138px 0px, 0px 120px, 65px 122px, 295px 72px); /*идет от нижней левой границы выбранного элемента против часовой стрелки (отсчет коородинат от верхнего левого угла)*/
	/*display: none;*/
	
}


.obz_aside_r_btn_dwn:active{
	/*background-color: darkcyan;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -945px -2087px;
	
	
}


#obz_footer {
	/*background-color: #B00002;*/
	clear: both;
	float: left;
	height: 202px;
	width: 100%;
	margin-top: 610px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
}


#obz_aside_lb{
	/*background-color: yellow;*/
	height: 182px; /*157px*/
	width: 468px;
	position: absolute;
	left: 0px;
	bottom: 28px;
	z-index: 2;
	opacity: 0.77;
}

.obz_aside_lb_btn1{
	/*background-color:blueviolet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 0px -2264px;
	
	height: 135px; /*157px*/
	width: 214px;
	position: absolute;
	left: 0px;
	top: 5px;
	z-index: 4;
}
.obz_aside_lb_btn1:hover{
	/*background-color:violet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -224px -2264px;
}


.obz_aside_lb_btn2{
	/*background-color:blueviolet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -459px -2262px;
	
	height: 118px; /*157px*/
	width: 330px;
	position: absolute;
	left: 142px;
	top: 66px;
	z-index: 4;
}
.obz_aside_lb_btn2:hover{
	/*background-color:violet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -788px -2262px;
}

#obz_aside_cb{
	/*background-color: orange;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -12px -364px;

	
	height: 108px; /*157px*/
	width: 688px;
	position: absolute;
	left: 338px;
	bottom: 0px;
	z-index: 4;
	
	transform: scale(1.04);
	
	clip-path: polygon(0px 85px, 89px 100px, 333px 112px, 565px 100px, 688px 85px, 688px 70px, 602px 5px, 332px 5px, 100px 5px, 0px 70px);
	-o-clip-path: polygon(0px 85px, 89px 100px, 333px 112px, 565px 100px, 688px 85px, 688px 70px, 602px 5px, 332px 5px, 100px 5px, 0px 70px);
	-moz-clip-path: polygon(0px 85px, 89px 100px, 333px 112px, 565px 100px, 688px 85px, 688px 70px, 602px 5px, 332px 5px, 100px 5px, 0px 70px);
	-webkit-clip-path: polygon(0px 85px, 89px 100px, 333px 112px, 565px 100px, 688px 85px, 688px 70px, 602px 5px, 332px 5px, 100px 5px, 0px 70px);
	
	/*clip-path: polygon(0px 32px, 46px 76px, 132px 108px, 565px 108px, 687px 83px, 700px 34px);*/
	
}

#obz_aside_cb_canvas{
	/*background-color:coral;*/
	left: 0px;
	right: auto;
	top: -5px;
	
	/* В канвасе не работают события мыши из-за задания размеров в css, нужно задавать в коде html
	width: 900px;
	height: 450px;*/
	position: absolute;
	border: 0px solid green;
	
	z-index: 22;
	transform: scale(0.87);
	display: block;
}



#obz_aside_rb{
	/*background-color: yellow;*/
	height: 182px; /*157px*/
	width: 468px;
	position: absolute;
	right: 0px;
	bottom: 28px;
	z-index: 3;
	opacity: 0.77;
}

.obz_aside_rb_btn3{
	/*background-color:blueviolet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -698px -2450px;
	
	height: 135px; /*157px*/
	width: 214px;
	position: absolute;
	right: 0px;
	top: 5px;
	z-index: 4;
}
.obz_aside_rb_btn3:hover{
	/*background-color:violet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -950px -2450px;
}

.obz_aside_rb_btn4{
	/*background-color:blueviolet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: 0px -2450px;
	
	height: 118px; /*157px*/
	width: 330px;
	position: absolute;
	right: 138px;
	top: 68px;
	z-index: 4;
}
.obz_aside_rb_btn4:hover{
	/*background-color:violet;*/
	
	background-image: url(../images/obzor/Main_sl_r.png); 
	background-repeat: no-repeat;
	background-position: -342px -2450px;
}

/*Preloader*/

#preloader {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1200;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #fbfbfb url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
	  
}
    
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}


.wrapper_m{
  display: none;
}