/**
*** least.
*** Author: Kamil Czujowski, Sergej Müller
*** Version: 1.2
*** Made in ♥ - Copyright (c) 2013 Hamburg, Germany - All rights reserved.
*** https://twitter.com/kamilczujowski, http://wpcoder.de
**/

/* @group SCSS */
/* FONT */	 
@import url(http://fonts.googleapis.com/css?family=Arvo);
/* @end */

/* @group Mixins */

@mixin Georgia($size, $height, $weight: normal) {
	font-family: Georgia, Arial, sans-serif;
	font-size: $size;
	line-height: $height;
	font-weight: $weight;
}
@mixin Arvo($size, $height, $weight: normal) {
	font-family: Arvo, Arial, sans-serif;
	font-size: $size;
	line-height: $height;
	font-weight: $weight;
}

@mixin Raleway($size, $height, $weight: normal) {
	font-family: Arvo, Arial, sans-serif;
	font-size: $size;
	line-height: $height;
	font-weight: $weight;
}

@mixin Helvetica($size, $height, $weight: normal) {
	font-family: Helvetica, Arial, sans-serif;
	font-size: $size;
	line-height: $height;
	font-weight: $weight;
}
@mixin Courier($size, $height, $weight: normal) {
	font-family: Courier, Arial, sans-serif;
	font-size: $size;
	line-height: $height;
	font-weight: $weight;
}

@mixin transition ($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}

@mixin rotate($arguments) {
    -webkit-transform: $arguments;
    -moz-transform: $arguments;
    -ms-transform: $arguments;
    -o-transform: $arguments;
    transform: $arguments;
}

/* @end */

/* @group Colors */
$black: #000;
$white: #fff;
$red: #e94439;
$codeBlue: #53a0cd;
$whiteLight: #fafafa;

$borderWhite: #FFF;
$borderBlack: #333;

/* @end */

/* @group Default */
* {
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
}

ul {
	list-style: none;
}

h2 {
	@include Arvo(30px, 25px, 500);
	text-transform: uppercase;
	color: $white;
	letter-spacing: 1px;
}

p {
	@include Georgia(15px, 15px, 100);
	color: $white;
}
/* @end */

/* @group Gallery */
section {
	min-width:100%;
	width: 100%;
	min-height:100%;
	text-align: center;
	padding: 30px 0;
	margin-bottom: 30px;
	
	background-color: $borderBlack;
	box-shadow: 0 0 10px;
	
	/* @group Fullimage */
	#fullPreview {
		background-color: $borderBlack;
		border-top: 2px solid $borderBlack;
		border-bottom: 2px solid $borderBlack;
		padding: 50px 0 30px 0;
		
		display: none;
		
		img,
		.fullCaption {
		    max-width:960px;
		    width:100%;
		    margin:0 auto;
		    display:block;
		}
		
		.fullCaption {
			@include Helvetica(13px, 15px, 300);
			color: $white;
			margin: 15px auto 0 auto;
		}
		
		figure {
			background-image: url('../img/effects/close.png');
			background-size: 100%;
			
			width: 30px;
			height: 30px;
			
			position: absolute;
			top: 10px;
			right: 20px;
			
			cursor: pointer;
		}
	}
	
	/* @end */
	
	/* @group Smallimages */
	li {
		display: inline-block;
		vertical-align: top;
		position: relative;
		
			&:hover .overLayer {
				@include transition(opacity, 0.3s, linear);

				opacity: 0.6;
				display: block;
				background: lighten($black, 50%);
			}
			
			&:hover .infoLayer {
				@include transition(opacity, 0.3s, linear);

				opacity: 1;
				display: block;
			}
		
		a {
			display: block;
			width: 240px;
			height: 150px;
			position: absolute;
			top: 10px;
			left: 0;
			z-index: 6;
		}
		
		img {
			border: none;
			margin: 10px 10px 0 0;
		}
		
		/* @group Over */
		.overLayer,
		.infoLayer {
			@include transition(opacity, 0.3s, linear);

			width: 240px;
			height: 150px;
		    position: absolute;
		    text-align: center;
		    opacity: 0;
		    top: 10px;
		    left: 0;
		    z-index: 4;
		    
		    ul {
				padding: 50px 0 0 0;
					
				li {
					display:block;
					margin: 0 auto;
					width: 200px;
					padding: 0 0 5px 0;
						
					&:first-child {
						border-bottom: 2px $borderWhite solid;
					}
					
					&:last-child {
						padding: 5px 0 0 0;
						text-transform: lowercase;
					}
					
					h2 {
						font-size: 25px;
					}
				}
			}
		/* @end */	
		}
		/* @group Description */
		.projectInfo {
			display: none;
		}
		/* @end *
	/* @end */
	}
}
/* end */