/* ==================== DIRECTORY ==================== */
/*				X. ATTRIBUTION
				1. PRIMARY NAVIGATION
				2. SECONDARY NAVIGATION
				3. LISTS
				4. TABLES
				5. GRIDS    
				6. OFF CANVAS
				7. OTHER    	                       */
/* =================================================== */

/* ==================== X. ATTRIBUTION =========================== */

/* ==================== 1. PRIMARY NAVIGATION ==================== */

	/* ==================== hover effect ========================= */

	.nav-item a {
		color: #212428;
		font-size: 2em;
		display: inline-block;
		text-decoration: none;
		overflow: hidden;
		vertical-align: top;
		-webkit-perspective: 600px;
		   -moz-perspective: 600px;
			-ms-perspective: 600px;
			    perspective: 600px;
		-webkit-perspective-origin: 50% 50%;
		   -moz-perspective-origin: 50% 50%;
			-ms-perspective-origin: 50% 50%;
			    perspective-origin: 50% 50%;
		z-index: 2;
	}

	.nav-item:hover span {
		background: #212428;
		-webkit-transform: translate3d(0px, 0px, -30px) rotateX(-90deg);
		-moz-transform: translate3d(0px, 0px, -30px) rotateX(-90deg);
		-ms-transform: translate3d(0px, 0px, -30px) rotateX(-90deg);
		transform: translate3d(0px, 0px, -30px) rotateX(-90deg);
	}

	.nav-item a span {
		display: block;
		position: relative;
		padding: 0 3px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
		-webkit-transform-origin: 50% 0%;
		-moz-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.nav-item a span:after {
		content: attr(data-title);
		display: block;
		position: absolute;
		text-transform: uppercase;
		left: 0;
		top: 0;
		padding: 0 3px;
		color: #E1432A;
		-webkit-transform-origin: 50% 0%;
		-moz-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: translate3d(0px, 105%, 0px) rotateX(90deg);
		-moz-transform: translate3d(0px, 105%, 0px) rotateX(90deg);
		-ms-transform: translate3d(0px, 105%, 0px) rotateX(90deg);
		transform: translate3d(0px, 105%, 0px) rotateX(90deg);
		text-shadow: .075em .075em #212428;
	}

	/*-------- logo cube ------------------------------------------- */

	.logo-cube-container {
		-webkit-perspective: 800px;
		        perspective: 800px;
	}

	.logo-cube {
		-webkit-transition: -webkit-transform 1s ease-in-out;
		transition: -webkit-transform 1s ease-in-out;
		transition: transform 1s ease-in-out;
		transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;
		width: 16.5em;
		height: 16.5em;
	}

	.front,
	.back,
	.left,
	.right {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		margin: 0 auto;
	}

	.front {
		-webkit-transform: translateZ(7em);
		        transform: translateZ(7em);
	}

	.back {
		-webkit-transform: translateZ(-7em) rotateY(270deg);
		        transform: translateZ(-7em) rotateY(270deg);
		-webkit-transform-origin: center left;
		        transform-origin: center left;
	}

	.left {
		-webkit-transform: rotateY(-270deg) translateX(7em);
		        transform: rotateY(-270deg) translateX(7em);
		-webkit-transform-origin: top right;
		        transform-origin: top right;
	}

	.right {
		-webkit-transform: translateZ(-7em) rotateY(180deg);
		        transform: translateZ(-7em) rotateY(180deg);
	}

	.back,
	.left,
	.right {
		display: none;
	}
	

/* ==================== 2. SECONDARY NAVIGATION ==================== */

/* ==================== 3. LISTS ==================== */

/* ==================== 4. TABLES ==================== */

/* ==================== 5. GRIDS ==================== */

/* ==================== 6. OFF CANVAS ==================== */

/*-------- Flipping Cards ------------------------------------------- */
	
	/* entire container, keeps perspective */
	.card-flip-container {
		-webkit-perspective: 1000px;
		        perspective: 1000px;
		margin-bottom: 6em;
	}

	/* flip the pane when hovered */
	.card-flip-container:hover .card-flip, 
	.card-flip-container:hover .card-flip {
		-webkit-transform: rotateY(180deg);
		        transform: rotateY(180deg);

	}

	.card-flip-container, 
	.front-face, 
	.back-face {
		width: 36em;
		height: 36em;
		border-radius: 50%;
	}

	/* flip speed goes here */
	.card-flip {
		-webkit-transition: 0.6s;
		transition: 0.6s;
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;
		position: relative;
	}

	/* hide back of pane during swap */
	.front-face, 
	.back-face {
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* front pane, placed above back */
	.front-face {
		z-index: 2;
		/* for firefox 31 */
		-webkit-transform: rotateY(0deg);
		        transform: rotateY(0deg);
	}

	/* back, initially hidden pane */
	.back-face {
		-webkit-transform: rotateY(180deg);
		        transform: rotateY(180deg);
	}
	
/* ==================== 7. CAROUSELS/IMAGE-VIEWERS === */

	/* ==================== SLIDE VIEWER ============= */

		.slide-viewer {
			position: relative;
			overflow: hidden;
			height: 55em;
			top: 0;
		}

		.slide-group {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.slide {
			width: 100%;
			height: 100%;
			display: none;
			position: absolute;
		}

		.slide-btn {
			margin: .5em;
			line-height: 1.125em;
			height: 1.25em;
			width: 1.25em;
			border: .125em solid #212428;
			border-radius: 25%;		
		}

		.active {
			border: .125em solid #E1432A; 
		}
		
		.slide:first-child {
			display: block;
		}

		.slide-1 {
			background: url("../img/carousel/slide_1.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-2 {
			background: url("../img/carousel/slide_2.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-3 {
			background: url("../img/carousel/slide_3.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-4 {
			background: url("../img/carousel/slide_4.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-5 {
			background: url("../img/carousel/slide_5.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-6 {
			background: url("../img/carousel/slide_6.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-7 {
			background: url("../img/carousel/slide_7.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-8 {
			background: url("../img/carousel/slide_8.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-9 {
			background: url("../img/carousel/slide_9.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-10 {
			background: url("../img/carousel/slide_10.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-11 {
			background: url("../img/carousel/slide_11.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}
		.slide-12 {
			background: url("../img/carousel/slide_12.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-13 {
			background: url("../img/carousel/slide_13.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-14 {
			background: url("../img/carousel/slide_14.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-15 {
			background: url("../img/carousel/slide_15.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-16 {
			background: url("../img/carousel/slide_16.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-17 {
			background: url("../img/carousel/slide_17.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-18 {
			background: url("../img/carousel/slide_18.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-19 {
			background: url("../img/carousel/slide_19.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

		.slide-20 {
			background: url("../img/carousel/slide_20.jpg") no-repeat center center;
			-webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;
			    background-size: cover;
		}

/*-------- beer photo viewer ------------------------------------------- */

#photo-viewer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: relative;
	height: 48em;
	max-width: 100%;
	width: 100%;
	overflow: hidden;
	margin: 2em auto;
	cursor: crosshair;
}

#photo-viewer.is-loading:after {
	content: url(../img/loader.gif);
	position: absolute;
	top: 0;
	right: 0;
	cursor: crosshair;
}

#photo-viewer img {
	position: absolute;
	max-width: 100%;
	width: 100%;
	top: 50%;
	left: 50%;
	cursor: crosshair;	
}

#thumbnails {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	cursor: crosshair;
	max-width: 80%;
	width: 100%;
	margin: 0 auto;
	height: auto;
}

#thumbnails .active {
	border: none;
	cursor: crosshair;
}

#thumbnails .active img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: crosshair;
}

.is-loading {
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	margin: 0 auto;
	cursor: crosshair;
}

.thumb-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	max-width: 50%;
	width: 100%;
	height: 34em;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	text-align: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: auto;
	cursor: crosshair;
}

.thumb-container h1 {
	font-size: 2em;
	margin-bottom: 1.5em;
	margin-top: 1.5em;
	border-bottom: .25em solid #E1432A;
	cursor: crosshair;
}

.thumb-row-1,
.thumb-row-2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	margin: 0 auto;
	cursor: crosshair;
}

.thumbnail-item {
	max-width: 30%;
	width: 100%;
	margin: auto;
	cursor: crosshair;
}

.thumbnail-item img {
	margin: .15em;
	border-radius: 25%;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: crosshair;
}