body {margin:10px auto; font-family: Delicious, sans-serif; color:#333; line-height:1.5; font-size:12px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#444444+0,000000+100 */

background: rgb(68,68,68); /* Old browsers */

background: -moz-radial-gradient(center, ellipse cover,  rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(68,68,68,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(68,68,68,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover,  rgba(68,68,68,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover,  rgba(68,68,68,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */

background: radial-gradient(ellipse at center,  rgba(68,68,68,1) 0%,rgba(0,0,0,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */





background-attachment: fixed; color:#262626; line-height:1.5; font-size:12px; overflow-x:hidden;}

* {outline:none;}

a {color:#ccc; text-decoration:none; -webkit-transition:0.3s;}

a:hover{color:#fff; -webkit-transition:0.3s;}





/* --- Menu --- */



@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a {

  margin: 0;

  padding: 0;

  border: 0;

  list-style: none;

  line-height: 1;

  display: block;

  position: relative;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

#cssmenu:after,

#cssmenu > ul:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}

#cssmenu {

  width: 500px;

  border-bottom: 3px solid #ccc;

  font-family: Raleway, sans-serif;

  line-height: 1;

}

#cssmenu ul {



}

#cssmenu > ul > li {

  float: left;

}

#cssmenu.align-center > ul {

  font-size: 0;

  text-align: center;

}

#cssmenu.align-center > ul > li {

  display: inline-block;

  float: none;

}

#cssmenu.align-right > ul > li {

  float: right;

}

#cssmenu.align-right > ul > li > a {

  margin-right: 0;

  margin-left: -4px;

}

#cssmenu > ul > li > a {

  z-index: 2;

  padding: 18px 25px 12px 25px;

  font-size: 15px;

  font-weight: 400;

  text-decoration: none;

  color: #ccc;

  -webkit-transition: all .2s ease;

  -moz-transition: all .2s ease;

  -ms-transition: all .2s ease;

  -o-transition: all .2s ease;

  transition: all .2s ease;

  margin-right: -4px;

}

#cssmenu > ul > li.active > a,

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {

  color: #000;

}

#cssmenu > ul > li > a:after {

  position: absolute;

  left: 0;

  bottom: 0;

  right: 0;

  z-index: -1;

  width: 100%;

  height: 120%;

  border-top-left-radius: 8px;

  border-top-right-radius: 8px;

  content: "";

  -webkit-transition: all .2s ease;

  -o-transition: all .2s ease;

  transition: all .2s ease;

  -webkit-transform: perspective(5px) rotateX(2deg);

  -webkit-transform-origin: bottom;

  -moz-transform: perspective(5px) rotateX(2deg);

  -moz-transform-origin: bottom;

  transform: perspective(5px) rotateX(2deg);

  transform-origin: bottom;

}

#cssmenu > ul > li.active > a:after,

#cssmenu > ul > li:hover > a:after,

#cssmenu > ul > li > a:hover:after {

  background: #ccc;

}





/* --- content --- */



#header						{margin-bottom:-80px; float:right; background:url(img/logo-patrick-armand.png); width:350px; height:129px;}

#slogan						{margin-top:50px; background:url(img/slogan.png); width:980px; height:44px;}

#content 					{position:relative; margin:0px auto; width:980px;}

.clear						{clear:both;}





/* --- ACCUEIL --- */



.accueil 					{margin-top:50px; height:100%; padding:5px 5px 5px 5px; margin-top:10px;}

.accueil h1 					{padding:10px; font-size:28px; text-decoration:none; color:#ccc; text-align:left; font-family: 'Yanone Kaffeesatz', sans-serif;}

.accueil h2 					{margin:0 auto -5px auto; background:rgba(255,255,255,1); padding:0 0 0 0px; font-size:26px; text-decoration:none; color:#000; text-align:center; font-family: 'Yanone Kaffeesatz', sans-serif; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}

.accueil p 					{background:rgba(255,255,255,0.1); padding:10px; color:#fff; text-align:justify; font-size:14px; font-family: 'Roboto Condensed', sans-serif;}

.accueil table				{text-align:center;}

#offre-decouverte			{background:url(img/offre-decouverte.jpg); width:980px; height:300px; -webkit-border-radius:5px 5px 0 0; display:block; -webkit-box-shadow: 1px 1px 5px 1px #383838; box-shadow: 1px 1px 5px 1px #383838;}

#offre-decouverte:hover		{background:url(img/offre-decouverte-hover.jpg); width:980px; height:300px; -webkit-transition: 0.5s;}

#tarifs						{background:url(img/Depoli-prix--65X30-thumb.jpg); width:900px; height:1950px; -webkit-border-radius:5px 5px 0 0; display:block; -webkit-box-shadow: 1px 1px 5px 1px #383838; box-shadow: 1px 1px 5px 1px #383838; margin:auto;}



/* --- tarifs --- */



.tarifs 						{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */

							background: rgb(69,72,77); /* Old browsers */

							background: -moz-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */

							background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */

							background: -webkit-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */

							background: -o-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */

							background: -ms-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */

							background: radial-gradient(ellipse at center,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */

							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

							margin-top:50px; height:100%; padding:5px 5px 5px 5px; margin-top:10px;-webkit-border-radius:5px 5px 0 0; display:block;}

.tarifs h1 					{padding:10px; font-size:28px; text-decoration:none; color:#ccc; text-align:left; font-family: 'Yanone Kaffeesatz', sans-serif;}

.tarifs h2 					{margin:0 auto -5px auto; background:rgba(255,255,255,1); padding:0 0 0 0px; font-size:26px; text-decoration:none; color:#000; text-align:center; font-family: 'Yanone Kaffeesatz', sans-serif; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}

.tarifs p 					{background:rgba(255,255,255,0.1); padding:10px; color:#fff; text-align:justify; font-size:14px; font-family: 'Roboto Condensed', sans-serif;}

.tarifs table					{text-align:center;}

#tarifs						{background:url(img/Depoli-prix--65X30-thumb.jpg); width:425px; height:921px; -webkit-border-radius:5px 5px 0 0; display:block; -webkit-box-shadow: 1px 1px 5px 1px #383838; box-shadow: 1px 1px 5px 1px #383838; margin:auto;}



/* --- BOTTOM --- */



.bottom						{ display: table; width: 980px; border-collapse: separate;}

.bottom div 					{ display: table-cell; width: 25%; background: #FFF; border: 5px #F2F2F2 solid; padding: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;}

.bottom:hover				{ background-color:#e0e5db;}

.bottom h5					{ font-size:20px;padding:5px 0; margin: -5px 0 0 0 }

.bottom p					{ font-size:14px; margin-bottom:10px;}

.bottom h3					{ width:190px; height:25px; display:block; background-color:#c50000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-align:center; color:#fff; text-transform:uppercase; font-size:15px; line-height:25px; margin:auto; text-decoration:none}

.bottom h4					{ font-size:12px; color:#523c40; font-weight: bold; padding:5px;}

.bottom li					{ list-style-type:none;}





/* --- CONTACTS--- */



.contact 					{margin-top:50px; height:100%; padding:5px 5px 5px 5px; margin-top:10px;}

.contact h1 					{padding:10px; font-size:28px; text-decoration:none; color:#ccc; text-align:left; font-family: 'Yanone Kaffeesatz', sans-serif;}

.contact h2 					{margin:50px auto -5px auto; padding:0 0 0 0px; font-size:26px; text-decoration:none; color:#000; text-align:center; font-family: 'Yanone Kaffeesatz', sans-serif; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}

.contact p 					{padding:10px; color:#fff; text-align:justify; font-size:14px; font-family: 'Roboto Condensed', sans-serif;}

.contact table				{text-align:center;}

#logo_contacts				{float:left; display:block; clear:both; background:url(img/contact.png); width:462px; height:300px; margin-top:0px; margin-bottom:20px;}

.txt-contacts				{margin-top:-180px; margin-right:80px; float:right; width:400px; text-align:justify;}

#contacts-txt				{margin-top:-250px; background:url(img/contacts.png); width:115px; height:93px; margin-right:390px; float:right;}



/* ---- FORMULAIRES ---- */



#form 						{position:relative; width:900px; padding:20px; background:rgba(56,56,56,0.9); color:#fff; border-top:1px solid #ccc; -webkit-border-radius:5px; top:25px;}

#form > p 					{margin-bottom:15px!important;}

#form input[type="text"], #form input[type="email"], textarea {width:95%; padding:5px; border:none; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}

#form input[type="text"]:focus, #form input[type="email"]:focus, textarea:focus {background-color:#c1c1c1;}

#form textarea 				{height:100px;}

#submit 						{position:absolute; width:100%; bottom:-26px; left:0; border:none; background-color:#ccc; color:#fff; text-transform:uppercase; display:block; padding:5px; text-align:center; font-size:14px; font-weight:bold;}

#submit:hover 				{color:#383838; cursor:pointer;}



#success 					{background:#ccc; color:#000; font-weight:bold; padding:10px; text-transform:uppercase; text-align:center;}

.error 						{background-color:#ccc!important;}

.error::-webkit-input-placeholder {color:#fff!important;}

#loading 					{position:absolute; bottom:60px; right:60px; display:none;}



/* --- Footer --- */

footer 						{color:#fff; position:relative; margin-top:50px; bottom:0px; width:100%; height:40px; font-size:11px;  clear:both;}

.meta						{width:900px; height:100%; padding:10px; color:#ccc;}