﻿/*figure caption css*/
.imgSection{
margin-left:auto;
	height:580px;
	width:900px;
}




#centreBlock {
height:auto;
width:auto;
	
}

#img-caption{
	width:350px;
	height:225px;
	float:left;
	position:relative;
	margin-bottom:5px;
	margin-left:20px;
	padding-bottom:20px;

}

.img-caption-heading{
	margin-left:3px;
	margin-right:15px;
	background-color:#99aa66;
	font-size:13px;

}

.img-caption-one{
	margin-top:10px;
}

.img-caption-two{
	margin-top:10px;
}
.img-caption-three{
	margin-top:50px;
}

.img-caption-four{
	margin-top:50px;
}





figure {
   margin:0;
   position:relative;
  
   border:5px solid white;

   -webkit-box-shadow:0 0 4px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 4px rgba(0,0,0,.3);
   box-shadow:0 0 4px rgba(0,0,0,.3);
   display:block;
   cursor:pointer;
   overflow:hidden;
}

figure:hover figcaption {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;

   -webkit-transform:rotate(0);
   -moz-transform:rotate(0);
   -o-transform:rotate(0);
   -ms-transform:rotate(0);
   transform:rotate(0);
   top:0;
}

figcaption {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   position:absolute;
   height:100%;
   width:100%;
   top:-100%;
   background:rgba(0,0,0,.4);
   color:white;

   -webkit-transition:all .4s ease-in;
   -moz-transition:all .4s ease-in;
   -o-transition:all .4s ease-in;
   -ms-transition:all .4s ease-in;
   transition:all .4s ease-in;

   -webkit-transition-delay:.5s;
   -moz-transition-delay:.5s;
   -o-transition-delay:.5s;
   -ms-transition-delay:.5s;
   transition-delay:.5s;

   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -o-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   transform:rotate(360deg);
}

figure img {
   -webkit-transition:all 1.5s;
   -moz-transition:all 1.5s;
   -o-transition:all 1.5s;
   -ms-transition:all 1.5s;
   transition:all 1.5s;
}

figure:hover img {
   -webkit-transform:scale(1.1);
   -moz-transform:scale(1.1);
   -o-transform:scale(1.1);
   -ms-transform:scale(1.1);
   transform:scale(1.1);
}

figcaption h3,figcaption p {
   padding:10px 20px;
   margin-bottom:0;
   margin-top:0;
   position:relative;
   left:100%;

   -webkit-transition:all .4s;
   -moz-transition:all .4s;
   -o-transition:all .4s;
   -ms-transition:all .4s;
   transition:all .4s;
}

figure:hover h3,figure:hover p {
   left:0;
}

figcaption h1 {
   background:black;
   margin-top:20px;
}

figcaption p {
   -webkit-transition-delay:1.2s;
   -moz-transition-delay:1.2s;
   -o-transition-delay:1.2s;
   -ms-transition-delay:1.2s;
   transition-delay:1.2s;
}

figcaption h1 {
   -webkit-transition-delay:1s;
   -moz-transition-delay:1s;
   -o-transition-delay:1s;
   -ms-transition-delay:1s;
   transition-delay:1s;
}

figcaption a {
   color:white;
}
