/* ============================== This is for Overall Styling of the Image Gallery. */
.serengeti_pgs_gallery-container
{
	width:100%;
	border:1px solid orange;
	/*border-radius*/
	-webkit-border-radius:5px 5px 10px 10px;
	-moz-border-radius:5px 5px 10px 10px;
	
	border-radius:5px 5px 10px 10px;
	margin:10px auto;
	padding:0px;
	display:table;
	position:relative;
	text-align:center; 
	
	-webkit-box-shadow: 1px 2px 6px -1px rgba(0,0,0,0.79); 
	box-shadow: 1px 2px 6px -1px rgba(0,0,0,0.79);
}

.serengeti_pgs_gallery-container h2
{
	font-family: arial;
	color: #fff;
	background: #ccc; 
}

/* Styling the Pagination Thumbnail Images. */
.serengeti_pgs_pagi-container
{
	width:100%;
	text-align:center; 
	border: 1px solid orange;
	/*border-radius*/
	-webkit-border-radius:0px 0px 8px 8px;
	-moz-border-radius:0px 0px 8px 8px;
	border-radius:0px 0px 8px 8px;
	padding-top:350px; /* This creates the space for viewing the Slider Images. */
	position:relative;
	overflow:hidden;
}

.serengeti_pgs_pagi-container input[name='input_thumb'] 
{
	display: none;	
}

.serengeti_pgs_pagi-container >label
{
	border:1px solid #aaa;
	padding:5px; /* This is important to Increase the Click-able Region of the anchor Elements */
	background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8));
	display:inline-flex;	
	transition: all 0.5s;
	margin-bottom: 5px;
	box-shadow: 0 0 30px #f1f1f1;
}

.serengeti_pgs_pagi-container >label:hover
{
	background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%);
}

.serengeti_pgs_pagi-container label img
{
	opacity:0.7;	
}

.serengeti_pgs_pagi-container label img:hover
{
	opacity:1.0;
}

/* This will add the Click Effect */
.serengeti_pgs_pagi-container input[name='input_thumb']:checked+label {
	border:1px solid #111;
	opacity: 1;
}

.serengeti_pgs_pagi-container input[name='input_thumb']:checked+label>img
{
	opacity:1;
}

.serengeti_pgs_pagi-container input[name='input_thumb']:checked+label+img {
	opacity: 1;
	width:100%;
	height:345px;
	position:absolute;
	left:0px;
	top:0px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;	
	transform: scale(1);	
}

/* Adding #background region to hide the images coming from bottom direction, as it'll overlap with the Pagination Thumbnail images, while transitioning from Down direction. */
#sppgbackground
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 26%;
	background-color: white;
	z-index: -1;
}

/* Different Styling for each Patterns. */
.serengeti_pgs_pg_DefaultBigStyle1
{
	position:absolute;
	opacity:0;
	width:100%;
	height:345px;
	left:0px;
	top:0px;	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	transform:scale(1.05);
}

.serengeti_pgs_pg_DefaultBigStyle2
{
	position:absolute;
	width:100%;
	height:345px;
	left:-650px;
	top:0px;
	opacity:0;
}

.serengeti_pgs_pg_DefaultBigStyle3
{
	position:absolute;
	width:100%;
	height:345px;
	left:650px;
	top:0px;
	opacity:0;	
}