// styles

#GalleryView {

	width: 100%;
	height: 100%;
	overflow: hidden;

	#gallery-images {

		position: absolute;
		width: 100%; 
		height: 100%;
		z-index: 1;

		.gallery-image {

			position: absolute;
			top: 0px; // $headerHeight;
			left: 0px;
			z-index: 1;

			.label { display: none; }

			.loader {
				position: absolute;
				top: 50%;
				left: 0px;
				right: 0px;
				margin: -110px auto 0 auto;
				z-index: 3;
			}

			.overlay {

				position: absolute;
				
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 2;

				&.right { background: url($rootDir + 'assets/img/gallery/gradient-right.png') top left repeat-y; }
				&.left { background: url($rootDir + 'assets/img/gallery/gradient-left.png') top right repeat-y; }

				background-color: rgba(12,13,13,0.75) !important;
			}

			.image {
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 1;
			}
		}
	}

	#gallery-thumbs {

		position: absolute;
		bottom: 72px;
		left: 0px;
		width: 100%;
		height: 110px;
		padding-top: 30px;
		z-index: 2;

		border-top: 1px solid rgba(255,255,255,0.15);

		.container {

			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: inherit;
			text-align: center;			
			overflow: hidden;

			.gallery-thumb {

				position: relative;
				display: inline-block;
				width: 130px;
				height: 70px;
				margin: 20px 20px 0 0;
				opacity: 0.65;
				overflow: hidden;

				.label { display: none; }

				&:last {
					margin-right: 0px;
				}

				.image {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					z-index: 1;
					background-size: cover !important;
				}

				.border {
					
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					z-index: 2;
					opacity:0;

					-moz-box-shadow:    inset 0 0 0 2px #879598;
					-webkit-box-shadow: inset 0 0 0 2px #879598;
					box-shadow:         inset 0 0 0 2px #879598;
				}
			}

		}
	}

	.arrow {

		position: absolute;
		top: 44%;
		width: 80px;
		height: 80px;
		z-index: 99; 
		margin-top: -40px;

		font-size: 80px;

		a {
			position: absolute;
			width: 100%;
			height: 100%;
			
			color: #889699;
			opacity: 0.4;
			
			-webkit-transition: all 200ms ease-out;
			    -moz-transition: all 200ms ease-out;
			    -o-transition: all 200ms ease-out;
			    transition: all 200ms ease-out;
		}

		a:hover {
			color: #ced0d1;
			opacity: 1;
		}
	}

	.left-arrow {
		left: 50px;
	}

	.right-arrow {
		right: 50px;
	}

	.share {

		position: absolute;
		top: 0px; // $headerHeight;
		left: 0px;
		height: 40px;
		line-height: 40px;
		background-color: rgba(255, 255, 255, 0.1);
		white-space: nowrap;
		overflow: hidden;
		z-index: 99;

		@include denise;

		div {
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
		}

		.label {
			position: relative;
			display: inline-block;
			float: left;
			height: 40px;
			font-size: 14px;
			letter-spacing: 0.12em;
			padding: 2px 20px 0px 20px;
		}

		.share-icon {

			position: relative;
			display: inline-block;
			float: left;
			width: 40px;
			height: 40px;
			cursor: pointer;

			@include icons;

			-webkit-transition: background-color 50ms ease-out;
			    -moz-transition: background-color 50ms ease-out;
			    -o-transition: background-color 50ms ease-out;
			    transition: background-color 50ms ease-out;

		    a {

				-webkit-transition: opacity 200ms ease-out;
				    -moz-transition: opacity 200ms ease-out;
				    -o-transition: opacity 200ms ease-out;
				    transition: opacity 200ms ease-out;
		    }

		    .label {
				
				position: absolute;					
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				opacity: 1;
				z-index: 5;

				text-align: center;
		    }

			.bg {

				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				z-index: 4;

		   	 	opacity: 0.6;
			}

			&:hover {
				.bg { opacity: 1; }
			}
		}

		.share-icon.twitter, .social-icon.twitter { .bg { background-color: $twitterColor; }}
		.share-icon.facebook, .social-icon.facebook { .bg { background-color: $facebookColor; }}
		.share-icon.gplus, .social-icon.gplus { .bg { background-color: $gplusColor; }}
		.share-icon.pinterest, .social-icon.pinterest { .bg { background-color: $pinterestColor; }}
		.share-icon.tumblr, .social-icon.tumblr { .bg { background-color: $tumblrColor; }}
	}

}