/*************************/
 /***   GLOBAL STYLES   ***/
/*************************/
	
	.cards-deck {
		overflow: hidden;
	}

	.cards-deck ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex;
	}
	.cards-deck a {
		display: block;
		margin: 10px;
		box-shadow: 0 0 20px rgba(0,0,0,.25);
	}
	.cards-deck img {
		display: block;
		width: 100%;
	}
	h3 {
		text-align: center;
		color: #CCC;
		text-transform: uppercase;
		letter-spacing: .2em;
		font-weight: bold;
		margin-bottom: 15px;
		font-size: 12px;
		margin-bottom: 0;
	}
	h2 {
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		margin-bottom: 15px;
		font-size: 32px;
		max-width: 600px;
		padding: 0 10px;
		margin: 0 auto 1em auto;
		line-height: 1.2;

	}
	@media (min-width:600px) {
		h2 {
			font-size: 56px;
		}
	}


  /*****************/
 /***   MOBILE  ***/
/*****************/

	@media (max-width:599px) {

		.cards-deck ul {
			position: relative;
			height: 100vw;
		}
		.cards-deck li {
			position: absolute;
			top: 6vw;
			left: 12vw;
			opacity: 0;
			z-index: 0;
			transition: top 500ms, left 500ms, opacity 500ms;
		}
		.cards-deck li.top {
			top: 0;
			left: 6vw;
			opacity: 1;
			z-index: 5;
		}
		.cards-deck li.top + li {
			top: 2vw;
			left: 8vw;
			opacity: 1;
			z-index: 4;
		}
		.cards-deck li.top + li + li {
			top: 4vw;
			left: 10vw;
			opacity: .75;
			z-index: 3;
		}
		.cards-deck li.top + li + li + li {
			top: 6vw;
			left: 12vw;
			opacity: .5;
			z-index: 2;
		}
		.cards-deck li.gone {
			top: 0;
			left: -100vw;
			opacity: .5;
			z-index: 6;
		}
		.cards-deck li.gone.right {
			left: 100vw;
		}
		.cards-deck li a {
			width: 80vw;
		}
	}


  /******************/
 /***   DESKTOP  ***/
/******************/

	@media (min-width:600px) {

		.cards-deck .deck-container {
			width: 9999px;
		}

		.cards-deck .deck-container ul {
			float: left;
			padding: 0 50px;
		}

		.cards-deck a {
			margin: 20px;
			width: 320px;
		}
		
	}