@charset "UTF-8";

#container{
	position:relative;
	padding-top:40px;
	height:900px;
	margin:40px 10px 10px 10px;
	background-image:url(kaart-back-01.jpg);
	overflow:hidden;	
	-webkit-box-shadow: inset 0px 0px 40px 5px rgba(36,25,93,0.2);
	-moz-box-shadow: inset 0px 0px 40px 5px rgba(36,25,93,0.2);
	box-shadow: inset 0px 0px 40px 5px rgba(36,25,93,0.2);
}
#reset{
	position:relative;
	height:80px;
	width:80px;
	top:820px;
	margin-left:80px;
	background-color:#FFF;
	z-index:98;
	border-top-left-radius:50px;
	border-top-right-radius:50px;
	
	background-color:#f9f9f9;
	-webkit-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.22);
	-moz-box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.22);
	box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.22);
}
.reset1{
	position:relative;
	height:40px;
	width:40px;
	border: 5px solid #b21724;
	margin:0 auto;
	top:15px;
	border-radius:50px;
	background-color:#b21724;
	
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,1);
	cursor:pointer;
}
.reset1 img{
	position:relative;
	height:40px;
	width:40px;
		-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}
.reset2 {
	position:relative;
	height:40px;
	width:40px;
	border: 5px solid #800000;
	margin:0 auto;
	top:15px;
	border-radius:50px;
	
	-webkit-box-shadow: inset 0px 0px 10px 5px rgba(128,0,0,1);
	-moz-box-shadow: inset 0px 0px 10px 5px rgba(128,0,0,1);
	box-shadow: inset 0px 0px 10px 5px rgba(128,0,0,1);
	cursor:pointer;
}
	
/* kaartjes */

.kaartje { 
 height: 300px;
 width:200px;
 background-color:#FFF;
 border-radius:10px;
 overflow:hidden;
 margin: 10px;
 cursor: pointer;
 
 -webkit-box-shadow: 0px 4px 10px -3px rgba(0,0,0,1);
 -moz-box-shadow: 0px 4px 10px -3px rgba(0,0,0,1);
 box-shadow: 0px 4px 10px -3px rgba(0,0,0,1);
}
.kaartje > img{ 
	width:100%;
	height:auto;
 	border-radius:10px;
}

#twee {
	position:relative;
	left:1%; 
	top:50px;
	z-index:2;
}

#drie {
	position:relative;
	tion:relative;
	left:5%;  
	top:-560px;
	z-index:3;
	}

#vier {
		position:relative;
	left:9%;
	top:-240px;
		z-index:4;
	}

#vijf {
		position:relative;
	left:13%; 
	top:-850px;
		z-index:5;
	}

#zes {
		position:relative;
	left:17%; 
	top:-1150px;
		z-index:6;
	}

#zeven {
		position:relative;
	left:21%; 
	top:-1450px;
		z-index:7;
	}

#acht {
		position:relative;
	left:25%; 
	top:-1750px;
		z-index:8;
	}
	
#negen {
		position:relative;
	left:29%; 
	top:-2051px;
		z-index:9;
	}
	
#tien {
		position:relative;
	left:33%; 
	top:-2350px;
		z-index:10;
	}

#jack {
		position:relative;
	left:37%; 
	top:-2650px;
		z-index:11;
}

#queen {
		position:relative;
	left:41%; 
	top:-2950px;
		z-index:12;
	}
#king {	
	position:relative;
	left:45%; 
	top:-3250px;
		z-index:13;
	}
#aas {	
	position:relative;
	left:49%; 
	top:-3550px;
		z-index:14;
	}
#joker {
		position:relative;
	left:53%; 
	top:-3850px;
		z-index:15;
	}
	
	/* bottom part */
	
.after{
	width:100%;
	height:auto;
	overflow:hidden;
}

#stack{
	position:relative;
	width:100%;
	height:800px;
	z-index: 1;
	overflow:hidden;
}



#stack img{
	position:relative;
	width:1200px;
	height:auto;
	right:-55%;
	margin-bottom:0;
	text-align:right;
}

#lion{
		display:block;
	position:relative;
	width:100%;
	height:200px;
	left:40%;
	top:-400px;
	z-index: 1;
	margin-top:-200px;
}

#lion img {
	position:relative;
	width:auto;
	height:400px;
	margin-bottom:0;
	   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.story {
	position:relative;
	margin:-780px 0 0  15%;
	width:400px;
	max-width:800px;
	font-family: 'Sarala', sans-serif;
	font-size:1em;
	color:#444;
	text-align:justify;
	line-height:1.8;
	display:inline-block;
	float:left;
	z-index: 2;
}
	
/* next, previous buttons */

.button {
	width:175px;
	height:50px;
	margin:-80px 0 30px 0;
	background-color:#FFF;
	border:none;
	color:#444;
	z-index:50;
	
	-webkit-box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.22);
	-moz-box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.22);
	box-shadow: 0px 1px 4px 1x rgba(0,0,0,0.22);
	
}

#right:hover {
    background-color: #f2f2f2;
    color: #d5d5d5;
}

#left{
	position:absolute;
	border-bottom-right-radius:50px;
	border-top-right-radius:50px;
	margin-left:0px;
	background-color: #f2f2f2;
	cursor:not-allowed;}
	
#right{
	position:absolute;
	border-bottom-left-radius:50px;
	border-top-left-radius:50px;
	right:0px;}
	
#right:active {
    	color: #FFF;
		background-color: #d5d5d5;
		}
		
@media only screen and (orientation: portrait){
	#lion{
		display:none;
	}
}