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

   background-image:url(fons.jpg);
   background-repeat:no-repeat;
   background-size:cover;
   }
   
   
table.center{
    margin: 0 auto;   
	
}

#container {    /* THIS PART IS FOR DISPLAY PURPOSES ONLY - you can delete this and the button will work just fine */
	width: 300px;
	height: 300px;
	margin: 0px auto;
	margin-top: 100px;
}










#button8-container {
	width: 300px;
	height: 300px;
	background-image:url(assets/photodisc.png);  /* THIS IS FOR THE PHOTO */
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	float: left;
	
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	
	cursor: pointer;
}

#button8-container .boxholder {
	width: 190px;
	height: 35px;
	margin-top: 220px;
	background-color:#7b3f47;
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#button8-container:hover .boxholder{
	margin-top: 165px;
}

#button8-container:hover {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	
	background-image:url(assets/photodisc.png);
}

#button8-container .boxholder p {   /* since we have rotated upside down - the alignment is weird = up=down and down=up */
	position: relative;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	color:#FFF;
	text-align: center;
	line-height: 25px;
	margin-top: 5px;   
	margin-left: 20px;
	margin-right: 20px;
}



























#button9-container {
	width: 300px;
	height: 300px;
	background-image:url(assets/andreuma.png);  /* THIS IS FOR THE PHOTO */
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	float: left;
	
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	
	cursor: pointer;
}

#button9-container .boxholder {
	width: 190px;
	height: 35px;
	margin-top: 220px;
	background-color:#7b3f47;
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#button9-container:hover .boxholder{
	margin-top: 165px;
}

#button9-container:hover {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	
	background-image:url(assets/andreuma.png);
}

#button9-container .boxholder p {   /* since we have rotated upside down - the alignment is weird = up=down and down=up */
	position: relative;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	color:#FFF;
	text-align: center;
	line-height: 25px;
	margin-top: 5px;   
	margin-left: 20px;
	margin-right: 20px;
}









#button10-container {
	width: 300px;
	height: 300px;
	background-image:url(assets/photonoia.png);  /* THIS IS FOR THE PHOTO */
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	float: left;
	
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	
	cursor: pointer;
}

#button10-container .boxholder {
	width: 190px;
	height: 35px;
	margin-top: 220px;
	background-color:#7b3f47;
	
	-ms-transition: all .5s ease;  /* THIS IS FOR THE ANIMATION */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#button10-container:hover .boxholder{
	margin-top: 165px;
}

#button10-container:hover {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	
	background-image:url(assets/photonoia.png);
}

#button10-container .boxholder p {   /* since we have rotated upside down - the alignment is weird = up=down and down=up */
	position: relative;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	
	color:#FFF;
	text-align: center;
	line-height: 25px;
	margin-top: 5px;   
	margin-left: 20px;
	margin-right: 20px;
}