@charset "UTF-8";
* {
    box-sizing:border-box;
    margin-top: 0px;
}
body, html {
    width:100%;
    height:100%;
}
body {
    font-family:Sans-Serif;
    padding: 0px;
    background-color: #333;
    color: #FFF;
    margin:0px;
    padding: 0px;
}
.magnify {
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
    z-index: 20;
    background-color:blue;
    position: absolute;
}
 
.magnify img {
    display:block;
}
 
.drag_zone {
    position: absolute;
    width: 600px;
    height:400px;
    bottom:10px;
    right:10px;
    z-index:800;
    border:solid #fff 1px;  
}
 
.element_to_magnify {
    position: absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
    overflow: hidden;
}
.element_to_magnify  a {
  display:block;
  position:absolute;
  top:80px;
  right:80px;
  background-color:rgba(200, 200, 200, .25);
  padding:4px;
  font-size:18px;
  color:#fff;
}
.element_to_magnify img{
    width: 100%;
    height: auto;
}
.magnified_element {
    /* so you can contol the magnified stuff*/
}
 
.mag_zone {
    position: absolute;
    left: 0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index: 290;
    overflow:hidden;
    background-color: #999;
}
 
.magnify_glass {
    z-index: 300;
    position: absolute;
    background:none;
    top:0px;
    left:0px;
    width: 200px;
    height: 200px;
    border: 4px solid #CCC;
    background-color: rgba(200,200,200,.5);
    cursor: move;
}