@charset "utf-8";
/*
	COLORS
 
	vertanis #96BF0D
	B1C800
	vertbleu #1D9F88
	brun taupe #635454
	rose #AF2082
	
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
	
*/
@media screen and (min-width: 650px) {

::-webkit-scrollbar {
height: 2px;
width:10px;
background: white;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
/*chrome 10*/
background-image: -webkit-gradient(radial, center center, 0, center center, 100, color-stop(0, #635454), color-stop(1, #A49FF4));
/*chrome 11+ */
background-image: -webkit-radial-gradient(center, circle cover, white 0%, #635454 100%);
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #A3C1F7;
}

/* ligne */


hr{
 height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	border-style: none;

}

/* mise en forme du texte */



h1 {

	font-size: 2rem;
	margin: 100;
	letter-spacing: 0.1em;
	color: #635454;
text-align: left;
	font-weight: normal;

	}
	
	h3 {

	font-size: 1rem;
	margin: 100;
		letter-spacing: 0.1em;
	color: #AF2082;
text-align: left;
	font-weight: normal;

	}
	
	
.centre {

	text-align:center;

	}
	
			
	
	h2 {
	font-family: 'Allura', cursive;
	font-size: 1.5rem;
	margin: 0;
	padding: 0;
	text-shadow: 0 2px 1px color;
	color: #AF2082;
	text-align: left;
	font-weight : lighter;
	}

a {
	
	color: #B1C800;
font-size: 1.5rem;
text-decoration:underline;
	
}



.pmarge {
	padding: 50px 20px 0px 50px;
	font-size: 13px;
	color: #000000;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;

	
}
.ppetit {
	font-size: 10px;
	color: #635454;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
	font-weight : lighter;
	text-align: left;
}
.pnormal {
	font-size: 13px;
	color: #635454;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
	font-weight : lighter;
	text-align: left;
}

.pnormalblanc {
	font-size: 13px;
	color:white;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
	text-align: left;
	font-weight : lighter;
}

.pnormalgros {
	font-size: 20px;
	color: #AF2082;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
	text-align: left;
}

.pnormalgrostaupe {
	font-size: 20px;
	color: #635454;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
	
}	 	 
.pnormaltresgros {
	font-size: 25px;
	color: #AF2082;
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	left: 25px;
	top: 25px;
}

.pallura {
	font-size: 35px;
	color: #AF2082;
	font-family: 'Allura', cursive;
	margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0;	
 text-shadow: 1px 1px 1px white;
font-weight : lighter;	
}

.pallurablanc {
	font-size: 35px;
	color: white;
	font-family: 'Allura', cursive;
	font-weight : lighter;	
}


.tarifs {
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	font-size:1rem;
    padding: 0.6em 1em;
    background:#AF2082;
	text-decoration:none;
	color:white;
	font-size:1rem;
    border-radius: 10px 10px 0px 10px; 
	letter-spacing : 2px;
	text-align: right;
	}	


.dessoustaupe {
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	font-size:1rem;
    padding: 0.2em 2em;
	margin:0px;
   background:#635454;
	text-decoration:none;
	color:white;
	font-size:1rem;
    border-radius: 0px 0px 0px 0px; 
	letter-spacing : 2px;
	}



/*----------------------------------------  HEADER  */

#header {
	width: 100%;
	height:auto;
	position: fixed;
	top: 0;
	text-align:center;
	z-index: 10;
	background-image: url(../img/background_haut3.png);
	margin: 0 auto;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	
	
}




/*----------------------------------------  les boutons  */




.nav-button {
	font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	font-size:1rem;
    padding: 0.3em 2.5em;
	margin:0px;
  
	text-decoration:none;
	color:white;
	font-size:1rem;
   letter-spacing : 2px;
	background: linear-gradient(black, #635454);
	background: -moz-linear-gradient(black, #635454);
	background: -webkit-linear-gradient(black, #635454);
	background: -o-linear-gradient(black, #635454);
	}

.current, a.nav-button:hover {
	
	font-size:1rem;
	background:#AF2082;
	opacity:1;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
 
	box-shadow: #635454;
-moz-box-shadow:5px 5px 5px #635454;
-webkit-box-shadow:5px 5px 5px #635454;

  
}

.current, a.nav-button:active {
	
	background:#AF2082;
	background: linear-gradient(pink,#AF2082,pink);
	background: -o-linear-gradient(pink,#AF2082,pink);
	background:moz-linear-gradient(pink,#AF2082,pink);
	background:-webkit-linear-gradient(pink,#AF2082,pink);
	text-decoration:none;
	color:white;
	font-size:1.2rem;
	padding-bottom:20px;
	border-radius: 0px 0px 25px 25px;
	-moz-border-radius:0px 0px 25px 25px;  
	-webkit-border-radius:0px 0px 25px 25px; 
	text-shadow: 2px 3px 5px black;
		font-weight : bold;
		 -webkit-filter: blur(0px);
		
}		
		









/*----------------------------------------  SLIDES  */

.slide_inside {
	width: 75%;
	margin: 0 auto;
	position: relative;
		background-color: rgba(255, 255, 255, 0.8);
	box-shadow: #635454;
-moz-box-shadow:5px 5px 5px #635454;
-webkit-box-shadow:5px 5px 5px #635454;
	padding: 25px 50px;
	border-radius : 0px 50px 0px 50px;
}


.slide_inside_trans {
	width: 75%;
	margin: 0 auto;
	position: relative;
	padding: 0px;

}


.slide {
	margin: 0 auto;
	padding-top:200px;
	width: 100%;
	background-image: url(hautdesite.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	text-align: start;
}

.slide2 {
	background-image: url(../img/background1.jpg);
	margin: 0 auto;
	padding-top:80px;
	width: 100%;
	background-repeat: no-repeat;
	background-size:cover;
}

.slide3 {
	width: 100%;
	background-image: url(../img/background_tarifs2ok.jpg);
	background-repeat: no-repeat;
	background-size:cover;
}
	
 .slide4 {
	margin: 0 auto;
	padding-top:13rem;
	width: 90%;
	background:white;
	
	padding: 50px;
	border-radius : 0px 0px 50px 50px;
	text-align:center;	
	
	
}




/*----------------------------------------  blocs   */
.tem0{
	width: 40%;
	border-radius: 20px 20px 20px 20px;
	display:inline-block;
	padding: 0px 10px 0px 20px;
	margin: 10px 10px 10px 10px;
	box-shadow: #635454;
-moz-box-shadow:5px 5px 5px #635454;
-webkit-box-shadow:5px 5px 5px #635454;
background:#B1C800;
}

.tem0blanc{
	width: 25%;
	border-radius: 20px 20px 20px 20px;
	display:inline-block;
	padding: 20px 10px 0px 20px;
	margin: 10px 10px 10px 10px;
	box-shadow: #AF2082;
-moz-box-shadow:5px 5px 5px #635454;
-webkit-box-shadow:5px 5px 5px #635454;
background:white;
vertical-align: top;
}

/*----------------------------------------  formulaire mise en forme   */

#wrap {width:530px; margin:20px auto 0; height:1000px;}


	#form_wrap { overflow:hidden; height:446px; position:relative; top:0px;
		-webkit-transition: all 1s ease-in-out .3s;
		-moz-transition: all 1s ease-in-out .3s;
		-o-transition: all 1s ease-in-out .3s;
		transition: all 1s ease-in-out .3s;}
	
	#form_wrap:before {content:"";
		position:absolute;
		bottom:128px;left:0px;
		background:url('contact/images/before2.png');
		width:530px;height: 316px;}
	
	#form_wrap:after {content:"";position:absolute;
		bottom:0px;left:0;
		background:url('contact/images/after2.png');
		width:530px;height: 260px; }

	#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
	#form_wrap:hover {height:776px;top:-200px;}


	form {background:white url('contact/images/fondelettre.jpg'); 
		position:relative;top:200px;overflow:hidden;
		height:200px;width:400px;margin:0px auto;padding:20px; 
		
		border-radius: 20px; 
		-moz-border-radius: 20px; -webkit-border-radius: 20px;
		box-shadow: 10px 10px 10px #635454, inset 10px 10px 200px #96BF0D;
		-moz-box-shadow: 10px 10px 10px #635454, inset 10px 10px 200px #96BF0D;
		-webkit-box-shadow: 10px 10px 10px #635454, inset 10px 10px 200px #96BF0D;
		-webkit-transition: all 1s ease-in-out .3s;
		-moz-transition: all 1s ease-in-out .3s;
		-o-transition: all 1s ease-in-out .3s;
		transition: all 1s ease-in-out .3s;}


		#form_wrap:hover form {height:530px;}

		label {
			margin: 11px 20px 0 0; 
			font-size: 14px; color: #AF2082;
			text-transform: uppercase; 
			text-shadow: 0px 1px 0px #fff;
		}

		input[type=text], textarea {
			font: 14px normal normal uppercase helvetica, arial, serif;
			color: #7c7873;background:none;
			width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
			border:1px solid #635454;
			-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
			-moz-box-shadow: inset 0px 0px 1px #635454;
			-webkit-box-shadow:  inset 0px 0px 1px #635454; 
			box-shadow:  inset 0px 0px 1px #635454;
		}	

		textarea { height: 80px; padding-top:10px;}

		textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}

		#form_wrap input[type=submit] {
			position:relative;
						width:50%; text-align:center;opacity:1;
					cursor: pointer;
		 			-webkit-transition: opacity .6s ease-in-out 0s;
			-moz-transition: opacity .6s ease-in-out 0s;
			-o-transition: opacity .6s ease-in-out 0s;
			transition: opacity .6s ease-in-out 0s;
		font-family: "Century Gothic", "Avant Garde", Avenir, TeXGyreAdventorRegular, Verdana, sans-serif;
	font-size:1rem;
    padding: 0.3em 2.5em;
	margin:0px;
  	text-decoration:none;
	color:white;
	font-size:1rem;
     	letter-spacing : 2px;
	background: linear-gradient(black, #635454);
	background: -moz-linear-gradient(black, #635454);
	background: l-webkit-linear-gradient(black, #635454);
	background: -o-linear-gradient(black, #635454);
		}

		#form_wrap:hover input[type=submit] {z-index:1;opacity:1;
			-webkit-transition: opacity .5s ease-in-out 1.3s;
			-moz-transition: opacity .5s ease-in-out 1.3s;
			-o-transition: opacity .5s ease-in-out 1.3s;
			transition: opacity .5s ease-in-out 1.3s;
			background:#AF2082;
			}

			#form_wrap:hover input:hover[type=submit] {color:white;}






/**
*	animation portfolio -- CSS
*/

.rs-slideshow {
	border: 0px solid #444;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	height: 400px;
	margin: 24px auto;
	overflow: hidden;
	position: relative;
	width: 400px;
	display:inline-block;
	box-shadow: #635454;
-moz-box-shadow:5px 5px 5px #635454;
-webkit-box-shadow:5px 5px 5px #635454;
}

.rs-slideshow .slide-container {
	background-color: white;
	position: absolute;
	height: 400px;
	left: 0;
	overflow: hidden;
	top: 0;
	width:400px;
	
	
}

.rs-slideshow .slide-container img {
	position: relative;
	width: 400px;
	 -webkit-filter: blur(0px);
	

}

.rs-slideshow .slide-container img:hover {
	position: relative;
	width: 400px;
	 -webkit-filter: blur(3px);
	 
}

.rs-slideshow .slide-container .slide-caption {
	background-color: rgba(99, 84, 84, 1);
	bottom: 0;
	color: #fff;
	display: block;
	left: 0;
	padding: 6px 12px;
	position: absolute;
	text-align: center;
	right: 0;
	filter: alpha(opacity=100); /* internet explorer */
	-khtml-opacity: 1;      /* khtml, old safari */
	-moz-opacity:1;       /* mozilla, netscape */
	opacity: 1;           /* fx, safari, opera */
}

.rs-slideshow .slides {
	display: none;
}

.rs-slideshow .slide-container img,
.rs-slideshow .slide-container .slide-caption,
.rs-slideshow .slide-container a {
	filter: inherit;
}


/**
*	These styles make the list of links to slide images visible to users
*	who don't have JavaScript enabled. By adding the 'no-js' class to 
*	the HTML element, and using Modernizr to remove this class for JS
*	users, we can style for both scenarios.
*	http://www.modernizr.com/
*/

.no-js .rs-slideshow {
	height: auto;
}
.no-js .rs-slideshow .slide-container, 
.no-js .rs-slideshow .slide-container img {
	position: relative;
}
.no-js .rs-slideshow .slides {
	display: block;
	margin: 24px 48px;
}
.no-js .rs-slideshow .slides li {
	margin: 0;
}






/*	Clearfix	peut-etre inutile...*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }




/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.blur img:hover {
  -webkit-filter: blur(5px);
}