/*  main css  */
html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;	
	background: #00913e;   
 	color: #fcef02;
	background-image: url("../gallery/bgnew.jpg");
        background-repeat:repeat; 
}

/* ................................Web page container to centre whole page....................... */
#page-container {
 	margin-right: auto;
	margin-left: auto;
	width: 98%; /* Holding outermost DIV */
	max-width: 960px;
	border:2px solid #000; 
	background: #fdef74;   
 	color: #fcef02;  	
}



/* ..............................Header container............................*/
#header_container {
 	width: 100%;
 	height: 40px;
 	background: #00913e;
 	color: #fcef02;
}


#header_right a:link, #header_right a:visited, #header_right a:active  {
	color: #f60606;
}

#header_right  a:hover {
	color: #00913e;
}


#header_left a:link, #header_left a:visited, #header_left a:active  {
	color: #f60606;
}

#header_left  a:hover {
	color: #00913e;
}
/* ...................................Header left .........................*/

#header_left {
 	width: 50%;
 	text-align: center; 
	float: left;
}
/* ...................................Header right .........................*/

#header_right {
 	width: 50%;
 	text-align: center; 
	float: right;
}

.gallery {
    margin: 10px 50px;
}
.gallery img{
    transition: 1s;
    padding: 15px;
    width: 20%;
}
.gallery img:hover {
    filter: greyscale(100%);
    transform: scale(1.1);
}



@media screen and (max-width: 640px) {
 .gallery img{
    width: 30%;
}   
    
}