@charset "utf-8";
/* CSS Document */


.transitionButton {
	font-family: 'Open Sans',Sans-Serif;
	position:relative;
	font-weight:bold;
	display:block;
	height:54px;
	width:30px;
	cursor:pointer;
	opacity:.6;
	z-index:250;
	background: transparent url(../images/transition-buttons.png) left top no-repeat;
	color:#4d4d4d !important;
	text-transform:uppercase;
	font-size: 1.4em;
	line-height:2.5em;
	overflow:hidden;	
}

.transitionButton i {
	font-family: 'FontAwesome';
	font-style:normal;
}

#new-animation-grid {
	position:absolute;
	width:100%;
	z-index: 1;
}

#grid-animation-wrapper {
	width:100%;
	position:relative;
	z-index: 2;
}

#transitionPrevHolder {
	position:fixed;
	display:block;
	/*height:54px;*/
	top:50%;
	margin-top: -27px;
	left:0;
	overflow:visible;
	padding:0px 50px 0px 0;
}

#transitionPrevHolder:hover,
#transitionPrevHolder.active {
	width:auto;
}

#transitionNextHolder {
	position:fixed;
	display:block;
	/*height:54px;*/
	top:50%;
	margin-top: -27px;
	right:0;
	overflow:visible;
	padding:0px 0 0px 50px;
}

#transitionNextHolder:hover,
#transitionNextHolder.active {
	width:auto!important;
}

#transitionNextButton {
	text-indent:-999px;
	background-position:right top;
}

#transitionNextHolder:hover #transitionNextButton,
#transitionNextHolder.active #transitionNextButton,
.active #transitionNextButton {
	display:block;
	background-position:right top;
}

#transitionNextHolder.hover .transitionButton,
#transitionNextHolder:hover .transitionButton,
#transitionNextHolder:focus .transitionButton,
#transitionNextButton:hover,
#transitionNextButton:focus {
	display:block;
	background-position:right bottom!important;
	width:auto!important;
	text-indent:0;
	text-align:right;
	text-decoration:none;
	padding:0 54px 0 15px;
}

#transitionPrevButton {
	text-indent:999px;
	background-position:left top;
}

#transitionPrevHolder:hover #transitionPrevButton,
#transitionPrevHolder.active #transitionPrevButton {
	display:block;
	background-position:left top;
}

#transitionPrevHolder.hover .transitionButton,
#transitionPrevHolder:hover .transitionButton,
#transitionPrevHolder:focus .transitionButton,
#transitionPrevButton:hover,
#transitionPrevButton:focus {
	display:block;
	background-position:left bottom!important;
	width:auto!important;
	text-indent:0;
	text-decoration:none;
	padding:0 15px 0 54px;
}

#transitionPrevHolder.forceHide,
#transitionNextHolder.forceHide,
#transitionNextButton.forceHide,
#transitionPrevButton.forceHide {
	display:none!important;
}


body.transition-in-progress .transitionButton,
body.transition-in-progress #main-nav ul li p,
body.transition-in-progress #main-nav ul li div,
body.transition-in-progress #main-nav ul li ul,
body.transition-in-progress #main-nav ul li.active ul,
body.transition-in-progress #main-nav ul li.active ul * body.transition-in-progress #sub-nav ul li p,
body.transition-in-progress #sub-nav ul li div,
body.transition-in-progress #sub-nav ul li ul,
body.transition-in-progress #sub-nav ul li.active ul,
body.transition-in-progress #sub-nav ul li.active ul * {
	visibility:hidden!important;
	border:1px solid red;
}

#new-animation-grid>article,
#new-animation-grid > div.hitArea > article,
#grid-animation-wrapper>article,
#grid-animation-wrapper > div.hitArea > article {
	position:relative;
}

@media screen and min-width1230px{
	.transitionButton {
		font-size:1.75em;
		line-height:2.6;
	}

	#touchOverlay {
		left:508px;
		top:410px;
	}

	#new-animation-grid,#grid-animation-wrapper {
		width:100%;
	}

	#transitionPrevHolder,#transitionNextHolder {
		top:448px;
	}
}