/* CSS Document */
*{
	font-family: commemedium;

}
section{
	z-index:200;
	background-color:#FFF;
	opacity:.3;
}


article, .navigation, footer > p{
	visibility:hidden;
}

aside {
	text-align:center;
	position:absolute;
	top:0;
	z-index:400;
	height:100%;
	width:100%;
	bottom:0;
	text-align:center;
}

.pop {
	text-align:center;
	height:auto;
	text-align:center;
	position:absolute;
	color:#666;
	width:100%;
	top:50%;
	left:50%;
	z-index:400;
	
	transform:translate(-50%,-25%);
	-webkit-transform:translate(-50%,-25%);
	-moz-transform:translate(-50%,-25%);
	
	-webkit-backface-visibility: hidden;
   	-moz-backface-visibility: hidden;
   	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
  	 backface-visibility: hidden;

	-webkit-animation: popu 600ms ease forwards;
    -moz-animation: popu 600ms ease forwards;
    -o-animation: popu 600ms ease forwards;
	-ms-animation: popu 600ms ease forwards;
	animation: popu 600ms ease forwards;
}

.pop h1{
	font-family: commesemibold;
	display:inline-block;
	font-size:25px;
	letter-spacing:5px;
	text-transform:uppercase;
	font-weight:200;
	color: rgba(66,17,0,1);
	margin-bottom:4px;
	text-align:center;
	
	-webkit-backface-visibility: hidden;
   	-moz-backface-visibility: hidden;
   	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
  	 backface-visibility: hidden;
	
	-webkit-animation: affichage 500ms ease 1 forwards;
    -moz-animation: affichage 500ms ease 1 forwards;
    -o-animation: affichage 500ms ease 1 forwards ;
	-ms-animation: affichage 500ms ease 1 forwards ;
	animation: affichage 500ms ease 1 forwards ;
	
}

.pop a{	
	display: inline-block;
	text-decoration:none;
	color:#000;
	width:100px;
	height:20px;
	padding:5px;
	border-radius:5px;
	text-align:center;
	line-height:25px;
	font-size:25px;
	word-spacing:10px;
	text-shadow: 1px 1px rgba(204,204,204,.4), -1px -1px rgba(4,4,4,.3);
	
	-webkit-backface-visibility: hidden;
   	-moz-backface-visibility: hidden;
   	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
  	 backface-visibility: hidden;
}

.pop p{
	width:100%;
	height:auto; 
	display:inline-block; 
	right:0;
	padding:5px;
	text-align:center;
}

/*  KEYFRAME pop */
@keyframes popu{
	0% {opacity:0; transform-style: preserve-3d;}
	100% {opacity:1;}
}

@-webkit-keyframes popu{
	0% {opacity:0;  -webkit-transform-style: preserve-3d;}
	100% {opacity:1;}
}

@-o-keyframes popu{
	0% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes popu{
	0% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes popu{
	0% {opacity:0; -moz-transform-style: preserve-3d;}
	100% {opacity:1;}
}

/*  KEYFRAME Pop reverse */
@keyframes popu-rev{
	0% {opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes popu-rev{
	0% {opacity:1;  -webkit-transform-style: preserve-3d;}
	100% {opacity:0;}
}

@-moz-keyframes popu-rev{
	0% {opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes popu-rev{
	0% {opacity:1;}
	100% {opacity:0;}
}

@-ms-keyframes popu-rev{
	0% {opacity:1;}
	100% {opacity:0;}
}

/*  KEYFRAME AFFICHAGE 
@media screen and (max-height: 720px){
	@keyframes affichage{
		0% {
			backface-visibility: hidden;
			left:10%;
			filter: blur(5px);
		}
		100%{
			left:15%;
			filter: none;
		}
	}
	
	@-moz-keyframes affichage{
		0% {
			backface-visibility: hidden;
			left:5%;
			filter: blur(5px);
		}
		100%{
			left:10%;
			filter: blur(0);
		}
	}
	@-o-keyframes affichage{
		0% {
			-o-backface-visibility: hidden;
			left:5%;
			-o-filter: blur(5px);
		}
		100%{
			left:10%;
			-o-filter: blur(0);
		}
	}
	@-ms-keyframes affichage{
		0% {
			-ms-backface-visibility: hidden;
			left:5%;
			-ms-filter: blur(5px);
		}
		100%{
			left:10%;
			-ms-filter: blur(0);
		}
	}
	@-webkit-keyframes affichage{
		0% {		
			-webkit-backface-visibility: hidden;
			-webkit-transform-style: preserve-3d;
			left:5%;
			-webkit-filter: blur(5px);
		}
		100%{
			left:10%;
			-webkit-filter: blur(0);
		}
	}
}*/

@media only screen and (max-device-width: 400px){
	.pop a{	
		font-family:commemedium;
		display: inline-block;
		text-decoration:none;
		color:#000;
		width:80px;
		height:20px;
		padding:5px;
		border-radius:5px;
		text-align:center;
		line-height:25px;
		font-size:25px;
		word-spacing:10px;
		text-shadow: 1px 1px rgba(204,204,204,.4), -1px -1px rgba(4,4,4,.3);
		
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		 backface-visibility: hidden;
	}
	.pop{
		height:auto;
		text-align:center;
		position:absolute;
		color:#666;
		top:50%;
		margin:0;
		padding:5px;
		min-width:340px;
		z-index:400;
		
		transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
	}
	
	.pop h1{
		font-family: commesemibold;
		display:inline-block;
		font-size:20px;
		letter-spacing:5px;
		text-align:left;
		text-transform:uppercase;
		font-weight:200;
		color: rgba(66,17,0,1);
		text-align:left;
		width:90%;
		
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		 backface-visibility: hidden;
		
		-webkit-animation: affichage 500ms ease 1 forwards;
		-moz-animation: affichage 500ms ease 1 forwards;
		-o-animation: affichage 500ms ease 1 forwards ;
		-ms-animation: affichage 500ms ease 1 forwards ;
		animation: affichage 500ms ease 1 forwards ;
		
	}
}

@keyframes deblur{
	0% {
		backface-visibility: hidden;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		
		opacity:.3;
		filter: blur(5px);
	}
	100%{
		opacity:1;
		background-color:transparent;
		filter: none;
		}
}

@-webkit-keyframes deblur{
	0% {
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		opacity:.3;
		-webkit-filter: blur(5px);
	}
	100%{
		opacity:1;
		background-color:transparent;
		-webkit-filter: blur(0);
		}
}

@-moz-keyframes deblur{
	0% {
		backface-visibility: hidden;
		transform-style: preserve-3d;
		opacity:.3;
		filter: blur(5px);
	}
	100%{
		opacity:1;
		background-color:transparent;
		filter: blur(0);
		}
}

@keyframes blurer{
	0%{
		transform-style: preserve-3d;
		backface-visibility: hidden;
		filter: none;
	}
	100% {
		filter: blur(5px);
	}
}

@-webkit-keyframes blurer{
	0%{
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		-webkit-filter: blur(0);
	}
	100% {
		-webkit-filter: blur(5px);
	}
}

@-moz-keyframes blurer{
	0%{
		-moz-transform-style: preserve-3d;
		-moz-backface-visibility: hidden;
		-moz-filter: blur(0);
	}
	100% {
		-moz-filter: blur(5px);
	}
}