@charset "utf-8";
/* CSS Document */

.box2 img:hover, .box3 img:hover {  
   transform: 
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
@media (min-width: 1000px) and (max-width: 10000px) {
.box2 img {
	width: 240px; height: auto; 
}
 .box3 img {
	width: auto; height: 160px; 
}
.box3 img:hover {  
   transform: 
     scale(4, 4)
     translate(12px, 12px);
  }
.box2 img:hover{  
   transform: 
     scale(3, 3)
     translate(12px, 12px);
  }
.hist ul{
	list-style: none;
	width: 900px;
	margin: 0 auto;
}	
.hist ul li{
	display: inline-block;
	margin: -5px 20px;
	width: 240px; height: auto;
}

}
@media (min-width: 500px) and (max-width: 999px) {
.box2 img {
	width: 180px; height: auto; 
}
.box3 img {
	width: auto; height: 120px; 
}
.box3 img:hover {  
   transform: 
     scale(3, 3)
     translate(12px, 12px);
  }
.box2 img:hover {  
   transform: 
     scale(4, 4)
     translate(12px, 12px);
  }
.hist ul{
	list-style: none;
	width: 400px;
	margin: 0 auto;
}	
.hist ul li{
	display: inline-block;
	margin: 5px 0px;
	width: 180px; height: auto;
}

}
@media (min-width: 40px) and (max-width: 499px) {
.box3 img, .box2 img {
	width: 90%; height: auto; 
	margin-left: -40px;
}

.box3 img:hover {  
   transform: 
     scale(2, 2)
     translate(5px, 5px);
  }
.box2 img:hover {  
   transform: 
     scale(3, 3)
     translate(5px, 5px);
  }
.hist ul{
	list-style: none;
	width: 180px;
	margin: 0 auto;
}	
.hist ul li{
	display: block;
	margin-bottom:5px;
	width: 90%; height: auto;
}
.box3 h3, .box2 h3 {
	margin-left: -40px;
	
}

}