/*!
 * kontext
 * http://lab.hakim.se/kontext
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */
.kontext {
	width: 100%;
	height: 100%;
}

.kontext .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	/*box-shadow: 0px 0px 120px rgba( 0, 0, 0, 0.8 );*/
}

.kontext .layer.show {
	visibility: visible;
}

.kontext.capable {
	-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
	        perspective: 1000px;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.kontext.capable .layer {
	-webkit-transform: translateZ( -100px );
	   -moz-transform: translateZ( -100px );
	        transform: translateZ( -100px );
}

.kontext.capable .layer.show {
	-webkit-transform: translateZ( 0px );
	   -moz-transform: translateZ( 0px );
	        transform: translateZ( 0px );
}

.kontext.capable.animate .layer.show.right {
	-webkit-animation: show-right 800ms cubic-bezier(0.26,.86,.44,.985);
	   -moz-animation: show-right 800ms cubic-bezier(0.26,.86,.44,.985);
	        animation: show-right 800ms cubic-bezier(0.26,.86,.44,.985);
}

.kontext.capable.animate .layer.hide.right {
	/**/
			-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
			-moz-transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
			transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
				
			-webkit-transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0); 
			-moz-transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0) ;
			transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0) ;
			opacity: 0; 
			 
}

.kontext.capable.animate .layer.show.left {
	-webkit-animation: show-left 800ms cubic-bezier(0.26,.86,.44,.985);
	   -moz-animation: show-left 800ms cubic-bezier(0.26,.86,.44,.985);
	        animation: show-left 800ms cubic-bezier(0.26,.86,.44,.985);
}

.kontext.capable.animate .layer.hide.left {
	-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
	-moz-transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
	transition: -webkit-transform-origin 800ms cubic-bezier(0.26,.86,.44,.985),-webkit-transform 800ms cubic-bezier(0.26,.86,.44,.985),visibility 800ms cubic-bezier(0.26,.86,.44,.985),opacity 800ms cubic-bezier(0.26,.86,.44,.985);
			
			
	-webkit-transform:  scale(0.8) translate3d(50%,0,0)  rotateY(90deg) translate3d(100%,0,0) ;
	-moz-transform:  scale(0.8) translate3d(50%,0,0)  rotateY(90deg) translate3d(100%,0,0) ;
	transform:  scale(0.8) translate3d(50%,0,0)  rotateY(90deg) translate3d(100%,0,0) ;
	
	opacity: 0; 
}


/* CSS animation keyframes */

@-webkit-keyframes show-right {
	0%   {-webkit-transform:  scale(0.8) translate3d(50%,0,0)  rotateY(90deg) translate3d(100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}

@-moz-keyframes show-right {
	0%   {-moz-transform:  scale(0.8) translate3d(50%,0,0)  rotateY90deg) translate3d(100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}

@keyframes show-right {
	0%   {transform:  scale(0.8) translate3d(50%,0,0)  rotateY(90deg) translate3d(100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}

@-webkit-keyframes show-left {
	0%   {-webkit-transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}

@-moz-keyframes show-left {
	0%   {-moz-transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}


@keyframes show-left {
	0%   {transform:  scale(0.8) translate3d(-50%,0,0)  rotateY(-90deg) translate3d(-100%,0,0) ; opacity: 0;}
	100% { opacity: 1; }
}


/* Dimmer */

.kontext .layer .dimmer {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	background: transparent;
	z-index: 100;
}

	.kontext.capable.animate .layer .dimmer {
		-webkit-transition: background 0.7s ease;
		   -moz-transition: background 0.7s ease;
		        transition: background 0.7s ease;
	}