/* ============================== This is for Overall Styling of the Image Gallery. */
.gallery-container
{
    width:660px;
    margin:0px auto;
    padding:0px;
    display:table;
    position:relative;
    text-align:center;  
	display:inline-block;
}

@media screen and (min-height: 770px) {
.gallery-container{
	width:840px;
}
}

@media screen and (min-height: 920px) {
.gallery-container{
	width:1000px;
}
}
 
.gallery-container h2
{
    font-family: arial;
    color: grey;
    background: rgb(8, 9, 55);
    text-shadow: 0 0 15px #12C024;
}
 
/* Styling the Pagination Thumbnail Images. */
.pagi-container
{
    width:660px;
    text-align:center; 
    /*padding-top:505px; /* This creates the space for viewing the Slider Images. */
    position:relative;
    overflow:hidden;
	display: inline-block;
}

@media screen and (min-height: 770px) {
.pagi-container{
	width:840px;
	/*padding-top:640px;*/
}
}

@media screen and (min-height: 920px) {
.pagi-container{
	width:1000px;
	/*padding-top:760px;*/
}
}
 
.pagi-container input[name='input_thumb'] 
{
    display: none;  
}
 
.pagi-container >label
{
    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 #404741; */
}
 
.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 {
    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:640px;
    height:345px; */
	width: auto;
	height: auto;
    position:absolute;
    left:0px;
    top:0px;
	right:0px;
	/* bottom:200px; */
    -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);   
	/* margin: auto; */
}
 
/* 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: 26%;
    background-color: white;
    z-index: -1;
}
 
/* Different Styling for each Patterns. */
.DefaultBigStyle1
{
    position:absolute;
    opacity:0;
    width:640px;
    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);
}

.DefaultBigStyle1  img{
	padding-top:30px;
	margin: 0 auto;
}
 
.DefaultBigStyle2
{
    position:absolute;
    width:640px;
    height:345px;
    left:-650px;
    top:0px;
    opacity:0;
}
/* style used for image slider*/
.DefaultBigStyle3
{
    position:absolute;
    max-width:660px;
    max-height:495px;
    left:650px;
    top:0px;
    opacity:0;  
	margin: 0 auto;
}


 @media screen and (min-height: 770px) {
.DefaultBigStyle3
{
    position:absolute;
    max-width:840px;
    max-height:630px;
    left:650px;
    top:0px;
    opacity:0;  
}
}

 @media screen and (min-height: 920px) {
.DefaultBigStyle3
{
    position:absolute;
    max-width:1000px;
    max-height:750px;
    left:650px;
    top:0px;
    opacity:0;  
}
}

.DefaultBigStyle4
{
    position:absolute;
    width:640px;
    height:345px;
    left:0px;   
    top:-350px;
    opacity:0;  
}
 
.DefaultBigStyle5
{
    position:absolute;
    width:640px;
    height:345px;
    left:0px;   
    top:350px;
    opacity:0;  
    z-index:-2; /* IMPORTANT: To give the images coming from down direction a depth, so that it'll not overlap with the Pagination Thumbnail images. */
}
 
.DefaultBigStyle6
{
    position:absolute;
    width:640px;
    height:345px;
    left:650px;
    top:-350px;
    opacity:0;  
}
 
.DefaultBigStyle7
{
    position:absolute;
    width:640px;
    height:345px;
    left:0px;
    top:0px;
    opacity:0;
    -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(0.5);  
}
}