/*
Theme Name: Mademoiselle Parfumette
Theme URI: http://www.mademoiselleparfumette.com
Author: Marina Liw
Author URI: http://www.marinaliw.com
Description: Theme pour Mademoiselle Parfumette, parfumeur createur
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parfumette
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Mademoiselle Parfumette is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);


html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;

}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  font-family: Roboto, Arial, 'Sans Serif';
  font-size: 15px;
  color:#53226c;
  line-height: 1.5;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

    word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-align:left;
}

p {
  margin-bottom: 1.5em;
}

dfn, cite, em, i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

strong{font-weight:500;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}


/*--------------------------------------------------------------
## FONTS
--------------------------------------------------------------*/

@font-face {
  font-family: 'BodoniMT';
  src: url('assets/fonts/BodoniMT.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BodoniMT';
  src: url('assets/fonts/BodoniMT.ttf')  format('truetype'), url('assets/fonts/BodoniMT.svg#BodoniMT') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BodoniMT-Italic';
  src: url('assets/fonts/BodoniMT-Italic.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BodoniMT-Italic';
  src:url('assets/fonts/BodoniMT-Italic.ttf')  format('truetype'), url('assets/fonts/BodoniMT-Italic.svg#BodoniMT-Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}



/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

blockquote, q {
  quotes: "" "";
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul, ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

img {
  height: auto;/* Make sure images are scaled correctly. */
  max-width: 100%;/* Adhere to container width. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border:none;
background:#411956; padding:15px 35px;
border-radius:15px;
color:#fff;
font-family: 'BodoniMT-Italic';
font-size:25px;

}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background:#351346}
button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
   background:#351346;
   }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  color: #666;
  border: 0;
  border-radius: 0;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
  padding: 3px;
  margin-top: 5px;
}

textarea {
  padding-left: 3px;
  width: 100%;
  margin-top: 5px;
  max-height: 170px;
  background: url(images/logo-contact.png) no-repeat 50% 50% #fff;
}

input[type=text]:focus, textarea:focus, input[type=email]:focus,
input[type="button"]:focus, input[type="submit"]:focus {
  outline: none;

}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
  color: #572b6b;
  text-decoration:none;
}
a:visited {
  /* color: #572b6b; */
  border: none;
  text-decoration:none;
}

a:hover, a:active, a:focus {
  outline: 0;
  color: #572b6b;
  text-decoration:underline;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
  clear: both;
  display: none;
  float: left;
  width: 100%;
  height: 50px;
  top: 30px;
  opacity: 0;
}
.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 1.5em;
  left: -999em;
  z-index: 99999;
}
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
  left: 100%;
}
.main-navigation ul ul a {
  width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}
.main-navigation li {
  float: left;
  position: relative;
}
.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: block;
  }
}
.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  /* Make sure select elements fit in widgets. */
}
.widget select {
  max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
  display: none;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.content-area {
  /* float: left; */
  /* margin: 0 -15px; */
  /* width: 100%; */
}

.site-main {
  margin: 0;
}

.site-content .widget-area {
  float: right;
  overflow: hidden;
  width: 25%;
}

.site-footer {
  clear: both;
  width: 100%;
}

.container-fluid{padding:0}


.page-template-default #content{margin-top: 80px;text-align: center;margin-bottom: 80px;}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
  display: block;
}

.hentry {
  /* margin: 0 0 1.5em; */
}

.byline,
.updated:not(.published) {
  display: none;
}

.single .byline,
.group-blog .byline {
  display: inline;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
  display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
.gallery-columns-2 .gallery-item {
  max-width: 50%;
}
.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
  max-width: 25%;
}
.gallery-columns-5 .gallery-item {
  max-width: 20%;
}
.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-caption {
  display: block;
}


/*--------------------------------------------------------------
## Headings parfumette
--------------------------------------------------------------*/

a{
  transition: opacity .6s ease-out; 
-moz-transition: opacity .6s ease-out; 
-webkit-transition: opacity .6s ease-out; 
-o-transition: opacity .6s ease-out;
}

a:hover{transition: opacity .6s ease-out; 
-moz-transition: opacity .6s ease-out; 
-webkit-transition: opacity .6s ease-out; 
-o-transition: opacity .6s ease-out;}

h2{
  font-family:BodoniMT, 'Times New Roman', Serif;
  font-size:55px;
  color:#54276d;
  margin:5px 0 0;
  line-height: 45px;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  }
h3{
  font-family:BodoniMT-Italic, 'Times New Roman', Serif;
  letter-spacing:2px;
  margin: 15px 0 20px;
  color:#54276d;
  font-size:25px;
  line-height: 25px;
}

h3:after{
  border-bottom:5px solid #54276d;; 
  display:block; 
  width:30px; 
  content:'';
  padding:10px 0}

.page-template-default h1{text-align:center;
font-family:BodoniMT,'Times New Roman', Serif;
font-size:55px;}


@media (max-width: 750px){
h2{
  font-size:40px

}}

.page-template-default #content a{
   color:#77787b;
   border-bottom: 1px solid
}

.page-template-default #content a:hover{
   color:#77787b;
   border-bottom: 0;
   text-decoration:none
}



/*--------------------------------------------------------------
## Head / Accueil
--------------------------------------------------------------*/


section{margin: 0;}


.prf-accueil{
  margin:0; text-align:center;
   background-image: -moz-linear-gradient( 90deg, rgb(231,231,231) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(231,231,231) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(231,231,231) 0%, rgb(255,255,255) 100%);
  
}

.prf-accueil header{
 height:75%;
}

.prf-accueil-visuel{
  background:url(images/mademoiselle-parfumette-parfums.png) no-repeat 50% 30%;
  height:100%;
  /* background-attachment:fixed; */
  margin: 0;
}


.site-title{
  margin-top:5%;
}

.site-description{
  font-family:BodoniMT-Italic;
  text-transform:uppercase;
  font-size: 18px;
  padding-top:3%;
  line-height: 25px;
  letter-spacing: 0.02em;
  text-align: center;
}

.prf-accueil .entry-content{
  height:25%;
  background: #572b6b;
  margin: 0;
  color: #fff;
  letter-spacing:1px;
  font-size: 15px;
}

.prf-accueil .entry-content .container{
  height: 100%;
  padding: 5%;
  font-size: 16px;
}


.prf-arrow{
  position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    }
.prf-arrow i{
  background:url(images/goutte-white.png) no-repeat 50% 100%;
  
  border-radius:100px;
  width:50px; 
  height:60px;
  color:#572b6b;
  font-size:25px;
  padding:28px 0;
  margin-top:-69px;

}

.prf-arrow {
  animation-duration: 1s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
  
@keyframes slidein {
  from {
    margin-top: 12px;
    
  }
  
  to {
    margin-top: 0;
    
  }
}

@media (max-width: 750px){

  .prf-accueil{height:auto!important}

.prf-accueil-visuel{
  background:url(images/mademoiselle-parfumette-parfums.png) no-repeat 50% 30%;
  height:850px;
  width:auto;
  /* background-attachment:fixed; */
  margin: 0;
}

.prf-accueil .entry-content .container{
  padding:50px 15px;
  font-size:15px
}
}


/*--------------------------------------------------------------
## Creatrice
--------------------------------------------------------------*/

.prf-creatrice{
  background:url(images/background-lavande.jpg) no-repeat 50%;
  min-height:800px;
  background-attachment:fixed;
  margin: 0;
  padding: 30px 0 90px;
  
  }

.absolute-content{
  position:absolute;
  position: absolute;
    left: 0;
    right: 0;

  margin: 100px auto;
  padding: 0;
  z-index:999;
  box-sizing: border-box;
}

.prf-creatrice .entry-content .content{
  width:390px;
  margin:auto;
  background:url(images/bg-lilas.jpg) repeat;
  padding:45px;
  background-size:cover;
  /* font-size: 15px; */
  text-align:justify;
}

.prf-img-creatrice div div:first-child img{
  margin:330px 0 0;
  background:#fff;
  padding:15px;
  border:1px solid #efefef
}

.prf-img-creatrice div div:last-child img{
  margin: 140px 50px 0;
  background:#fff;
  padding:15px;
  border:1px solid #efefef;
  float:right
}

@media (max-width: 990px){

 #creatrice .absolute-content{
  position:relative;
  margin:0;
  padding:0;
  width: 50%;
  float: left;
  padding-left: 20px;
}

.prf-creatrice .entry-content .content{width: auto; float:left}

.prf-img-creatrice div div:first-child img{ margin:30px auto; }

#creatrice div > .container{width:auto; float:right;}



}

@media (max-width: 750px){
  
  .prf-creatrice .entry-content .content{width: 100%}
   #creatrice .absolute-content{width:auto; padding:0 20px;}
   #creatrice div > .container{width:100%; float:none; text-align:center;}

   .prf-creatrice{padding-bottom:30px}





}



/*--------------------------------------------------------------
## Demarche
--------------------------------------------------------------*/

#demarche{
  background:#f3f3f3;
  padding: 50px 0 5px;
 }

.prf-img-demarche{
   background:url(images/background-demarche.jpg) no-repeat 0 60%;
   min-height: 750px;
   width:100%;

  

}




#demarche .absolute-content{
  position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  z-index: 999;
}

 #demarche h2, #demarche h3{
   color:#fff;

 }


#demarche h3:after{
  border-color:#fff;
 }

#demarche h2:before{
   display:block;
   width:35px;
   background:#fff;
   height:35px;
   float:right;
   content:'1';
   color:#572b6b;
   font-size:20px;
   text-align:center;
   border-radius:50px;
   line-height:37px;
   margin:-30px

 }



#demarche .content{
  background:url(images/bg-violet.jpg) repeat;
  color:#fff;
  padding: 50px 50px 30px;
  max-width:480px;
  margin-left:-20px;
  text-align: justify;
}
 

.prf-img-demarche img{
  margin: 330px 0 0;
  background:#fff;
  padding:15px;
  border:1px solid #efefef;
  /* float:right; */
}


@media (max-width: 1200px){

  
  .prf-img-demarche{
     background:url(images/background-demarche.jpg) no-repeat 100% 60%;
  }



}

@media (max-width: 990px){
  
  
  #demarche .content{
    margin-left:0;
  }

  .prf-img-demarche{
     background:url(images/background-demarche.jpg) no-repeat 70% 60%;
  }



}

@media (max-width: 750px){

  #demarche{padding:5px 0;}
  
  
#demarche .absolute-content{
  position:relative;
  margin-bottom:30px;
  margin-top:60px;
}
#demarche .content{max-width:100%}
.prf-img-demarche{min-height:initial;text-align: center;}
.prf-img-demarche img{margin:20px auto;}

  .prf-img-demarche{
     background:none;
  }







} 




/*--------------------------------------------------------------
## Accompagnement
--------------------------------------------------------------*/

#accompagnement{
  background: #f3f3f3;
  padding: 50px 0 5px;
 }

.prf-img-accompagnement{
   background:url(images/background-accompagnement.jpg) no-repeat 50% 50%;
   min-height: 800px;
   width:100%
}



#accompagnement .absolute-content{
position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  z-index: 999;
}

 #accompagnement h2, #accompagnement h3{
   color:#fff
 }


#accompagnement h3:after{
  border-color:#fff;
 }

#accompagnement h2:before{
   display:block;
   width:35px;
   background:#fff;
   height:35px;
   float:right;
   content: '2';
   color: #5eaa78;
   font-size:20px;
   text-align:center;
   border-radius:50px;
   line-height:37px;
   margin:-30px
 }



#accompagnement .content{
  background:url(images/bg-vert.jpg) repeat;
  color:#fff;
  padding: 50px 50px 30px;
  max-width:540px;
  margin-left:-50px;
  text-align: justify;
}
 

.prf-img-accompagnement img{
  margin: 330px 50px 0;
  background:#fff;
  padding:15px;
  border:1px solid #efefef;
  float:right
}



@media (max-width: 990px){
  
  
  #accompagnement .content{
    margin-left:0;
  }



}

@media (max-width: 750px){
  
  
#accompagnement .absolute-content{
  position:relative;
  margin:0

}
#accompagnement .content{max-width:100%}
.prf-img-accompagnement{min-height:initial;text-align: center;}
.prf-img-accompagnement img{margin:20px auto;float: none;}

  .prf-img-accompagnement{
     background:none;
  }



}


/*--------------------------------------------------------------
## Fabrication
--------------------------------------------------------------*/

#fabrication{
  background:#f3f3f3;
  padding: 50px 0 0;
 }

.prf-img-fabrication{
   background:url(images/background-fabrication.jpg) no-repeat 0 10%;
   min-height: 800px;
   width:100%
}



#fabrication .absolute-content{
position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  z-index: 999;
}

 #fabrication h2, #fabrication h3{
   color:#fff;

 }
 


#fabrication h3:after{
  border-color:#fff;
 }

#fabrication h2:before{
   display:block;
   width:35px;
   background:#fff;
   height:35px;
   float:right;
   content:'3';
   color:#688f9b;
   font-size:20px;
   text-align:center;
   border-radius:50px;
   line-height:37px;
   margin:-30px

 }



#fabrication .content{
  background:url(images/bg-bleu.jpg) repeat;
  color:#fff;
  padding: 50px 50px 30px;
  max-width:480px;
  margin-left:-20px;
  text-align: justify;
}
 

.prf-img-fabrication img{
  margin: 330px 0 0;
  background:#fff;
  padding:15px;
  border:1px solid #efefef;
  /* float:right; */
}


.prf-img-fabrication div div:last-child img{
  margin: 650px 0 0 -60px;
  background:none;
  padding:15px;
  border: none;
  /* float:right; */
}

@media (max-width: 1200px){

      .prf-img-fabrication{
     background:url(images/background-fabrication.jpg) no-repeat 90% 10%;
  }
  .prf-img-fabrication div div:last-child img{
    margin-top:670px;
    margin-left: -80px;
  }





}

@media (max-width: 990px){

    .prf-img-fabrication{
     background:url(images/background-fabrication.jpg) no-repeat 70% 10%;
  }
  
  
  #fabrication .content{
    margin-left:0;
  }

  .prf-img-fabrication div div:last-child img{
    margin-top:670px;
    margin-left: -50px;
  }



}

@media (max-width: 750px){
  
  
#fabrication .absolute-content{
  position:relative; margin:0

}
#fabrication .content{max-width:100%}
.prf-img-fabrication{min-height:initial;text-align: center;}
.prf-img-fabrication img{margin:20px auto;}

.prf-img-fabrication div div:last-child img{margin:20px auto}

  .prf-img-fabrication{
     background:none;
  }



}



/*--------------------------------------------------------------
## Domaines d'intervention
--------------------------------------------------------------*/


#domaines{
  background:#f3f3f3;
  /* margin: -25px -15px; */
  padding: 100px 0 155px;
  margin-bottom: 0;
  background-image:url(images/mademoiselle-parfumette-parfums.png);
  background-repeat:no-repeat;
  background-position:50% 100%;
  min-height:920px;
 }

#domaines header{ background:#fff; margin:0 -15px}

#domaines  .container:first-child{
  /* background:#fff; */
  /* max-width: 970px; */
  /* height:300px; */
  /* transition: all 0.1s ease-in-out; */
  -moz-transition: all 0.1s ease-in-out;
  /* -webkit-transition: all 0.1s ease-in-out; */
  -o-transition: all 0.1s ease-in-out;
  }

#domaines h2{
  text-align:center; 
  padding:60px}

#domaines h2:before,
#domaines h2:after{
  border-bottom: 5px #54276d solid;
  width: 30px;
  content:'';
  display: inline-block;
  bottom: 0;
}
.goutte{text-align:center;padding-bottom: 30px;}

#domaines .goutte h3{
  color:#fff;
  position:absolute;
  font-family:Roboto, 'Sans Serif';
  text-align:center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing:0;
  width: auto;
  /* max-width: 140px; */
  padding: 80px 0;
  margin: 0 auto;
  z-index: 999;
  line-height:18px;
  left: 0;
  right: 0;
  }
#domaines .goutte h3:after{
  content:"\f107";
  font-family:Fontawesome;
  font-size:20px;
  text-align:center;
  width:20px;
  margin:auto;
  border:0;
  padding:0
}

#domaines .content{
  background:#553169;
  overflow: hidden;
  color: #fff;
  text-align: center;

  padding: 40px 0 10px;
 
  }

.goutte img{opacity:0.5;}

.goutte:hover img, .tabs li.active img{opacity: 1;
transition: opacity .6s ease-out; 
-moz-transition: opacity .6s ease-out; 
-webkit-transition: opacity .6s ease-out; 
-o-transition: opacity .6s ease-out;
cursor:pointer}

.goutte:hover h3,
.tabs li.active h3{
  display:none}

/* TABS */

#domaines .content ul,
#domaines .content ul li{
  margin:0; padding:0;
  list-style:none;
  transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
}

.tabs-content{
  padding:40px;
  background: #fff;
  height:auto;
  overflow:hidden;
  transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  text-align: justify;
  }

.tabs-content > div{

  background: #fff;
  height:0;
  opacity:0;
  overflow: inherit;
  transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;}

.tabs-content >div.active{
  opacity:1;
  display:block;
  max-height: 130px;
  height:130px;
  transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
  }


#domaine li.active{overflow:hidden; }
#domaines li.active .goutte:after{
    content: '';
    background: url(images/arrow.png);
    height:20px;
    width:40px;
    margin-bottom:60px;
    bottom:0;
    display: block;
    text-align:center;
    margin: 30px auto -40px;
}

.tabs-content > div > div:last-child{border-left:1px solid #e1e1e1}
.tabs-content p{margin-bottom:5px; padding:0 10px}


@media (max-width: 750px){

  #domaines{padding-top: 20px;}
#domaines li.active .goutte:after{content:none;}

#domaines .goutte h3{display:none;}

#domaines .goutte img{opacity:1;}

.tabs-content > div{opacity:1; height:auto}
.tabs-content >div.active{height:auto; max-height:none}

#domaines h2:before, #domaines h2:after{content:none}

}


/*--------------------------------------------------------------
## References
--------------------------------------------------------------*/

#references{margin:0 15px;padding-top: 80px;}

#references h2,
#references h3
 {text-align:center}



#references h2:after,
#references h3:after{
  content:''; border:none;
}


#references .logo{
  /* border:#dbdbdb 1px solid; */
  height:100%;
  width:100%;
  margin: auto;
  line-height: 170px;
  transition: opacity .4s ease-out; 
-moz-transition: opacity .4s ease-out; 
-webkit-transition: opacity .4s ease-out; 
-o-transition: opacity .4s ease-out;
}

#references .logo:hover{
  opacity:0.5;

}

#references .logo img{max-height:170px}

#references .col-lg-2{
  margin:0;
  padding: 0 15px 30px;
  height: 170px;
  border: 1px solid #ebe7ed;
  border-left: none;
  text-align: center;
  margin-top:-1px;
  overflow: hidden;
}

.points{background:url(images/points.gif) no-repeat 50% 60%}

#clients{
  background:#411956 url(images/bg-sun.png) 50% no-repeat;
  margin: 0 -15px;
  color:#fff;
  text-align:center;
  padding: 60px 0 30px;
   }

.carousel-control{width:10%; }

.carousel-control.left,
.carousel-control.right{
  background:none
  }

.carousel-inner{min-height: 200px;}

.commentaire{
  font-size: 15px;
  /* font-style:italic; */
  /* font-family:'BodoniMT-Italic'; */
  margin: 0 0 15px;
  line-height: 22px;
  /* font-style: italic; */
}

.nom-client{display:inline; font-family: 'BodoniMT'; font-size: 22px;}
.entreprise-client{display:inline;font-family: 'BodoniMT-Italic';font-size: 22px;}

.icon-chevron-left:before{
  font-family:fontawesome;
  content:'\f104';
  font-size:33px;
  line-height: 150px;
}

.icon-chevron-right:before{
  font-family:fontawesome;
  content:'\f105';
  font-size:33px;
  line-height: 150px;
}


@media (max-width: 750px){

.carousel-control.left,
.carousel-control.right{
  display:none
  }

  .commentaire{

    padding-bottom:10px

}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/


#contact{
  /* padding:100px 0; */
  background:#f3f3f3;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#contact .formulaire p{
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
}

#contact .container{/* padding-bottom: 50px; */padding: 0;margin: 0 auto;}

#contact .content{
  background:#fff;
  padding: 40px 40px 30px;
  margin-left: -180px;
  margin-top: 130px;
  font-size:14px;
  font-weight:400;
  line-height:18px
}

#contact a{text-decoration:underline;}

#contact h3{ color:#77787b; margin:10px 0 15px}
#contact h3:after{ content:none}

#contact .absolute-content{
position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 z-index:99999;
 /* padding-top: 150px; */
 
}


.prf-img-contact{
   background: url(images/background-flacons-parfum.jpg) no-repeat 50% 100%;
   min-height: 800px;
   background-attachment:fixed;
   padding-bottom: 150px;
}

#contact .formulaire{
  background: url(images/bg-contact.jpg) repeat;
  color:#fff;
  padding:30px;
  margin-top: 200px;
  overflow: hidden;
 
}

#contact input[type="submit"]{
  float:right;
  margin-bottom: 20px;
}


div.wpcf7-mail-sent-ok {
	border: 2px solid #60ae7a;
	clear:both;
}

div.wpcf7-mail-sent-ng {
	border: 2px solid #f7af61;
	clear:both;
}

div.wpcf7-spam-blocked {
	border: 2px solid #f7af61;
	clear:both;
}

div.wpcf7-validation-errors {
	border: 2px solid #f7af61;
	clear:both;
}

span.wpcf7-not-valid-tip {
	color: #f7af61;
	font-size: 1em;
	display: block;
}

@media (max-width: 750px){
  
  
#contact .absolute-content{
  position:relative;
  padding-top:30px

}
#contact .formulaire{margin-top: 100px;}

#contact .content{margin-left: 0;margin-top: 0;}

#contact .formulaire input{width: 100%;}


}


/*--------------------------------------------------------------
## NAVIGATION
--------------------------------------------------------------*/

.page-template-default #masthead{
  opacity:1
}

#masthead{
  background: #fff;
  border-bottom:#f3f3f3 1px solid;
  height:80px;
  opacity: 0;
  top: 0;

}

.container .navbar-header
{margin:0 15px;}

.container>.navbar-collapse{margin: 0;padding: 0;}

.nav-header .container{padding:0}

#masthead.shrink{opacity:1;

}

.navbar-brand{padding:0}

#masthead li{padding:15px;}

#masthead li a{color:#54276d; font-size:12px;
/* margin:0; *//* padding: 15px 15px; */
font-size: 14px;font-weight: 400;
font-family:Roboto;
padding:0;
text-rendering:}


#menu-top-nav, #menu-top-pages{
  margin-top:15px}


menu-item a{
  color: #54276d;
}

#masthead li a.mPS2id-highlight{
  border-bottom:4px solid #812990;
  padding-right:0;
  padding-left:0;
  padding-bottom:5px;
}

.nav>li>a:focus, .nav>li>a:hover{background:none; opacity:0.6}

.navbar-toggle{background:#812990; color:#fff; margin-top:20px}
.navbar-toggle .icon-bar{background-color:#fff;}
.navbar-collapse{background:#fff}

@media (max-width: 990px){
#masthead .container{width:100%;margin:0 15px;}
#menu-top-nav.pull-right{float: none!important;margin: 10px 0;}  
#masthead li{padding:15px 5px;}
#masthead li a {font-size:14px}

.page-template-default #masthead .container{
  width: 750px;
  margin: auto;
}
}

@media (max-width: 768px){

#masthead li{padding: 10px 0;}
  
.navbar-collapse{height:100%;}  
#menu-top-nav.pull-right{float: none!important;margin: 10px 0;}  
.navbar-collapse li{text-align:center; }

.page-template-default #masthead .container{
  width: 100%;
  margin: auto;
}

#masthead .container{width:100%;margin:0}


}





/*--------------------------------------------------------------
## FOOTER
--------------------------------------------------------------*/

footer{
  background:#411956 url(images/bg-sun.png) 50% no-repeat;
  /* margin: 0 -15px; */
  color:#b89ebc;
  text-align:center;
  padding:30px 0;
  font-size:13px
  }

footer a{
    color:#b89ebc;
    background: none;
  }

footer a:hover, footer a:focus{
  text-decoration:none;
  color:#fff


}


.back-top{
  position:absolute;
  bottom:20px;
  right:20px;
  height:50px;
  width:50px;
  background: #411956;
  border-radius:30px;
  text-align:center;
  font-size:20px;
  line-height:45px;
  display:scroll;
  position:fixed;
  color: #fff;
  opacity: 0.2;
  z-index:99999999999999;
  /* border:1px solid #dbdbdb; */
  display:none;
}

.back-top:hover{ opacity:1}