@charset "UTF-8";

span.roll {
    background:url(mag.png) center center no-repeat #1c8eb4;
    height: 204px;
    position: absolute;
    width: 300px;
    z-index: 10;	
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
	-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
} 

/* css-method */

span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 200px;
	width: 300px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

@media only screen and (min-width: 790px) and (max-width: 965px) {
	span.roll {
      	height: 184px;
    	width: 270px;
	} 

	.imgborder { width: 270px; }
}

@media only screen and (max-width: 789px) {
	span.roll {
      	height: 130px;
    	width: 190px;
	} 

	.imgborder { width: 190px; }
}