* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    margin: 0 auto;
    color: #000000;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size:20px;
    background-image: url(../img/bg2.png);
    background-repeat: repeat;
}

header{
  position :relative;
  height:160px;
}

header.open{ background-color: rgb(95, 75, 139); height: 50vh ;}

.contenu {
  position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto;
    width: 100%;
    text-align: justify;
    padding:0 25px 10px;
  }
.contenu2 {
    position: relative;
      display: flex;
      flex-wrap: wrap;
      margin:0 auto;
      width: 100%;
      text-align: justify;
      padding:0 25px 0px;
    }

  p.p2{
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: justify;
    padding-bottom:10px;
  }

  p.p3{
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
    padding-bottom:10px;
  }

  .contenu img{
    float:left;
    margin-top: 25px;;
    margin-right: 8px; 
    border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    width: 70%;
  }

  .piedpage{
    clear: both;
    position: relative;
    display:flexbox;
    flex-wrap: wrap;
    padding-top:20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 13px;
    margin:0 auto;
    width: 100%;
    padding:40px 0 25px 0;
    align-items: center;
    justify-items: center;
  }
  
  .piedpage p{text-align: center; padding: 10px 0; }
  .certification{font-size:13px; font-weight: 400;border-top:1px dotted #bebebe; border-bottom: #bebebe 1px dotted;}
  .certification img{vertical-align: middle; padding-left:4px; width:50%;}

.logo{
  display:block;
  height: 140px;
  width: 126px;
  float:left;
  margin:10px 0 0 20px;
  background-image: url(../img/logo_vertical.png) ;
  background-repeat: no-repeat;
}

.logo.open{
  background-image: url(../img/logo_vertical2.png);
}

.bandeau{display:none;}

.mentions {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    margin:0 auto;
    width: 100%;
    padding:0 25px 0;
  }

.mentions p {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-align: justify;
    padding-bottom:10px;
  }

.big{
    position: relative;
    display:flex; 
    flex-wrap: nowrap;
    margin: 0 auto;
    align-content: center;
    width: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
  }
.big img{margin:0 auto; width:100%;}


h1{
  font-family:'Oswald', sans-serif; 
  font-weight:400; 
  font-size: 26px; 
  color:rgb(95, 75, 139); 
  text-align: center; 
  text-transform: uppercase; 
  padding: 0px 0px 25px;
  margin-top:25px;
  background-position: center;
  background-image: url(../img/surlignage.png);
  background-repeat: no-repeat;
  background-size:contain;
  -webkit-animation-name: surlignage;
  animation-name: surlignage;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@-webkit-keyframes surlignage {

from{background-position:0 0; opacity:0; left:-700px; }
  to{background-position: contain;opacity:1;} 
}

@keyframes surlignage {

from{background-position:0 0; opacity:0; left:-700px; }
  to{background-position: contain;opacity:1;} 
}

h2{
  position: relative;
  font-family:'Oswald', sans-serif; 
  font-weight:300; 
  font-size: 20px; 
  color:rgb(95, 75, 139); 
  text-transform: uppercase; 
  float:right;
  right: 8%;
  top:35%;
}

h3{
  position: relative;
  font-family:'Oswald', sans-serif; 
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
  padding-bottom: 12px;
  text-align: center;
}

h4{
  position: relative;
  font-family:'Oswald', sans-serif; 
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 15px;
  line-height: 1.4em;
  text-align: center;
  width: 78%;
  margin:0 auto;
  color:rgb(95, 75, 139);
}

h5{
  font-family:'Oswald', sans-serif; 
  font-weight:400; 
  font-size: 17px; 
  color:rgb(95, 75, 139); 
  text-align: center; 
  text-transform: uppercase; 
  padding: 0px 0px 25px;
  margin-top:25px;
  background-position: center;
  background-image: url(../img/surlignage.png);
  background-repeat: no-repeat;
  background-size:cover;
  width:90%;
  height:100%;
  margin:0 auto;
  line-height: 1.2em;
  -webkit-animation-name: surlignage2;
  animation-name: surlignage2;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  animation-timing-function: ease;
}

@-webkit-keyframes surlignage2 {
  from{clip-path: inset(0 100% 0 0); }
    to{clip-path: inset(0 0 0 0);} 
  }
  
  @keyframes surlignage2 {
    from{clip-path: inset(0 100% 0 0); }
    to{clip-path: inset(0 0 0 0);} 
  }

  
.titre{font-size: 18px;font-weight: 400; text-align: left;}
.retour{font-size:17px; margin:15px 0 10px;}
.rdv{font-size:17px;margin:0 auto; margin-right:0px;}
.contact{margin:auto 0; padding-top:10px; padding-bottom:80px; text-align: center; font-size: 21px;}


/*///// MENU BURGER //////*/
.menu-icon-wrapper {
	position: relative;
	display: block;
  width: 100px;
  height: 100px;
  float: right;
  margin-right: 55px;
}
.burger{
	position: absolute;
	width: 46px;
	height: 31px;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
  opacity:0.5;
}

.burger span{
	position: absolute;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: rgb(95, 75, 139);
	-webkit-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.burger span:nth-child(1){top: 0;}
.burger span:nth-child(2){top: 13px;}
.burger span:nth-child(3){top: 26px;}

.burger.active span:nth-child(1){
	top: 14px;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  background-color: rgb(185, 173, 210);
}
.burger.active span:nth-child(2){
	left: -100%;
	opacity: 0;
}
.burger.active span:nth-child(3){
	top: 14px;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
  background-color: rgb(185, 173, 210);
}

.burger:hover{
  opacity:1;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}


/*///// MENU //////*/
.menu{
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width:100%;
}
.menu.open{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgb(95, 75, 139);
}

.menu a{
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 300;
  color: rgb(255, 255, 255);
  padding: 8px 0 8px;
  border-bottom: 1px dotted rgb(255, 255, 255, 0.5);
  text-decoration: none;
  text-align: center;
}

.menu a:hover{
  color:rgb(250, 204, 21);
  -webkit-transition: ease-in-out .7s;
  -o-transition: ease-in-out .7s;
  transition: ease-in-out .7s;
}

/*///// CARTES //////*/
.container {
    display: flex;
    flex-wrap: wrap;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 20px;
    margin:0 auto;
    width: 90%;
    padding-top:15px;
  }
  
.carte {
    background-color: #ffffff;
    padding: 10px;
    flex: 30%;
    margin:10px;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #9e9e9e;
    -webkit-box-shadow: 0 0 10px 0 #9e9e9e;
    background-image: url(../img/1cog-way.png);
    background-repeat: no-repeat;
    background-position: left;
    min-height: 200px;
    background-origin:content-box;
  }
  
.carte2{
  background-color: #ffffff;
  padding: 10px;
  flex: 30%;
  margin:10px;
  border-radius: 20px;
  box-shadow: 0 0 10px 0 #9e9e9e;
  -webkit-box-shadow: 0 0 10px 0 #9e9e9e;
  background-image: url(../img/3cogs-way.png);
  background-repeat: no-repeat;
  background-position: left;
  min-height: 200px;
  background-origin:content-box;
}

.carte3{
  color:#000;
  padding: 0px;
  flex: 100%;
  padding :20px;
  }

.carte3 img{width:100%;}

.carte3 p.smallp1{font-size: 9pt;}
.carte3 p.smallp2{font-size: 9pt;display:none;}

.carte3 a:hover{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}

.carte4{
  color:#000;
  padding: 0;
  display: block;
  text-align: justify;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0;
  padding-bottom: 15px;
  }

  .carte5{
    display: none;
    color:#000;
    padding: 0px;
  }
/* 
.carte5 img{width:46%;}   */
  
.carte p{clear: both;}
.carte2 p{clear: both;}

.carte p.lien{text-align: right; padding: 55px 8px 0 0;}
.carte2 p.lien{text-align: right; padding: 55px 8px 0 0;}
.carte4 p{padding-bottom: 5px;}  

/*///// FONT AWESOME /////*/
.fa-plus-circle{padding-left:5px; font-size: 22px;}
.fa-sign-in-alt{padding-right:5px; font-size: 21px; }

/*///// LIENS /////*/
a.one{
  text-decoration: none;
  color: rgb(95, 75, 139);
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  -webkit-transition: ease-in-out .7s;
  -o-transition: ease-in-out .7s;
  transition: ease-in-out .7s;
}
a.one:hover{color:rgb(185, 173, 210);}

a {
  text-decoration: none;
  color: rgb(95, 75, 139);
  font-weight: 500;
  -webkit-transition: ease-in-out .7s;
  -o-transition: ease-in-out .7s;
  transition: ease-in-out .7s;
}

a:hover{color:rgb(185, 173, 210);}

a.two {
  text-decoration: underline;
  color: rgb(0, 0, 0);
  font-weight: 400;
  -webkit-transition: ease-in-out .7s;
  -o-transition: ease-in-out .7s;
  transition: ease-in-out .7s;
}

a.two:hover{color:rgb(95, 75, 139);}


.at::before{content: "mathildemottier";}
.at::after{content:"gmail.com";}


/*///// STYLES POLICE /////*/

.small{font-size: 9pt;}
.saut{margin-bottom: 10px;}
.temoin-titre{color: rgb(95, 75, 139); font-weight: 400; font-size: 16px; font-family:'Oswald', sans-serif;}
p.temoin{font-size: 17px; font-weight:300; margin-top:0.25em; line-height: 1.4em; font-family:'Oswald', sans-serif; }
.temoin-titre::before{content:"» ";}
.temoin-a{border-bottom: 1px dotted rgb(95, 75, 139); padding-bottom: 20px; padding-top:12px;}
.temoin-b{padding-bottom: 15px;}
.barnabe{font-weight:500;}
.bold{font-weight: 400;}

/*///// MEDIA SCREEN //////*/

@media (max-width: 800px) {
    .container{ 
      width:100%;
      font-family: 'Oswald', sans-serif;
      font-weight: 300;
      font-size: 20px;
      padding-top: 15px;;
      }
    .carte, .carte2 {
      -webkit-box-flex: 90%;
      -ms-flex: 90%;
      flex: 100%;
      border-radius: 0px;
      min-height: 150px;
      /* margin:10px 5px;
      padding:10px; */
    }
    .carte {background-size: 23%;}
    .carte2 {background-size: 23%;}
    .carte p{clear: both;}
    .carte2 p{clear: both;}

    .carte p.lien{text-align: right; padding-top: 55px; padding-right:7%;}
    .carte2 p.lien{text-align: right; padding-top: 55px; padding-right:7%;}

    .menu-icon-wrapper {
      margin-right: 0;
    }

/*     section{
      background-image: url(../img/bg2.png);
      background-repeat: repeat;
    } */
  }

@media screen and (min-width: 801px) {

  body {
    margin: 0 auto;
    background:fff;
    color: #000000;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size:20px;
    background-image: none;
  }

  .menu-icon-wrapper {display: none;}

  .menu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: absolute;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }

  .menu a{
    border-bottom: none;
    font-size: 20px;
    font-weight: 300;
    text-decoration: none;
    padding:30px 10px 15px 10px;
    /* padding-right:10px;
    padding-left:10px; */
    color:rgb(95, 75, 139);
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(185, 173, 210)), color-stop(1%, rgba(185, 173, 210)), color-stop(1%, transparent)) no-repeat center bottom / 0 100%;
    background: linear-gradient(to top, rgb(185, 173, 210) 0%, rgba(185, 173, 210) 1%, transparent 1%) no-repeat center bottom / 0 100%;
    background: -webkit-linear-gradient(bottom, rgba(185, 173, 210) 0%, rgb(185, 173, 210) 1%, transparent 1%) no-repeat center bottom / 0 100%;
    background: -o-linear-gradient(bottom, rgb(185, 173, 210) 0%, rgba(185, 173, 210) 1%, transparent 1%) no-repeat center bottom / 0 100%;
    transition: background-size .5s;
    -webkit-transition: background-size .5s;
    -o-transition: background-size .5s;
  }

  .menu a:hover{
    background-size: 90% 100%;
    background-position: center bottom;
    color:rgba(185, 173, 210);
  }

  .menu .active{
  color: rgb(95, 75, 139);
  background-image: url(../img/surlignage2.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position-x: left;
  background-position-y:center;
}

  .menu .active:hover{
  background-size: 0% 100%;
  color: rgb(95, 75, 139);
  background-image: url(../img/surlignage2.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left;
}

.logo{display: none;}

.bandeau{
    display:block;
    float:left;
    padding-top: 5px;
    padding-right: 20px;
  }

.contenu {
  position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto;
    width: 80%;
    text-align: justify;
  }

p.p2{
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 19px;
  text-align: justify;
  padding-bottom:15px;
}

p.p3{
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 17px;
  text-align: justify;
  padding-bottom:15px;
}

.contenu2 {
  position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto;
    width: 80%;
    text-align: justify;
    height: 10vh;
  }

.temoin-titre{color: rgb(95, 75, 139); font-weight: 400; font-size: 17px; font-family:'Oswald', sans-serif;}
p.temoin{font-size: 18px;margin-top:0.3em; line-height: 1.45em; font-weight: 300;font-family:'Oswald', sans-serif;}
.temoin-titre::before{content:"» ";}
.temoin-a{border-bottom: 1px dotted rgb(95, 75, 139); padding-bottom: 20px; padding-top:15px;}
.temoin-b{padding-bottom: 15px; padding-top:15px;} 

section{
  display:block;
  margin: 0 auto;
  width: 950px;
  background-image: url(../img/bg2.png);
  background-repeat: repeat;
  box-shadow: 0 0 15px 0 #bebebe;
  padding-bottom: 90px;
}

.sectioncover{min-height:100vh;}

.retour{font-size:17px; margin:15px 0 15px;}
.rdv{font-size:17px;margin:0 auto; margin-right:0px;}
.contact{margin:auto 0; text-align: center; font-size: 23px; padding-bottom: 150px;}

.mentions {
    display: block;
    flex-wrap:wrap;
    margin:0 auto;
    width: 80%;
    padding:0 25px 10px;
  }

.mentions p {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 17px;
    text-align: justify;
    padding-bottom:8px;
  }

h1{
  font-family:'Oswald', sans-serif; 
  font-weight:400; 
  font-size: 35px; 
  color:rgb(95, 75, 139); 
  text-align: center; 
  text-transform: uppercase; 
  padding:0 0 50px 0;
  margin-top:0;
}

h2{
  position: relative;
  font-size: 25px;
  right:2%;
}

h3{
  position: relative;
  font-family:'Oswald', sans-serif; 
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3em;
  padding-bottom: 20px;
  text-align: center;
}

h4{
  position: relative;
  font-family:'Oswald', sans-serif; 
  font-size: 22px;
  font-weight: 300;
  text-align: center;
  width: 95%;
  color:rgb(95, 75, 139);
  line-height: 1.4em;
  padding-bottom: 25px;
}

h5{
  font-family:'Oswald', sans-serif; 
  font-weight:400; 
  font-size: 20px; 
  color:rgb(95, 75, 139); 
  text-align: center; 
  text-transform: uppercase; 
  padding: 0px 0px 35px;
  margin-top:25px;
  background-position: center;
  background-image: url(../img/surlignage.png);
  background-repeat: no-repeat;
  background-size:cover;
  width:85%;
  margin:0 auto;
  line-height: 1.2em;
  margin-bottom: 25px;
}

.bold{font-weight: 400;}

.carte {
  background-position: left;
}

.carte3{
  flex:8%;
  color:#000;
  padding: 0px;
  float:left;
  padding-top: 8px;
  padding-right: 12px;
  }

.carte3 a:hover{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}

.carte3 img{width:95%;}

.carte3 p.smallp1{font-size: 9pt; display:none;}
.carte3 p.smallp2{font-size: 9pt; display: block;}

.carte4{
  color:#000;
  padding: 0;
  -webkit-box-flex: 30%;
  -ms-flex: 30%;
  flex: 30%;
  text-align: justify;
  font-size: 18px;
  }

.carte4 p{padding-bottom: 5px;}

.carte5{display:block;color:#000; padding: 0px;}

.carte5 img{float:left; width:49%;  padding-right: 10px; padding-top: 10px;padding-bottom: 5px;}

.piedpage{
  clear: both;
  position: relative;
  display: flexbox;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin:0 auto;
  padding-top:20px;
  width: 80%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
}

.piedpage p{text-align: center; margin-bottom:10px;}
.small{font-size: 11pt; line-height:2em;}
.saut{margin-bottom: 15px;}
.certification{font-size:15px; font-weight: 400;border-top:1px dotted #bebebe; border-bottom: #bebebe 1px dotted; }
.certification img{vertical-align: middle; padding-left:4px; width:244px;}

.big{
  position: relative;
  display:flex; 
  flex-wrap: nowrap;
  margin: 0 auto;
  align-content: center;
  width: 80%;
  padding-top:0;
  padding-bottom: 50px;
  text-align: center;
}

.big img{margin:0 auto; width:600px;}

.titre{font-size: 20px;font-weight: 400; text-align: left;}

} /* fin media screen*/