.div-nav h2{
	text-transform:uppercase;
	font-size:1.4em;
	font-weight:lighter;

		}.div-nav hr{
	width:50%;

		}
		.div-nav p{

	font-size:1.2em;
	font-weight:normal;

		}
		.div-nav a{text-decoration:none;}
			.div-nav span{
			text-outline:none;
			
			
			color:rgba(255,0,4,1.00);
			font-size:1.3em;}
	.div-nav{
	position:absolute;
	
	width:30%;height:20%;
	background-color:rgba(255,255,255,0.8);
	text-align:center;
	left:35%;
	top:65%;
	font-family: "chaparral-pro";
	margin-left:auto;
	margin-right:auto;
	color:rgba(0,0,0,1.00);
	}
	@media screen and (max-width: 1024px) {.div-nav{

	top:75%;
	}
	nav a {
	
	margin: 5px 15px;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.1em;
}
	}
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
nav a {
	position:relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
	
}
nav a:hover,
nav a:focus {
	outline: none;color: #000;
}

/* Effect 9: second text and borders */
.cl-effect-9 a {
	margin: 0 20px;
	padding: 18px 20px;
	text-align:center;
	line-height: 44px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	
}


.cl-effect-9 a span:first-child {
	z-index: 2;
	font-weight: 300;
	position: relative;
	display: inline-block;
	padding: 0 35px;
	background-color: rgba(166,125,74,1.00);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;	
}
.csstransforms3d .cl-effect-9 a span:first-child::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(000,000,000,1.00);
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
.cl-effect-9 a:hover span:first-child,
.cl-effect-9 a:focus span:first-child {
	
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}
.cl-effect-9 a span.condition-uk {
	margin-left:-200%;
	
	}
.cl-effect-9 a span.condition-fr {
margin-left:-90%;
	}
.cl-effect-9 a span:last-child {
	position:absolute;
	z-index: 1;
	top:100%;
	
	color: rgba(0,0,0,1);
	text-shadow: none;
	text-transform: none;
	 -moz-hyphens: auto;
	 -webkit-hyphens: auto;
	 -ms-hyphens: auto;
  	hyphens: auto;
	text-align: justify;
	width:200%;
	font-size: 18px;
	line-height: 18px;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(50%);
	-moz-transform: translateY(50%);
	transform: translateY(50%);
}
.masque-btn{
	position:absolute;
	width:100%;
	height:400px;
	background-color:rgba(195,255,47,00);
	z-index:100;
	
	
	}
	
.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
	height: 6px;color: #000;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
	
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

/*