.web {
		background-image:url(img/web.jpg);
		background-size:100% 100%;
		z-index:2;
		background-repeat:no-repeat;
	display: inline-block;
	left: 50%;
	opacity: 0;
	box-shadow: inset 0 0 7px rgba(0,0,0,1);
	width: 70vw;
	height: 26vw;
	position: fixed;
	text-align: justify;
	top: 50%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	
}




.test_frame {
	background-color: #fff;

	display: inline-block;
	left: 50%;
	opacity: 0;
	box-shadow: inset 0 0 7px rgba(0,0,0,1);
	width: 90vw;
	height: 30vw;
	position: fixed;
	text-align: justify;
	top: 50%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	border-radius: 11px;
}

.j1, .j2_yes, .j2_no, .m1, .m2_yes, .m2_no, .s1, .s2_yes, .s2_no{
	opacity:0;
	visibility:hidden;
}

#text_head{

position:absolute;
	top:3vw;
	font-size:4vw;
}

#text_head2{

position:absolute;
	top:3vw;
	font-size:2vw;
}

.test_about{
	position:absolute;
	top:3vw;
	line-height: 2.4vw;
	left:0px;
}

.write_me{
	position:absolute;
	top:20.9vw;
	line-height: 1.5vw;
	left:55vw;
	width:13.5vw;
	font-size:1.5vw;

	text-align:left;
}
.def{
cursor:pointer;

width: 50vw;
	height: 4vw;
	color:#202020;
	border: 1px solid #202020;
	border-radius:1.5vw;
	background:none;
	 box-shadow: 0 0 5px rgba(0,0,0,0.5);
	 font-size:1.5vw;
}

.def:hover{


background-color: rgba(0,0,0,0.1);
}

.def_no{
cursor:pointer;
top:12vw;
left:0;
right:0;
position:absolute;
margin:auto;
width: 40vw;
	height: 5vw;
	color:#202020;
	border: 1px solid #202020;
	border-radius:1.5vw;
	background:none;
	 box-shadow: 0 0 5px rgba(0,0,0,0.5);
	 font-size:2vw;
}

.def_no:hover{


background-color: rgba(0,0,0,0.1);
}

.def_no1{
cursor:pointer;
top:19vw;
right:11.5vw;

position:absolute;

width: 40vw;
	height: 5vw;
	color:#202020;
	border: 1px solid #202020;
	border-radius:1.5vw;
	background:none;
	 box-shadow: 0 0 5px rgba(0,0,0,0.5);
	 font-size:2vw;
}

.def_no1:hover{


background-color: rgba(0,0,0,0.1);
}


.ali1{
position:absolute;
left:0; right:0;
margin:auto;
	text-align:center;
	top:10vw;
}
.ali2{
position:absolute;
left:0; right:0;
margin:auto;
	text-align:center;
	top:15.6vw;
}
.ali3{
position:absolute;
left:0; right:0;
margin:auto;
	text-align:center;
	top:21.1vw;
}


.ali4{
position:absolute;

left:0; right:0;
margin:auto;
	text-align:center;
	top:13vw;

}
.ali5{
position:absolute;
left:0; right:0;
margin:auto;
	text-align:center;
	top:19vw;
}

.def_y_n{
width: 20vw;
 font-size:1.9vw;
}

   .zap{
   position:absolute;
top:20.5vw;
left:12vw;
width: 25vw;
	height: 4vw;
	color:#202020;
	border: 1px solid #202020;
	border-radius:1.5vw;
	background:none;
	 box-shadow: 0 0 5px rgba(0,0,0,0.5);
	 font-size:1.5vw;
	 cursor:pointer;
}

.zap:hover{


background-color: rgba(0,0,0,0.1);
}


   .soc{
   position:absolute;
   cursor:pointer;

width: 4.2vw;
	height: 4vw;
	color:#202020;
	
	border-radius:1.1vw;
	
	
	 font-size:1.5vw;
}

.soc:hover{


background-color: rgba(0,0,0,0.3);
}


.vk{
top:20.5vw;
	right:16.3vw;
	background:url("img/vk.png");
		background-size:102% 102%;
		
		background-repeat:no-repeat;

}

.inst{
top:20.5vw;
	right:11vw;
		background:url("img/inst.png");
		background-size:102% 102%;
		
		background-repeat:no-repeat;
}

.za{
    top:17.2vw;
}
}