@media screen and (max-width: 700px){ 

   
.ka{
/*background:RED;*/
/*width:700px;
height:500px;*/
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
justify:center;
}
.bar{
display:flex;
flex-direction:center;
align-items:center;
text-align:center;
justify-content:center;
}
.vk{
display:none;
}

.ke{
/*background:purple;*/
width:400px;
height:300px;
margin-left:50px;

}
.ki{
/*background:skyblue;*/

width:400px;
height:300px;
margin-left:80px;
}
.mas{
display:none;
flex-direction:column;
margin-left:60px;
height:20px;
}
.clow{
display:none;

}
.end{
display:flex;
flex-direction:column;
height:20px;

}
.mus{
display:flex;
flex-direction:column;
margin-left:60px;
height:60px;

}
.ta{
padding-top:50px;
}
.ha{
/*background:pink;*/
/*width:600px;
height:70px;*/
display:flex;
flex-direction:column;
align-content:center;
text-align:center;
justify:center;
margin-left:20%;
}


.he{
/*background:green;*/
/*width:600px;
height:20px;*/
/*margin-left:10%;
margin-top:30px;*/
display:none;
flex-direction:column;


}
.van{
/*background:green;*/
/*width:600px;
height:20px;*/
/*margin-left:10%;
margin-top:30px;*/
display:flex;
flex-direction:column;
}


.hi{
/*background:maroon;*/
/*width:100px;
height:20px;*/
margin-left:20px;
margin-top:30px;
margin-bottom:20px;
}
a{
text-decoration:none;
padding-left:6px;
display:flex;
flex-direction:column;

}
}
@media screen and (min-width: 700px){ 
 body{background-image:url("j.jpg");   
.ka{
/*background:BLUE;*/
width:1000px;
height:500px;
display:flex;
flex-direction:row;
align-items:center;
text-align:center;
justify:center;
}
.ke{
/*background:purple;*/
width:400px;
height:300px;
margin-left:60px;
}
.bar{
display:none;
}
.ki{
/*background:skyblue;*/

width:400px;
height:300px;
margin-left:80px;
}
.ta{
padding-top:50px;
}
.ha{
/*background:pink;*/
/*width:600px;
height:70px;*/
display:flex;
flex-direction:row;
/*align-content:center;
text-align:center;
justify:center;*/
}

.he{
/*background:green;*/
/*width:600px;
height:20px;*/
margin-left:40px;
margin-top:30px;
display:flex;
flex-direction:row;

}
.hi{
/*background:maroon;*/
/*width:100px;
height:20px;*/
margin-left:20px;
margin-top:30px;
display:flex;
flex-direction:row;
}
a{
text-decoration:none;
padding-left:6px;
display:flex;
flex-direction:row;

}

.mas{
display:none;
}
.own:hover .mas{

display:flex;
flex-direction:column;
}
.clow{
display: none;
}

.golw:hover .clow{
display:flex;
flex-direction:column;
margin-left:60px;
}
.end{

display:flex;
flex-direction:column;
margin-left:40px;
height:20px;

}

}