/* default class to style each Card Deck Slideshow in general. Change name as desired. */

div.stackcontainer{
width: 250px; /* default width */
height: 200px; /* default height */
border: 1px solid gray;
overflow: hidden;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

	/* Do NOT change ".inner" class name itself, as it's used by script to identify each content */

div.stackcontainer > div.inner{
background: #D7F9FF; /* default background color of each slide */
overflow: hidden; /* keep this property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

	/* Add padding to child DIV of each ".inner" container */

div.stackcontainer > div.inner > div{ 
padding: 8px;
}

	/* hinge class that gets added to unveiling DIV (then removed) */

div.stackcontainer > div.hinge{
	box-shadow: 0 0 10px gray;
}

 /* CSS3 keyframes animation for unhinge effect */

@-moz-keyframes hingetopleft {
	0% { -moz-transform: rotate(0);}
	20% { -moz-transform: rotate(100deg);}
	40% { -moz-transform: rotate(65deg);}
	60% { -moz-transform: rotate(90deg);}
	80% { -moz-transform: rotate(80deg) translateY(0);}
	95% { -moz-transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { -moz-transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}


@-webkit-keyframes hingetopleft {
	0% { -webkit-transform: rotate(0);}
	20% { -webkit-transform: rotate(100deg);}
	40% { -webkit-transform: rotate(65deg);}
	60% { -webkit-transform: rotate(90deg);}
	80% { -webkit-transform: rotate(80deg) translateY(0);}
	95% { -webkit-transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { -webkit-transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}

@keyframes hingetopleft {
	0% { transform: rotate(0);}
	20% { transform: rotate(100deg);}
	40% { transform: rotate(65deg);}
	60% { transform: rotate(90deg);}
	80% { transform: rotate(80deg) translateY(0);}
	95% { transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}


@-moz-keyframes hingetopright {
	0% { -moz-transform: rotate(0);}
	20% { -moz-transform: rotate(-100deg);}
	40% { -moz-transform: rotate(-65deg);}
	60% { -moz-transform: rotate(-90deg);}
	80% { -moz-transform: rotate(-80deg) translateY(0);}
	95% { -moz-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { -moz-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}


@-webkit-keyframes hingetopright {
	0% { -webkit-transform: rotate(0);}
	20% { -webkit-transform: rotate(-100deg);}
	40% { -webkit-transform: rotate(-65deg);}
	60% { -webkit-transform: rotate(-90deg);}
	80% { -webkit-transform: rotate(-80deg) translateY(0);}
	95% { -webkit-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { -webkit-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}


@keyframes hingetopright {
	0% { transform: rotate(0);}
	20% { transform: rotate(-100deg);}
	40% { transform: rotate(-65deg);}
	60% { transform: rotate(-90deg);}
	80% { transform: rotate(-80deg) translateY(0);}
	95% { transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}