/*
Item Name : CSS3 Fullscreen Gallery
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.1
*/

/*

TABLE OF CONTENTS

01 PAGE AND GALLERY STYLING
02 GALLERY IMAGES
03 TOP NAVIGATION (THUMBNAILS)
04 IMAGES DESCRIPTION AREA (FOOTER)
05 TEXT BOX
06 NAVIGATION ARROWS
07 RESPONSIVE ELEMENTS

*/



/*  _______________________________________

	01 PAGE AND GALLERY STYLING
    _______________________________________  */



* {
	margin: 0; 
	padding: 0;
}
img {
	border:none;
}
#fullscreen_gallery {
	overflow: hidden;
	background:none;
}
#gallery_container { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
}
#gallery_images {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#gallery_images > li {
	width: 100%;
	height: 100%;
	position: absolute;
	margin:0;
	padding:0;
	z-index:1;

	background-color:#000000;
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	

    filter: alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;

	-webkit-transition: opacity linear 0.8s;
	-moz-transition: opacity linear 0.8s;
	-o-transition: opacity linear 0.8s;
	-ms-transition: opacity linear 0.8s;
	transition: opacity linear 0.8s;
}
#gallery_images > li:target {
	z-index:3;
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
}



/*  _______________________________________

	02 GALLERY IMAGES
    _______________________________________  */



#image1 {background:url("../images/gallery/a.jpg");}
#image2 {background:url("../images/gallery/b.jpg");}
#image3 {background:url("../images/gallery/c.jpg");}
#image4 {background:url("../images/gallery/d.jpg");}
#image5 {background:url("../images/gallery/e.jpg");}
#image6 {background:url("../images/gallery/f.jpg");}
#image7 {background:url("../images/gallery/g.jpg");}
#image8 {background:url("../images/gallery/h.jpg");}

	/* First Image on Page Load */
	
	/* There's a small problem happening on page load, as all slides appear
	   on :target (or mouse click), the first slide is not showing properly
	   so we need here a small fix.
	   The trick is to place again the last image at the end of the slideshow
	   and hide it when any other slide is loaded. It's only used to show properly
	   the first image with the arrows to navigate on page load.
	*/
	
	/* Defining and showing a background image (same as #image1) */
	
	#gallery_images #image_last {
		background:url("img/a.jpg");
		filter: alpha(opacity=100);
		-moz-opacity:1;
		-khtml-opacity:1;
		opacity:1;
		background-repeat:no-repeat;
		background-position:center center;
		background-attachment:fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;	
	}
	
	/* Hiding the image on the first click, #image1 will replace that one */
	
	#gallery_images li:target ~ #image_last {
		filter: alpha(opacity=0);
		-moz-opacity:0;
		-khtml-opacity:0;
		opacity:0;
	}



/*  _______________________________________

	03 TOP NAVIGATION (THUMBNAILS)
    _______________________________________  */



#gallery_navigation {
	position:absolute;
	z-index:9999;
	top:0;
	left:0;
	width:100%;
	background:none;
	list-style:none;
}
	#gallery_navigation li {
		float:left;
		margin:0;
		padding:0;
	}
	#gallery_navigation img {
		display:block;
		margin:12px 10px 12px 10px;
		
		-webkit-transition: opacity 0.8s;
		-moz-transition: opacity 0.8s;
		-o-transition: opacity 0.8s;
		-ms-transition: opacity 0.8s;
		transition: opacity 0.8s;

		filter: alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity:0.4;
		opacity:0.4;
	}
	#gallery_navigation img:hover {
		filter: alpha(opacity=80);
		-moz-opacity:0.8;
		-khtml-opacity:0.8;
		opacity:0.8;
	}
	#gallery_navigation img:focus {
		filter: alpha(opacity=100);
		-moz-opacity:1;
		-khtml-opacity:1;
		opacity:1;
	}
	#gallery_navigation a:focus {
		outline:none;
	}



/*  _______________________________________

	04 IMAGES DESCRIPTION AREA (FOOTER)
    _______________________________________  */



.gallery_description {
	position:absolute;
	z-index:9999;
	bottom:0;
	left:0;
	width:100%;
	background:#000000;
	background:rgba(0,0,0,0.85);
	list-style:none;
}
	.gallery_description h1,
	.gallery_description p {
		font-family:Arial, Helvetica, sans-serif;
		padding:0;
		color:#ffffff;
	}
	.gallery_description a {
		color:#C30;
		text-decoration:none;
	}



/*  _______________________________________

	05 TEXT BOX
    _______________________________________  */



.gallery_textbox {
	position:absolute;
	top:250px;
	z-index:9999;
	background:#000000;
	background:rgba(0,0,0,0.85);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}
.gallery_textbox h1,
.gallery_textbox p {
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
	color:#ffffff;
}
	.gallery_textbox h1 {
		font-size:24px;
		line-height:24px;
		margin-bottom:18px;
	}
	.gallery_textbox p {
		font-size:12px;
		line-height:18px;
		margin-bottom:18px;
	}
	.gallery_textbox p:last-child {
		margin-bottom:0;
	}
	.gallery_textbox a {
		color:#C30;
		text-decoration:none;
	}



/*  _______________________________________

	06 NAVIGATION ARROWS
    _______________________________________  */



.gallery_buttons {
	list-style:none;
	padding:0;
	margin:0;
}
	.gallery_buttons .nextbutton,
	.gallery_buttons .backbutton {
		position: absolute; 
		top: 104px;
		bottom:104px;
		width: 300px; 
	}
	.gallery_buttons .nextbutton {
		cursor: url('img/right.png'), e-resize;
		right:0;
	}
	.gallery_buttons .backbutton {
		cursor: url('img/left.png'), w-resize; 
		left: 0;
	}



/*  _______________________________________

	07 RESPONSIVE ELEMENTS
    _______________________________________  */



/* Some elements are resized to fit better according to
   the viewport (browser) size starting from 1024px screens.
   The modified elements are the header, the footer and the
   optionnal text box (shown in the 2nd slide).
*/

@media screen and (min-width: 1024px) {
	
	#gallery_navigation {
		min-width:1200px;
	}
		#gallery_navigation img {
			width:120px;
			height:80px;
		}
	.gallery_description {
		height:104px;
	}
	.gallery_description h1 {
		margin:22px 0 12px 12px;
		font-size:32px;
		line-height:32px;
	}
	.gallery_description p {
		margin:0 0 0 12px;
		font-size:11px;
		line-height:11px;
	}
	.gallery_textbox {
		width:400px;
		left:50%;
		margin-left:-225px;
		padding:25px;
	}
		.gallery_textbox h1 {
			font-size:24px;
			line-height:24px;
			margin-bottom:18px;
		}
		.gallery_textbox p {
			font-size:12px;
			line-height:18px;
			margin-bottom:18px;
		}
	
}
@media screen and (max-width: 1024px) {
	
	#gallery_navigation {
		min-width:1024px;
	}
		#gallery_navigation img {
			width:84px;
			height:56px;
		}
		.gallery_description {
			height:72px;
		}
		.gallery_description h1 {
			margin:14px 0 10px 12px;
			font-size:24px;
			line-height:24px;
		}
		.gallery_description p {
			margin:0 0 0 12px;
			font-size:9px;
			line-height:9px;
		}
	.gallery_textbox {
		width:300px;
		left:50%;
		margin-left:-165px;
		padding:15px;
	}
		.gallery_textbox h1 {
			font-size:18px;
			line-height:18px;
			margin-bottom:12px;
		}
		.gallery_textbox p {
			font-size:10px;
			line-height:16px;
			margin-bottom:16px;
		}
	
}