* {box-sizing: border-box;}  

#div1_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 322px;
	margin-left: 2px;
	 width: 230px;
	  background-color: lightpink;
	 height:640px;
}

#frame1_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 5px;
	margin-left: 5px;
	 width: 217px;
	 height:620px; 
	 background-color: lightgreen;
}


#div2_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 2px;
	margin-left: 1080px;
	 width: 255px;
	 background-color: lightblue;
	 height: 640px;
}

#frame2_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 5px;
	margin-left: 5px; 
	 width: 240px;
	 height:620px; 
	  background-color: lightyellow;
}


#div3_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 2px;
	margin-left: 235px;
	 width: 840px;
	 background-color: #B78DDD;
	 height: 90px;
}


#div4_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 95px;
	margin-left: 235px;
	 width: 840px;
	 background-color: #CBF085;
	 height: 490px;
	 overflow-x: scroll;
	
	
}


/*myimage  -- div4_img1_id  */
#myimage  {
	  position: absolute;
	   margin-top: 2px;
	 margin-left: 2px;
	 border: 5px solid #d59;
	  border-radius: 4px;
	  padding: 5px;
	 height: 410px;
	
}

/* #div4_id  myimage:not( :hover ){z-index: 1;} */

#div4_btn1_id  {
	 position: absolute;
	 margin-top: 416px;
	 margin-left: 10px;
	 height: 25px;
	 width: 60px;
	 background-color: yellow;
}


#div4_btn2_id  {
	 position: absolute;
	 margin-top: 416px;
	 margin-left: 80px;
	 height: 25px;
	 width: 60px;
	 background-color: lightgreen;
}

#div4_btn3_id  {
	 position: absolute;
	 margin-top: 416px;
	 margin-left: 150px;
	 height: 25px;
	 width: 60px;
	 background-color: yellow;
}


#div4_btn4_id  {
	 position: absolute;
	 margin-top: 416px;
	 margin-left: 220px;
	 height: 25px;
	 width: 60px;
	 background-color: yellow;
}


#div4_btn5_id  {
	 position: absolute;
	 margin-top: 416px;
	 margin-left: 290px;
	 height: 25px;
	 width: 60px;
	 background-color: yellow;
}


#div4_btn6_id  {
	 position: absolute;
	 margin-top: 445px;
	 margin-left: 20px;
	 height: 25px;
	 width: 90px;
	 background-color: yellow;
}


#div4_btn7_id  {
	 position: absolute;
	 margin-top: 445px;
	 margin-left: 130px;
	 height: 25px;
	 width: 90px;
	 background-color: yellow;
}


#myvideo{
	position: absolute;
	 margin-top: 1000px;
	 margin-left: 220px;
	 height: 500px;
	 width: 700px;
	 z-index: -1;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid black;
  /*set the size of the lens:*/
  width: 100px;
  height: 100px;
}

.img-zoom-result {
  position: absolute;
  margin-top:  1px;
  margin-left: 415px;
 border: 1px solid black;
 background-color: green;
  /*set the size of the result div:*/
  width: 420px;
  height: 420px;
   z-index: -1;
  }

  
/* #myimage:hover   .img-zoom-result  {   z-index: -1; background-color: yellow; } */

 #myimage:hover   ~   .img-zoom-result { z-index: +1; background-color: yellow; }
 
 
/* #myresult{ } */

 /* .div4_cls  button:hover  { background-color: red;} */

/* Change background color of buttons on hover */
.div4_cls button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.div4_cls button.active {
  background-color: #ccc;
}
/*  -------------- div 5------------------------- */

#div5_id{
	 position: absolute;
	 padding: 0px 0px;
	 margin-top: 95px;
	margin-left: 650px;
	 width: 420px;
	 background-color: #E9DD89;
	 height: 490px;
	
}