/* ============================== This is for Overall Styling of the Image Gallery. */
.gallery-container
{
    width:1024px;
    border:2px black;
    /*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; 
}
 
/* Styling the Pagination Thumbnail Images. */
.pagi-container
{
    width:1024;
    text-align:center; 
    border: 2px solid gray;
    padding-top: 600px; /* This creates the space for viewing the Slider Images. */
	padding-left:20px;
	padding-right:20px;
    position:relative;
    overflow:hidden;
}
 
.pagi-container input[name='input_thumb'] 
{
    display: none;  
}
 
.pagi-container >label
{
    border:1px solid #aaa; /* 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;
	margin-top: 5px;
}
 
.pagi-container >label:hover
{
    background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%);
}
 
.pagi-container label img
{
    opacity:0.7;    
}
 
.pagi-container label img:hover
{
    opacity:1.0;
}
 
/* This will add the Click Effect */
.pagi-container input[name='input_thumb']:checked+label {
    border:1px solid #111;
    opacity: 1;
}
 
.pagi-container input[name='input_thumb']:checked+label>img
{
    opacity:1;
}
 
.pagi-container input[name='input_thumb']:checked+label+img {
    opacity: 1;
    width:1024px;
    height:600px;
    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. */
#background
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20%;
    background-color: white;
    z-index: -1;
}
 
/* Different Styling for each Patterns. */
.DefaultBigStyle1
{
    position:absolute;
    opacity:0;
    width:1024px;
    height:600px;
    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);
}

img.thumb {
	width: 72px;
	height: 54px;
}