@charset "utf-8";
/* CSS Document */
#Gallerysw{text-align: center; width: 100%; margin-bottom: 45px}
#Gallerysw a{color:#FFFFFF; font-size: 1.1em}
#Gallerysw ul li{display: inline-block; width: 29%; padding: 35px}
.control{position: relative; width: 100%; margin: 10px auto;
   
  color: #fff; 
  text-align: center; 
  transition: all 0.3s ease;}
.control img{width: 100%; height: auto; border:6px dotted #888888; border-radius: 2px}
.control .msgbox{position: absolute; width:auto; top: 45%; left:-1%; background-color:#FF0004; padding: 3%; padding-left: 7%; padding-right: 5%}
.control:hover{  
  /* color:#494c46; */
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  box-shadow: inset 0 0 0 0px #555953;border:none; opacity: 0.7;}
 .frmatoImg{display:inline-block; margin-right:2%;margin-left:2%; width:20%}
 
 @media screen and (min-width:900px) and (max-width:1200px) 
 { 
 .frmatoImg{display:inline-block; margin-right:1%;margin-left:1%; width:31%}
 #Gallerysw ul li{width: 32%; padding:25px}
 }
 
@media screen and (min-width:840px) and (max-width:900px) 
 { 
 .frmatoImg{display:inline-block; margin-right:1%;margin-left:1%; width:30%}
  #Gallerysw ul li{width: 32%; padding: 15px}
 }
 
 @media screen and (min-width:600px) and (max-width:840px) 
 { 
 .frmatoImg{display:inline-block; margin-right:7%;margin-left:5%; width:34%}
 #Gallerysw ul li{width: 48%; padding: 15px}
 }
 
  @media screen and (min-width:100px) and (max-width:600px) 
 { 
 .frmatoImg{display: inline-block; margin-right:5%;margin-left:5%; width:42%}
 #Gallerysw ul li{width: 100%; padding: 15px}
 }