/*
Theme Name: David Daumer
Theme URI: https://daviddaumer.com/
Author: David Daumer
Author URI: https://daviddaumer.com/
Description: Ce thème est créé en éco-conception Web.
Version: 1.0.0

Il est basé sur le thème Susty, https://sustywp.com créé par Jack Lenox. Ce thème a été créé pour un Web plus durable. Ce thème ne fait que 6kB.

*/



.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: transparent;
    border-radius: 3%;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: .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;
}
#content[tabindex="-1"]:focus {
    outline: 0
}
html {
    box-sizing: border-box;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    background-color: #fff;
    margin: 0;
    color: #0a0032;
    position: relative;
}
ul {
    list-style: none
}
img {
    height: auto;
    max-width: 100%;
    border-style: none;
}
@font-face {
    font-family: 'philosopherregular';
    src: url('../daviddaumer/fonts/philosopher-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rosariosemibold';
    src: url('../daviddaumer/fonts/rosario-semibold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
body,
button,
input,
select,
optgroup,
textarea, #presentation h2 {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
}
h2, h3, h4, h5, h6 {
    font-family: 'rosariosemibold';
    font-weight: 300;
}
h1 {
    font-family: 'philosopherregular';
    font-size: 4.167em;
    display: block;
    top: 0;
    opacity: 1;
    position: relative;
    animation: fadetitle 1.5s cubic-bezier(0.1, -0.6, 0, 0);
}
  @-webkit-keyframes fadetitle {
0% {
	-webkit-top:25px;
  -webkit-opacity: .1;
}
100% {
     -webkit-opacity: 1;
	-webkit-top:0px;
  }
}
strong {
    font-weight: 600;
}
h2 {
    font-size: 2.778em;
    text-align: center;
}
.button-general-d,
html input[type="button"],
input[type="reset"],
input[type="submit"], #vscf .form-group button {
    display: block;
    margin: 2em auto 0 auto;
    color: #efdd30;
    background: #0a0032;
    box-shadow: 10px 10px 10px 0 rgba(10, 0, 50, .1) !important;
    border-radius: 15% / 45%;
    border: 0;
}
.button-general-d-light {
    color: #0a0032;
    background-color: white;
}
button.button-general-d-light a, .button-general-d-light:visited, .button-general-d-light {
    color: #0a0032;
}
.button-general-d a, .button-general-d:visited {
    display: block;
    color: #efdd30;
    padding: 1.2em 2.5em;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    font-family: 'rosariosemibold', 'sans-serif';
}
html input[type="button"], input[type="reset"], input[type="submit"], #vscf .form-group button {
    padding: 1.2em 4em;
}
button, input {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}
fieldset {
    padding: .35em .75em .625em;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"],
input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    background-color: #0a0032;
    color: #efdd30;
    border-radius: 30px;
    border: 0;
    margin-top: 12px;  
    padding: 10px 10px 10px 15px;
  -webkit-text-fill-color: #efdd30;
  -webkit-background-color: #0a0032;
  -webkit-box-shadow: #0a0032 inset;
}
html input[type="button"], input[type="reset"] {
    padding: 1.2em 4em;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus,
input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus,
textarea:focus, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
    background-color: #efdd30;
    color: #0a0032;
  	text-fill-color: #0a0032;
  -webkit-text-fill-color: #0a0032;
   -webkit-background-color: #0a0032;
  -webkit-box-shadow: #0a0032 inset;
}


input:-webkit-autofill {
    -webkit-text-fill-color: #efdd30;
    -webkit-background-color: #0a0032;
}
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0a0032;
    -webkit-background-color: #0a0032;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea{
    width: 100%;
}

select {
    border: 1px solid #ccc;
}
textarea {
    width: 100%;
}
a {
    position: relative;
    text-decoration: none;
    color: #0a0032;
    z-index: 1;
}
a:visited {
    color: inherit;
}
a:focus, .screen-reader-text:focus {
    outline: thin dotted transparent;
}

a:focus-visible, .screen-reader-text:focus-visible {
    outline: 2px dotted #efdd30;
}

a:hover, a:active {
    outline: 0;
    position: relative;
}
header#masthead {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 1em;
    justify-content: space-between;
    position: fixed;
    z-index: 10;
}
header#masthead a {
    border-bottom: 0;
}
header#masthead>a {
    font-weight: bold;
}
header#masthead>a>svg {
    width: 1.8em;
    height: 1.8em;
}


#presentation, #projet, #services, #demarche-eco, #contact {
    padding: 10% 0;
    position: relative;
}
#presentation::after, #projet::after, #services::after, #demarche-eco::after, #avis::after {
    display: block;
    background-image: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg');
    content: " ";
    background-repeat: no-repeat;
    background-size: 245%;
    background-position: 1.5% 29%;
    left: -10%;
    bottom: -1vh;
    width: 110%;
    height: 50vh;
  	position: absolute;
  	filter: drop-shadow( 0 -4px 6px rgba(0,0,0,.5));
  	-webkit-filter: drop-shadow( 0 -4px 6px rgba(0,0,0,.5));
    z-index: 2;
}

.link-crea-perso::before, .bloc-foo-contact a::before, .bloc-foo-infos-legales a::before, #projet .content p a::before, .navposts_single .links-single h3 a::before, .single .description-projet a::before, .single p a::before, .blog main a::before,
.page-template-dark-page .content p a::before, .page-template-dark-page-services .content p a::before, .single .content p a::before, .navposts_single .nav-previous p::before, .navposts_single .nav-next p::before, #container-archives ul li a::before, .page-template-dark-page-services main ul li a::before{
    display: inline-block;
    content: '';
    transform: scale3d(1,1,1);
    background-color: #efdd30;
    width: 100%;
    position: absolute;
    height: .5em;
    bottom: 0;
    opacity: .5;
    z-index: -1;
    transition: all .25s cubic-bezier(.6,0,.4,1);    
}



#site-navigation::before {
    content: 'Mon site web émet 0,31g d’équivalent CO2 en moyenne par page 🌱';
    color: #0a0032;
    font-style: italic;
}

button#menu{
    display: block;
    content:' ';
    position: fixed;
    right: -2px;
    width: 7.5rem;
    height: 7.5rem;
    top: -10px;
    border: none;
    background-color: #efdd30;
    border-radius: 132% 58% 20% 100% / 115% 45% 25% 115%;
    will-change: border-radius, transform, opacity;
    animation: morph-menu 2.5s linear infinite;
    z-index: 3;
}

@keyframes morph-menu {

    0%,
    100% {
        border-radius: 55% 0% 0% 40% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
        box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -webkit-border-radius: 55% 0% 0% 40% / 45% 45% 55% 55%;
        -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
        -webkit-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -moz-border-radius: 55% 0% 0% 40% / 45% 45% 55% 55%;
        -moz-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
        -moz-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
    }

    34% {
        border-radius: 80% 0% 0% 65% / 30% 29% 71% 70%;
        transform: translate3d(0, 2px, 0) rotateZ(0.01deg);
        box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -webkit-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -webkit-border-radius: 80% 0% 0% 65% / 30% 29% 71% 70%;
        -webkit-transform: translate3d(0, 2px, 0) rotateZ(0.01deg);
        -moz-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -moz-border-radius: 80% 0% 0% 65% / 30% 29% 71% 70%;
        -moz-transform: translate3d(0, 2px, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 0% 0% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
        box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -webkit-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -webkit-border-radius: 100% 0% 0% 100% / 100% 100% 60% 60%;
        -webkit-transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
        -moz-box-shadow: 15px 12px 30px 0px rgba(10, 0, 50, 0.3);
        -moz-border-radius: 100% 0% 0% 100% / 100% 100% 60% 60%;
        -moz-transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
}



/* MENUUU */


.navbar {  
  display:flex;
  align-items:center; 
  justify-content:space-between;
  background-color:transparent;
}
.navbar__links { 
  display:flex;  
}
.navbar .menu-item { 
  padding:0 10px;
}
.navbar .menu-item > a { 
  color:#0A0032;
  padding-left: 0;  
  text-decoration:none;
  position: relative;
  transition: all .2s ease-in-out;
}

.navbar .menu-item > a:hover{
    padding-left: 1rem;
    transition: all .2s ease-in-out;
}

    .navbar__links { 
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content: center;
      text-align: center;
      width:0;
      height:100vh;  
      position:absolute;
      gap: 2rem;
      top:0;
      right:0;
      margin-top: 0;
      list-style: none;     
      background-color:#efdd30;
      transform: translateX(110%);
      transition: all .4s ease-in-out;
    }


    .navbar .menu-item > a.primary-button{
        color: #011727;
        box-shadow: 4px 4px 0px white;
        width: 15rem;
    }

    .show-nav .navbar__links {  
      width:100vw;    
      transform: translateX(0);
      padding-left: 0;
    } 
    .navbar .menu-item {    
      transform: translateX(100%);
      transition: all .5s ease-in-out;
    }
    .show-nav.navbar .menu-item  {        
      transform: translateX(0);    
    }   

    .navbar .menu-item > a {
      display:block;
      font-size:1.25rem;
      font-family: 'rosariosemibold';
      width: 100%;
    }

    .burger {
      display:block;
      position:relative;
      font-size: 1.5rem;
      width:100%;
      height:5rem;
      top: 10px;
      border:none;
      background:none;
      cursor:pointer;
      z-index: 3;
    }

    .bar {
      display:block;
      font-size: 1.7rem;    
      transition: all .25s ease-in-out;
      z-index: 2;   
    }

     .bar::before, .bar::after {
      height:4px;  
      border-radius:3px;
      content:"";
      width:25px;
      height:3px;
      position:absolute; 
      right:0;  
      background-color:#011727;
      border-radius:3px;    
      transition: all .25s ease-in-out;
    }
    
    .bar::before{
        width: 50px;
        transform:translate(-27px, -32px)
    }

    .bar::after {
      transform:translate(-27px, -18px);
    }

    .burger::before
    {
        display: block;
        content: 'Menu';
        font-size: 1.25rem;
        padding-left: 1rem;
    }

     .show-nav .burger::before {
      display: block;   
      content: 'Fermer';
      padding-left: 0;
      color: #efdd30;
    } 
  
    .show-nav button#menu{
        background-color: #0a0032;
    }

    .show-nav .bar::before {
        transform: translate(-27px, -22px) rotate(-135deg);
        width: 35px;
        background-color: #efdd30;
      }

    .show-nav .bar::after {
        transform: translate(-27px, -22px) rotate(-45deg);
        width: 35px;
        background-color: #efdd30;
        }


/* ******** */


#primary-menu {
    padding: 0;
}
.logo {
    flex: 0 0 6em;
    text-align: center;
    line-height: 0;
    margin: 1em .5em 0 0;
}
.logo svg {
    width: 2.4em;
    height: 2.4em;
}
svg * {
    width: 100%;
    height: 100%;
}
.content {
    max-width: 33em;
    margin: 0 auto;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
article>header>h1,
article>header>h2 {
    font-size: 2.4em;
    line-height: 1em;
    margin: 0 0 .4em 0;
}
.home #main::before { 
    display: block;
    background-image: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg');
    content: ' ';
    background-repeat: no-repeat;
    background-position: -1855px -480px;
    background-size: 2300px;
    height: 1200px;
    width: 220px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1; 
}
.home #main::after {
    display: block;
    background-image: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg');
    content: ' ';
    background-repeat: no-repeat;
    background-position: -2405px -900px;
    background-size: 2750px;
    height: 900px;
    width: 280px;
    top: 35vh;
    right: 0;
    position: absolute;
    z-index: 1;
}
#header-home {
    background-color: #0a0032;
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
    flex-direction: column;
    height: 100vh;
}
#header-home h2 {
    font-size: 4.5em;
    margin: 0;
    font-family: 'philosopherregular';
    font-weight: 400;
}
#header-home h1 {
    font-size: 1.75em;
    margin: 0 auto;
    font-weight: 300;
    font-family: 'rosariosemibold';
    z-index: 2;
}
.logo-header-home {
    display: block;
    background-image: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg');
    content: ' ';
    background-repeat: no-repeat;
 	background-position: -4073px -75px;
    background-size: 4500px;
    height: 300px;
    width: 350px;
    z-index: 1;
    margin: 2% auto;
}
section { 
    width: 100%;
}

#presentation {
    display: flex; 
    text-align: center;
    align-items: center;
    padding: 24% 0 32% 0;
}
#presentation h2{
margin-top:3em;  
font-weight:400;
}

.wp-image-174 {
    border-radius: 5%;
}
#projet .content, #services .content {
    max-width: 70em;
    width: 70em;
    text-align: center;
}
#projet {
    background-color: #fc835e;
    color: white;
    padding: 11% 0 33% 0;
  	z-index:3;
}
#projet .content p{
        max-width: 33em;
}

#projet .content p:last-of-type{
margin-bottom:3em;
}
#projet::after {
    background-position: 1.5% 2.5%;
    height: 40vh;
  	filter: drop-shadow( 0 -15px 6px rgba(0,0,0,.15));
  	-webkit-filter: drop-shadow( 0 -15px 6px rgba(0,0,0,.15));
}
#projet ul {
    display: inline-flex;
    align-items: center;
    width: 60em;
    justify-content: space-between;
}
#projet img, .post img, .category-prochain_projet {
    width: 100%;
    border-radius: 5%;
    box-shadow: 0.5em 0.5em 18px rgb(165 42 42 / 25%); 
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
    -moz-filter: brightness(80%);
}
#projet .card-project a{
	display: flex;
    justify-content: center;
    align-items: center;
}
#projet h3 {
  	color: white;
	position: absolute;
	font-size: 1.75em;
	z-index: 1;
  	margin:0;
}
#services {
    padding: 10% 0 27% 0;
}
#services::after {
    background-position: 1.5% 59%;
    height: 50vh;
  	filter:drop-shadow( 0 -2px 6px rgba(0,0,0,.75));
  	-webkit-filter:drop-shadow( 0 -2px 6px rgba(0,0,0,.75));
}
#services p.intro {
    text-align: center;
}
#services p {
    max-width: 33em;
    text-align: left;
    margin: 0 auto;
}
#services h3 {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    max-width: 15em;
    margin: 0 auto .65em auto;
    text-align: center;
    font-weight: 600;
}
#services .prestations {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
#services .bloc-presta-1, #services .bloc-presta-2, #services .bloc-presta-3 {
    max-width: 30em;
    width: 30em;
    margin-top: 5em;
    border-radius: .75em;
    box-shadow: 2px 2px 8px rgba(10, 0, 50, .2);
    padding: 2em;
    overflow: hidden;
}

#services .bloc-presta-3{
    margin: 4em auto;
}

.img-presta {
    display: block;
    width: 250px;
    height: 250px;
    background: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg') no-repeat;
    background-size: 1000%;
    background-position: -1340px -910px;
    margin: 0 auto;
}
.img-gestion {
    background-position: -1315px -1210px;
}
.img-dev {
    background-size: 1070%;
    background-position: -2382px -135px;
    width: 275px;
}
#demarche-eco {
    background-color: #0a0032;
    width: 100vw;
    color: white;
    padding: 12% 0 38% 0;
}
#demarche-eco .content {
    display: block;
}

#avis::after, #demarche-eco::after {
    background-position: 5% 29%;
    height: 45vh;
    filter: none;
    transform: scaleX(-1);
    -webkit-filter: none;
}
#avis::after {
    background-position: 5% 3%;
  	filter: drop-shadow( 0 -15px 6px rgba(0,0,0,.15));
	-webkit-filter: drop-shadow( 0 -15px 6px rgba(0,0,0,.15));
}

#demarche-eco .img-eco {
    display: block;
    width: 500px;
    height: 300px;
    background: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg') no-repeat;
 	background-size: 1800px;
    background-position: -920px 10px;
    margin: 0 auto;
}
#demarche-eco h2 {
    width: 9em;
    margin: 0 auto;
}
#demarche-eco h3 {
    text-align: center;
    margin-bottom: 3em;
}
#avis{
    background-color: #fc835e;
    color:white;
    padding: 13% 0 38% 0;
    position: relative;  
    z-index: 2;
}
#avis h2{
    margin-bottom: 0;
}
#avis #sub-title, #avis .title-avis{
    display: flex;
    align-items: baseline;
}
#avis #sub-title p:nth-of-type(1){
        font-size: 1.5em;
    }
#avis #sub-title p:last-child{
margin-left: .25em;
    opacity: .65;
}
#avis #sub-title .star{
    font-size: 1.75em;
}
#avis .content-avis{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
}
#avis .bloc-avis{
    margin: 2em 2em 0 2em;
    width: 20em;
}
#avis .star{
    margin: 0 .5em;
    color: #efdd30;
}
#avis h3{
    margin-bottom: .25em;
}
#avis .button-general-d{
    margin-top: 4em;
}
#contact {
    color: #0a0032;
    padding: 6% 0 26% 0;
    background-color: white;
    z-index: 2;
}
#contact .content {
    max-width: none;
}
#contact h2 {
    margin-bottom: .5em;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output {
    border: #0a0032 solid 2px!important;
  	border-radius:2em;
    color: #dc3232;
    border: none;
    padding: 1em;
    text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output{
color:#0a0032;
}

#option-field {
    display: none;
}

footer {
    position: relative;
}
footer#colophon {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100vw;
    margin: 0 auto;
    text-align: center; 
    font-size: .75em;
    background-color: #0a0032;
    line-height: 2em;
    color: white;
    padding: 8em 4em 3em;
}
footer h3{
    color: white;
    text-align: left;
}
#shape-footer {
    display: block;
    background-image: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg');
    content: " ";
    background-repeat: no-repeat;
    background-size: 245%;
    background-position: 1.5% 58%;
    left: -10%;
    top: -37vh;
    width: 110%;
    height: 45vh;
    position: absolute;
    z-index: 4;
  	filter: drop-shadow( 0 -10px 6px rgba(0,0,0,.25)); 
  	-webkit-filter: drop-shadow( 0 -10px 6px rgba(0,0,0,.25)); 
}
#infos-footer{
    display: flex;
    justify-content: space-evenly;
  	margin-bottom:4em;
}
.bloc-foo-contact{
    text-align: left;
}




.navposts_single .nav-next p::before {
    bottom: 2px;
	width: 96px;
  	z-index: 0;
}

.navposts_single .nav-previous p::before{
    bottom: 1px;
    width: 120px;
	z-index: 0;
}

.bloc-foo-contact a::before{
    z-index: 1;
}

.bloc-foo-infos-legales a::before{
    bottom: 6px;
}
footer a, footer a:visited {
    color: white;
    transition: all .5s;
} 
.bloc-rs {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.rs{
    display: flex;
}
.img-rs {
    display: block;
    width: 80px;
    height: 80px;
    background: url('../../../wp-content/uploads/2021/06/spriteheet-david-daumer-rennes-design-eco-conception-web.svg') no-repeat;
    background-size: 1800px;
    background-position: -1693px -270px;
    margin: 0 auto;
    opacity: 1;
}
.img-linkedin {
    background-position: -1683px -365px;
}
.img-dribbble {
    background-position: -1677px -175px;
}
.img-logo-dd {
    background-size: 2300px;
    background-position: -2072px -50px;
    height: 135px;
    width: 200px;
    margin: 0;
}
.bloc-foo-avis{
    display: flex;
    flex-direction: column;
}
.bloc-foo-avis h3, .bloc-rs h3{
    margin-bottom: 0;
}
footer .star{
display: flex;
font-size: 1.25em;
}
footer .star p{
    margin-left: .5em;
    }
    footer .star p:first-child{
        color: #efdd30;
        }


.infos-footer-supp{
	display:flex;
	justify-content: space-evenly;
  	align-items: flex-end;
}

.infos-footer-eco-col1, .infos-footer-eco-col2{
  width:24%;
  text-align:left;
}

.infos-footer-eco-col1 h3, footer p{
margin:0;
}

.bloc-foo-infos-legales{
    display: flex;
  	flex-direction:column;
    align-items: self-end;
    background-color: #0a0032;
    color: white;
    position: relative;
}
.bloc-foo-infos-legales a, .bloc-foo-infos-legales p{
    font-size: 1em;
    position: relative;
    z-index: 2;
}

.shape-header-marine {
    position: absolute;
    top: 50px;
    background: url('../../themes/daviddaumer/images/forme-header-desktop-navy-dd.svg') no-repeat;
    background-size: 850px;
    background-position: center;
    width: 100%;
    height: 450px;
    left: 0;
    z-index: 0;
    filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
    -webkit-filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
}
.title-page {
    margin: 2.75em auto 3em auto;
    text-align: center;
    color: white;
    z-index: 1;
    font-weight: 500;
}
#container-archives {
    display: flex;
    padding-bottom: 10%;
    width: 55em;
    max-width: 55em;
    margin: 0 auto;
    flex-flow: row wrap;
}

#container-archives article a::before{
display: none;
}
#container-others-projects{
    width: 71%;
    margin: 0 auto 30% auto;
}
#container-others-projects ul{
display: flex;
justify-content: center;
gap: 2em;
flex-wrap: wrap;
padding-left: 0;
}

.post {
    display: inline-flex;
    flex-flow: row wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3% auto;
    position: relative;
}

.category-prochain_projet{
    background-color: #0A0032;
    color: white;
}

.category-prochain_projet:nth-of-type(1), .category-prochain_projet:nth-of-type(4), .category-prochain_projet:nth-of-type(1), .category-prochain_projet:nth-of-type(5){
    width: 500px;
    height: 300px;
    align-self: center;
}

.category-prochain_projet:nth-of-type(2), .category-prochain_projet:nth-of-type(3){
    width: 300px;
    height: 500px;
   }

 

#container-archives h2 {
width:100%;
text-align:center;
margin:10% auto 5% auto;  
}
.card-project{
    display: flex;
    justify-content: center;
    align-items: center;
}
#container-archives ul{
    display: flex;
    gap: 5em;
    width: 100%;
    justify-content: center;
}
.post h3 {
	position: absolute;
  	text-align:center;
	color: white;
	margin:0;
  	z-index: 1;
	font-size: 1.75em;
}

.category-prochain_projet .card-project{
    flex-direction: column;
}

.category-prochain_projet h3{
    position: relative;
   }

   .category-prochain_projet h4{
    margin: 1em auto 0 auto;
   }

.post h3 a {
    color: white;
}
.blog .description-page {
    margin: 0 auto 30% auto;
}
.single-post #main {
    padding-bottom: 20%;
}
.header-single {
    display: flex;
    position: relative;
    top: 75px;
    width: 47em;
    margin: 0 auto;
}
.image_header_mobile {
    display: none;
}
.single-post h1 {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1;
    margin-top: 3em;
    position: absolute;
    color: white;
    font-weight: 500;
    font-size: 3.75em;
}


.postid-320.single-post h1 {
    margin-top: 3.25em;
    font-size: 3.5em;
}
.single-post .container-single p,
.single-post #main ul.type-projet, .single-post #main ul,
.single-post #main .description-projet{
    display: block;  
  	max-width: 33em;
  	width: 33em;
    margin: auto;
}
.single-post #main .description-projet {
    margin: 8em auto 2em auto;
}
.post-template-single-simple #main .description-projet {
    margin: 10em auto 20em auto;
}
.single-post h2{
font-size: 2.4em;
}
.single-post #main ul.type-projet {
    margin: 1em auto 3em auto;
    font-weight: bold;  
}
.single-post ul {
    padding:0;
}
.single-post .type-projet li {
    font-weight: 400;
    display: inline-flex;
}
h2.background-h2-white, h2.background-h2-marine {
    display: block;
    text-align: center;
    color: #0a0032;
    padding-top: 155px;
}
h2.background-h2-marine {
    color: white;
    padding-top: 170px;
}
.background-h2-white, .background-h2-marine {
    display: block;
    background: url('../../../wp-content/uploads/2020/11/sprite-forme-titre-david-daumer-creation-de-site-internet-rennes.svg') no-repeat;
    background-size: 205%;
    background-position: -650px 2px;
    height: 350px;
    width: 600px;
    margin: 10% auto 0 auto;
    text-align: center;
    color: #0a0032;
}
.background-h2-marine {
    background: url('../../../wp-content/uploads/2020/11/sprite-forme-titre-david-daumer-creation-de-site-internet-rennes.svg') no-repeat;
    background-size: 200%;
    background-position: 5px 18px;
    color: white;
}

.single-post .container-logo {
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1em;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}
.single-post .logo-projet {
    width: 25em;
    margin: 5%;
}

.container-single{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.single-post #main .container-single h2{
   margin: 2em auto 1em auto;
}

.single-post #main .container-single .bloc-marine{
   margin: 8em auto;
}
.single-post #champs-perf{
   margin-bottom: 8em;
}
.container-single .bloc-marine, .container-single .bloc-white{
    display: flex;
    justify-content: center;
  	background-color: #0A0032;
  	padding:6em 0;
    width: 100%;
}
.container-single .bloc-white{
background-color:white;
}

.container-single .bloc-marine:nth-of-type(1), .container-single .bloc-marine:nth-of-type(3), .container-single .bloc-marine-wireframe{
  	padding-bottom: 0;
}


.navposts_single{
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items: center;
  position:relative;
  margin:10% auto 0% auto;
}

.navposts_single h2{
color:white;
margin-bottom: 0;
}

.navposts_single h3{
color:white;
font-size:1.5em;
margin: 0 auto;  
}

.navposts_single p{
color:white;
font-size:0.889em;
margin: .5em auto;
position:relative;   
}


.navposts_single::after{
    display: block;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzg1Ljk5OSIgaGVpZ2h0PSI2NjcuNDU3Ij48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTM4NS45OTkiIGhlaWdodD0iNjY3LjQ1NyIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48ZmVPZmZzZXQgZHg9IjEwIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMyIgcmVzdWx0PSJibHVyIi8+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iLjE2MSIvPjxmZUNvbXBvc2l0ZSBvcGVyYXRvcj0iaW4iIGluMj0iYmx1ciIvPjxmZUNvbXBvc2l0ZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmlsdGVyPjwvZGVmcz48ZyBmaWx0ZXI9InVybCgjYSkiPjxwYXRoIGRhdGEtbmFtZT0iVW5pb24gNiIgZD0iTTAgNjUyLjMyN3YtNjM3LjJzMTM4LjY4Ny0yNi4xMTQgMjg3Ljg4MiAyOS40NDcgMjMzLjgyNiA5My45MjkgNTI4Ljk0MyA2MC42MDVTMTM2NyAxNTEuOTY4IDEzNjcgMTUxLjk2OHYzNjMuNzM5aC0uNzExYy0xNC45NTYgNC41ODItMjYzLjM5MSA3OC44Ny01NDkuNDYzIDQ2LjU2Ny0yOTUuMTE4LTMzLjMyMy0zNzkuNzUxIDUuMDQ4LTUyOC45NDMgNjAuNjA1LTc2LjkxMSAyOC42NDEtMTUxLjAyIDM1LjU3OC0yMDQuNzg2IDM1LjU3Ny01MC41MzIgMC04My4wOTctNi4xMjktODMuMDk3LTYuMTI5eiIgZmlsbD0iIzBhMDAzMiIvPjwvZz48L3N2Zz4='); 
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
    -webkit-filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
    background-size: 105%; 
    height: 200%;
    width: 100%;
    left: 0;
    top: -50%;
    position: absolute;
    z-index: -2; 
}

.navposts_single a{
    display: inline-flex;
    align-items: center;
}

.navposts_single p{
    max-width: none;
    width: auto;
}

.nav-links{
display:flex;
align-items: center;
position:relative;
color:white;  
}

.post-template-single-simple .nav-links{
width: 100%;
justify-content: space-evenly;
}
.post-template-single-simple .post-navigation{
    width: 100%;
}

.post-template-single-simple .navposts_single{
    height: 20em;
}
.post-template-single-simple .navposts_single::after{
    height: 40em;
}


  .navposts_single .nav-next img, .navposts_single .nav-previous img{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  transition:all .25s;
  opacity:0;
}

.navposts_single .nav-previous img{
margin-left:2em;
}

.navposts_single .nav-next img{
margin-right:2em;
}

.navposts_single .nav-next{
text-align:right;
}

.single-post button {
    margin: 2em auto 6em auto;
}
#crea-perso{
    width: 80%;
    margin: 20% auto 10% auto;
    text-align: center;
}
.link-crea-perso{
    position: relative;
    margin: 4em;
}
.page-template-light-page img {
    border-radius: 5%;
}
.page-template-light-page .content-article p:nth-of-type(1) {
    margin-top: 4em;
}
.page-template-light-page .star p {
    margin-top: 1em;
}


.page-template-light-page #main {
    padding-bottom: 30%;
}
.page-template-light-page button a {
    color: #efdd30;
}
.page-id-34 {
    background-color: #fc835e;
}
.page-id-34 p, .page-id-34 h2 {
    color: white;
}
.page-id-34 .title-page, .page-template-dark-page h1, .page-id-275 .title-page {
    margin: 2em auto 1.5em auto;
}
.page-id-34 .background-chiffres {
    display: block;
    background: url('../../../wp-content/uploads/2020/11/sprite-mon-approche-forme-organique-marine-design-web-ethique.svg') no-repeat;
    background-size: 180%;
    background-position: 32px 0;
    height: 200px;
    width: 200px;
    margin: 15% auto 0 auto;
    font-size: 3em;
    font-family: 'philosopherregular', cursive;
    padding-top: 1.25em;
    text-align: center;
    color: white;
}
.page-id-34 .background-chiffres-white {
    background-position: -178px 0;
    height: 200px;
    width: 200px;
    margin: 15% auto 0 auto;
    font-size: 3em;
    padding-top: 1.25em;
    color: #0a0032;
}
.page-id-34 .link-projet {
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-id-34 .wp-image-126 {
    margin-top: 5em;
    display: flex;
    justify-content: center;
    box-shadow: 1.25em 1.1em 18px rgba(165, 42, 42, .15);
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
    -moz-filter: brightness(80%);
}
.page-id-34 a h3 {
    color: white;
    display: flex;
    justify-content: center;
    z-index: 1;
    font-size: 1.5em;
    top: -180px;
    position: relative;
}
.page-id-626 article{
    position: relative;
}
.page-id-626 .content-article img{
    display: block;
    margin: 16em auto;
    filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .25));
    -webkit-filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .25));
}
.page-id-626 .content-article img:first-child{
    display: block;
    margin: 8em auto;
}
.page-id-626 .content-article img:last-child{
    display: block;
    margin: 16em auto 0 auto;
}
.page-id-626 p:nth-of-type(1){
 margin-top: 1em;
}
.page-id-626 article::before, .page-id-626 article::after, .page-id-626 article .content-article::before{
    display: block;
    background-image: url('../../../wp-content/themes/daviddaumer/images/shape-organic-colors-david-daumer-web-design.svg');
    content: '';
    background-repeat: no-repeat;
    background-position: 20px 20px;
    filter: drop-shadow( 0 6px 6px rgba(0, 0, 0, .15));
    -webkit-filter: drop-shadow( 0 6px 6px rgba(0, 0, 0, .15));
    background-size: 2500px;
    height: 850px;
    width: 820px;
    right: 0;
    top: -70px;
    position: absolute;
    z-index: -1;
}
.page-id-626 article::after{
    top: 3650px;
    background-position: -805px 20px;
}
.page-id-626 article .content-article::before{
    left: 0;
    top: 1690px;
    background-position: -1690px 20px;
}
.shape-header-white {
    position: absolute;
    top: 50px;
    background: url('../../themes/daviddaumer/images/forme-header-desktop-white-dd.svg') no-repeat;
    background-size: 850px;
    background-position: center;
    width: 100%;
    height: 450px;
    left: 0;
    z-index: 0;
}
.page-template-dark-page, .page-template-dark-page-services {
    background-color: #0a0032;
    display: block;
}
.page-template-dark-page .logo img, .page-template-dark-page-services .logo img  {
    filter: invert(100%);
}

.page-template-dark-page p, .page-template-dark-page h2, .page-template-dark-page-services:nth-of-type(even) h2, .page-template-dark-page-services:nth-of-type(even) p {
    color: white;
}
.page-template-dark-page h1, .page-template-dark-page-services h1 {
    color: #0a0032;
    width: 600px;
    text-align: center;
}
.page-template-dark-page img {
    border-radius: 5%;
}
.page-template-dark-page .content-article p:nth-of-type(1), .page-template-dark-page-services .content-article p:nth-of-type(1) {
    margin-top: 4em;
}

.page-template-dark-page .star p{
margin-top:1em;
}

.page-template-dark-page #main, .page-template-dark-page-services #main {
    padding-bottom: 30%;
}
.page-template-dark-page main a, .page-template-dark-page ul, .page-template-dark-page-services #main a:nth-of-type(even), .page-template-dark-page-services #main ul:nth-of-type(even){
    color: white;
}

.page-template-dark-page ul, .page-template-dark-page-services ul{
    list-style-type: disc;
}

.page-template-dark-page button a, .page-template-dark-page-services button a:nth-of-type(even) {
    color: #0a0032;
}

.page-template-dark-page.page-id-32 #primary::before, .page-template-dark-page.page-id-32 #main::before, .page-template-dark-page.page-id-32 #main::after, .page-template-dark-page.page-id-32 h2:last-of-type::after, .page-template-dark-page.page-id-32 #primary::after {
    display: block;
    background-image: url('../../uploads/2020/11/feuilles-de-frene-uidesign-david-daumer.svg');
    content: ' ';
    background-repeat: no-repeat;
    background-position: 3% 70%;
    background-size: 340%;
    height: 80vh;
    width: 30vw;
    left: -1%;
    top: 7%;
    position: absolute;
}
.page-template-dark-page.page-id-32 #main::before {
    background-position: 44% -10%;
    background-size: 700%;
    height: 25vh;
    width: 15vw;
    left: 14vw;
    top: 26%;
}
.page-template-dark-page.page-id-32 #main::after {
    background-position: 57% 28%;
    background-size: 700%;
    height: 20vh;
    width: 12vw;
    left: 76vw;
    top: 38%;
}
.page-template-dark-page.page-id-32 h2:last-of-type::after {
    background-position: 47% 145%;
    background-size: 450%;
    height: 35vh;
    width: 20vw;
    left: 8vw;
    top: 50%;
}
.page-template-dark-page.page-id-32 #primary::after {
    background-position: 95% 50%;
    background-size: 265%;
    height: 60vh;
    width: 30vw;
    left: 70vw;
    top: 66%;
}

.page-template-dark-page-services main{
    width: 80%;
    margin: auto;
}
.page-template-dark-page-services .services{
    position: relative;
}

.page-template-dark-page-services #introduction{
    color: white;
    max-width: 33em;
    margin: 0 auto 30% auto;
}

.page-template-dark-page-services .services:nth-of-type(odd)::before {
    display: block;
    background-image: url('../../themes/daviddaumer/images/forme-blanche.svg'); 
    content: '';
    background-repeat: no-repeat;
    background-position: left;
    filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
    -webkit-filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, .35));
    background-size: 62em;
    height: 56em;
    width: 100%;
    left: -20%;
    top: -13em;
    position: absolute;
    z-index: -1;
}

.page-template-dark-page-services .services{
    margin: 25em 0;
}

.page-template-dark-page-services .services h2{
    width: 13em;
    text-align: left;
}

.page-template-dark-page-services .services:nth-of-type(even) h3{
    width: 31em;
}

.page-template-dark-page-services .services:nth-of-type(even) ul{
width: 36em;
margin-left: auto;
}

.page-template-dark-page-services .services p{
    width: 36em;
}

.page-template-dark-page-services .services:nth-of-type(even) h2, .page-template-dark-page-services .services:nth-of-type(even) p,  .page-template-dark-page-services .services:nth-of-type(even) h3, .page-template-dark-page-services .services:nth-of-type(even) ul li, .page-template-dark-page-services .services:nth-of-type(even) ul li a{
    text-align: left;
    color: white;
    margin-left: auto;
}

.page-id-270 .content, .page-id-275 .content {
    align-items: flex-start;
} 
.page-id-270 h2, .page-id-275 h2 {
    text-align: left;
}
.error404 h1, .error404 p{
    text-align: center;
    margin: 20vh auto;
}
.error404 p:nth-of-type(1){
    margin: 20vh 0 10vh 0;
}
.error404 .button-general-d{
    margin-bottom: 50vh;  
}
.error404 .logo {
    margin: -7em .5em 0 0;
}

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

	button:hover, .button-general-d:hover, .button-general-d-light:hover,
	html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,
	html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {
		will-change: border-radius, transform;
		animation: morph-button 2.25s linear infinite;
		z-index: 0;
		box-shadow: 10px 10px 10px 0 rgba(10, 0, 50, .2);
	}

 

    @keyframes morph-button {

        0%,
        100% {
            border-radius: 50% 32% 20% 70%/60% 40% 55% 40%;
        }

        25% {
            border-radius: 40% 57% 40% 81% / 84% 76% 45% 38%;
            transform: translate3d(0, 2px, 0);
        }

        50% {
            border-radius: 25% 68% 40% 46% / 59% 36% 45% 38%;
        }
        75% {
            border-radius: 40% 27% 26% 58%/70% 36% 64% 32%;
            transform: translate3d(0, -1px, 0);
        }
    }

    .container-card .card-project:hover img, .page-id-34 .link-projet img:hover,
  .navposts_single .nav-next:hover img, .navposts_single .nav-previous:hover img{
        will-change: border-radius, transform;
        animation: morph-img 3.5s linear infinite;
    }
  .navposts_single .nav-next:hover img, .navposts_single .nav-previous:hover img{
  opacity:1;
  transition: opacity .25s;
  }
  

    @keyframes morph-img {

        0%,
        100% {
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
            transform: translate3d(0, 0, 0);
        }
        34% {
            border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
            transform: translate3d(0, 3px, 0);
        }
        50% {
            transform: translate3d(0, 0, 0);
        }
        67% {
            border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
            transform: translate3d(0, -3px, 0);
        }
    }

    .bloc-presta-1:hover, .bloc-presta-2:hover, .bloc-presta-3:hover {
        background-color: white;
        background: radial-gradient(ellipse at center, #0A0032 45%, transparent 40%) no-repeat center;
        animation: gradient-presta 1.25s linear;
        animation-fill-mode: forwards;
    }
    .bloc-presta-1:hover p, .bloc-presta-2:hover p, .bloc-presta-1:hover h3, .bloc-presta-2:hover h3,
    .bloc-presta-3:hover p, .bloc-presta-3:hover h3 {
        color: white;
    }

   footer .img-logo-dd a:hover, .rs a:hover {
        opacity: 0.65;
        transition: all .5s;
    }

    @keyframes gradient-presta {
        0% {
            background-size: 0% 0%;
        }
        100% {
            background-size: 1000% 1000%;
        }
    }

    @supports (-webkit-hyphens:none) {

        .bloc-presta-1:hover, .bloc-presta-2:hover {
            background-color: white;
            background: white;
            animation: none;
        }
        .bloc-presta-1:hover p, .bloc-presta-2:hover p, .bloc-presta-1:hover h3, .bloc-presta-2:hover h3 {
            color: #0A0032;
        }
      
    }

 @supports (-moz-hyphens:none) {
	
		#menu{
		animation:none;
	  	border-radius: 132% 0 0 100% / 115% 0 0 115%;
		}
        .bloc-presta-1:hover, .bloc-presta-2:hover {
            background-color: white;
            background: white;
            animation: none;
        }
        .bloc-presta-1:hover p, .bloc-presta-2:hover p, .bloc-presta-1:hover h3, .bloc-presta-2:hover h3 {
            color: #0A0032;
        }
	#projet img:hover, .post img:hover, .page-id-34 .link-projet img:hover{
		animation:none;
	  	box-shadow:1.25em 1.1em 18px rgba(165,42,42,.15); 
	}
    .links-single:hover .links-single-img {
        opacity: 1;
    }
    .navposts_single h3:hover {
        opacity: 1;
    }
}


.bloc-foo-contact a:hover::before, .bloc-foo-infos-legales a:hover::before, #projet .content p a:hover::before, .link-crea-perso:hover::before, .page-template-dark-page-services main ul li a:hover::before, .navposts_single .links-single h3 a:hover::before, .blog main a:hover::before,  
  .single .description-projet a:hover::before, .single p a:hover::before, .page-template-dark-page .content p a:hover::before, .page-template-dark-page-services .content p a:hover::before,
  .navposts_single .nav-next:hover p::before, .navposts_single .nav-previous:hover p::before,  #container-archives ul li a:hover::before{
    transform: scale3d(1,3,1);
    bottom: 5px;
    opacity: 1;
    z-index: -1;
    transition: all .25s cubic-bezier(.6,0,.4,1);  
}
  
  .navposts_single .nav-next:hover p::before {
    bottom: 7px;
}

.navposts_single .nav-previous:hover p::before{
    bottom: 7px;
}


 #projet .content p a:hover, .navposts_single .links-single h3 a:hover{
    color: white;
}

.bloc-foo-contact a:hover, .bloc-foo-infos-legales a:hover, .page-template-dark-page .content p a:hover, .page-template-dark-page-services .content p a:hover,.page-template-dark-page-services .services:nth-of-type(even) ul li a:hover,
  .navposts_single .nav-previous:hover p, .navposts_single .nav-next:hover p{
    color: #0a0032;
    z-index: 2;
}

  
.bloc-foo-infos-legales a:hover::before, .navposts_single .links-single h3 a:hover::before{
    bottom: 10px;
}

#projet .content p a:hover{
    color: #0a0032;
}


.navposts_single{
    min-height: 30em;
  }

}

@media screen and (max-width:1150px) {
    .container-nav::before {
        background-position: 64% 35.75%;
  	  	background-size: 650%;
        height: 30vh;
        width: 40vw;
    }

    .container-nav::after {
      	background-position: 73.5% 40%;
    	background-size: 1200%;
    	height: 44vh;
    	width: 20vw;
    	left: 80%;
    	top: 23vh;
    }
    .home #main::before {
        background-position: 88.6% -670px;
    	background-size: 1100%;
    	height: 125vh;
    	width: 300px;
    }
    .home #main::after {
    	background-position: 97% -1070px;
    	height: 75vh;
    	width: 250px;
    	background-size: 3250px;
    	top: 55vh;
  }
    #presentation::after, #projet::after, #avis::after, #services::after, #demarche-eco::after {
        height: 25vh;
    }
    #projet .content, #services .content {
        max-width: 50em;
        width: 50em;
    }
    #presentation {
        padding: 30% 0 40% 0;
    }
    #projet ul {
        width: 50em;
        padding-left: 0;
    }
    #projet {
        padding: 10% 0 40% 0;
    }
    #projet::after {
        height: 28vh;
        background-position: 1.5% -5%; 
    }
    #services {
        padding: 10% 0 50% 0;
    }
    #services .bloc-presta-1:nth-of-type(1) {
        margin: 5em auto 2.5em auto;
    }
    #services .bloc-presta-1,
    #services .bloc-presta-2,
    #services .bloc-presta-3  {
        max-width: 32em;
        width: 32em;
        margin: 2.5em auto 2.5em auto;
    }
    #demarche-eco::after {
        height: 23vh;
    }
  	  #demarche-eco::after {
        filter: drop-shadow( 0 -11px 6px rgba(0,0,0,.3));
		-webkit-filter: drop-shadow( 0 -11px 6px rgba(0,0,0,.3));
    }
    #contact {
        padding: 10% 0 35% 0;
    }
    #shape-footer {
        top: -24vh;
        height: 25vh;
    }
    .page-template-dark-page #main, .page-template-dark-page-services #main {
        padding-bottom: 40%;
    }
    .page-template-dark-page #primary::before, .page-template-dark-page #main::before, .page-template-dark-page #primary::after {
        height: 35vh;
    }
    .page-template-dark-page #main::before {
        background-position: 44% -10%;
        background-size: 700%;
        height: 11vh;
        width: 15vw;
        left: 8vw;
        top: 26%;
    }
    .page-template-dark-page #main::before {
        background-position: 44% -20%;
        height: 11vh;
        left: 8vw;
    }
    .page-template-dark-page #main::after {
        height: 8vh;
    }
    .page-template-dark-page h2:last-of-type::after {
        height: 15vh;
        left: 2vw;
    }
    .page-template-dark-page #primary::after {
        top: 72%;
    }

    .page-template-dark-page-services .services:nth-of-type(odd)::before {
        background-size: 51em;
        height: 56em;
        width: 110%;
        left: -15%;
        top: -13em;
    }

  .navposts_single .nav-next img, .navposts_single .nav-previous img{
  display:none;
  }
  
  .navposts_single .post-navigation{
  width:100%;
  margin-top: 3em;
  }
  
  .nav-links {
    justify-content: space-evenly;
  }
  .navposts_single::after{
  height:250%;
  top:-65%;	
  }
  
  #crea-perso {
    margin: 30% auto 15% auto;
  }
  
  
}

@media screen and (max-width:1023px) {
    h1 {
        font-size: 3.5em;
    }
    #header-home h2 {
        font-size: 3em;
    }
    #header-home h1 {
        width: 18em;
    }
    .home #main::before {
        background-position: 88.15% -500px;
    	background-size: 1150%;
    	height: 130vh;
    	width: 215px;
    }
    .home #main::after {
        background-position: 97% -1000px;
    	height: 90vh;
    	width: 250px;
    	background-size: 3000px;
    	top: 50vh;
    }
    #projet .content, #services .content {
        max-width: 30em;
        width: 30em;
    }
    #projet ul {
        width: 40em;
	    flex-flow: row wrap;
    	justify-content: center;
    }
    	#projet .container-card{
  	margin-bottom:2em;
  	}
  #projet li:nth-of-type(1) a h3 {
    top: 215px;
    color: #fff;
    width: 200px;
  }
  #projet li:nth-of-type(2) a h3 {
    top: 150px;
    color: #fff;
	}
    .wpcf7-form {
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    .wpcf7, .wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required, .wpcf7 p {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    p.news-recaptcha{
    margin-top: 0;
	}
    #shape-footer {
        top: -21vh;
    }
    #infos-footer {
        flex-direction: column;
        align-items: center;
    }
    .bloc-foo-contact, footer h3{
        text-align: center;
    }
    .bloc-rs, .bloc-foo-contact{
        align-items: center;
        margin: 0 0 3em;
    }
    .bloc-foo-infos-legales {
        align-items: center;
    }
  
    .infos-footer-supp{
  	flex-direction:column;
	align-items: center;
  }
  
  .infos-footer-eco-col1, .infos-footer-eco-col2{
  width:70%;
	text-align:center;
  }
  .infos-footer-eco-col2{
  margin:3em auto;
  }
  footer a{
  margin:.5em auto;
  }
    .rs {
        left: 1em;
        position: relative;
    }
    .shape-header-marine, .shape-header-white {
        background-size: 700px;
    }
    .title-page {
        margin: 3.25em auto 3em auto;
    }
    .page-id-34 .title-page, .page-template-dark-page h1, .page-id-275 .title-page {
        margin: 2.5em auto 1.5em auto;
    }
    .page-template-dark-page #main::before, .page-template-dark-page #main::after, .page-template-dark-page h2:last-of-type::after {
        display: none;
    }
    .page-template-dark-page #primary::after {
        top: 72.5%;
    }

    .page-template-dark-page-services .services:nth-of-type(odd)::before{
        display: none;
    }
    .page-template-dark-page-services .services{
        color: white;
        margin: 10em 0;
    }
    #container-archives {
        width: 30em;
        max-width: 30em;
    }
    .blog .description-page {
        margin-bottom: 20%;
    }
    .header-single {
        width: 90%;
    }
    .single-post h1 {
        margin-top: 3.35em;
    font-size: 3em;
    }
    .single-post button {
        margin: 12% auto 5% auto;
    }
    .postid-320.single-post h1 {
        margin-top: 3.5em;
        font-size: 2.9em;
    }
    .page-id-626 article img{
        width: 90%;
        margin: 0 auto;
    }
    .page-id-626 article::before, .page-id-626 article::after, .page-id-626 article .content-article::before {
        background-position: -18px 0px;
    	background-size: 2100px;
    	height: 750px;
    	width: 650px;
    	top: -45px;
    }
    .page-id-626 article::after{
        top: 3045px;
    	background-position: -695px 20px;
    	width: 650px;
    	background-size: 2100px;
    } 
    .page-id-626 article .content-article::before{
        top: 1411px;
    	background-position: -1550px 20px;
    }

	.navposts_single {
    margin: 30% auto 0% auto;
}
.navposts_single::after {
	background-size: 150%;
  }
#crea-perso {
    margin: 40% auto 20% auto;
}
  
}

@media screen and (max-width:767px) {
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.75em;
    }
    h3 {
        font-size: 1.25em;
    }
    .content {
        max-width: 17em;
    }
    .logo {
        flex: 0 0 4em;
    }
   #site-navigation::before {
        display: none;
    }
    .container-nav #content{
  	position:relative;
	top: -6vh;
  }
    .container-nav::before {
        background-position: 64% 35.75%;
    	height: 24vh;
    	width: 45vw;
    }
    .container-nav::after {
        height: 290px;
        top: 45vh;
    }
    a#susty-back-link {
        height: 1.1em;
    }
    #header-home h2 {
        font-size: 1.75em;
    }
    #header-home h1 {
        font-size: 1em;
    }
    .logo-header-home {
        height: 35vh;
        width: 230px;
		background-position: -2720px -35px;
    	background-size: 3000px;
    }
    .home #main::before {
        background-position: 87.75% -320px;
    	background-size: 1200%;
    	height: 135vh;
    	width: 136px;
    }
    .home #main::after {
        background-position: 97% -440px;
    	height: 75vh;
    	width: 120px;
    	top: 55vh;
    	background-size: 1400px;
    }
    .wp-image-174 {
        max-width: 150px;
    }
    #presentation .content {
        padding-left: .5em
    }
    #presentation::before {
        height: 3em;
        top: -375px;
        width: .2em;
        left: 49%;
        transform: translate(-49%, 0);
    }
    #presentation h2 {
        font-size: 1.1em;
    }
    #presentation::after, #presentation::after, #projet::after, #services::after, #demarche-eco::after, #avis::after {
        height: 18vh;
    }
    #projet .content, #services .content {
        width: 17em;
        max-width: 17em;
    }
    #projet ul {
        width: 17em;
    }
    #projet h3 {
        font-size: 1.25em;
    }
    #projet li {
        width: 100%;
    }
    #projet li:nth-of-type(1) a h3 {
        top: 195px;
    }
    #projet li:nth-of-type(2) a h3 { 
        top: 105px;
    }
    #projet::after {
        height: 20vh;
        background-position: 1.5% -8%;
    }
    #services p {
        max-width: 16em;
    }

    #services .bloc-presta-1, #services .bloc-presta-2,  #services .bloc-presta-3 {
        max-width: 16em;
        width: 16em;
        margin: 1em auto 1em auto;
        padding: 1.25em 1.25em 2.5em 1.25em;
    }
    #services .bloc-presta-3{
        margin: 2.5em auto 4em auto;
    }
    #services::after {
        height: 16vh;
    }
  .img-presta {
    background-size: 900%;
	background-position: -1195px -810px;
  }
  .img-gestion {
	background-position:  -1178px -1080px;
  }
  .img-audit{
	background-position:  -1178px -1382px;
  }
  .img-dev {
    background-size: 1075%;
    background-position: -2134px -112px;
	width: 245px;
  }
  .img-audit{
  background-position: -1436px -1375px; 
}
  .img-optimisation{
  background-position: -1458px -1102px;
  }
  .img-formation{
  background-position: -1170px -1380px;
  }
    #demarche-eco .img-eco {
        width: 300px;
    	height: 180px;
    	background-size: 1100px;
    	background-position: -565px 0px;
    }
    .wpcf7, .wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required, .wpcf7 p {
        width: 95%;
    }
    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
        width: 100%;
        margin-top: 10px;
    }
    .shape-header-marine, .shape-header-white {
        background-size: 380px;
        top: -20px;
        transform: matrix(.95, 0.00, 0.00, 1.15, 0, 0);
        -ms-transform: matrix(.95, 0.00, 0.00, 1.15, 0, 0);
        -webkit-transform: matrix(.95, 0.00, 0.00, 1.15, 0, 0);
    }
    .page-id-34 .title-page,
    .page-template-dark-page h1,
    .page-id-275 .title-page {
        margin: 3.9em auto 1.5em auto;
        width: 271px;
    }
    .title-page {
        margin: 4.65em auto 3em auto;
    }
    .wp-image-254 {
        width: 80%;
        margin-top: 10%;
    }
    #shape-footer {
        top: -14vh;
        height: 19vh;
    }
    #copyright{
        margin-top: 1em;
        line-height: 1.2em;
    }
  .img-logo-dd {
    background-size: 2500px;
    background-position: -2260px -60px;
    }
    .rs {
        left: 1em;
        position: relative;
    }
  .infos-footer-eco-col1, .infos-footer-eco-col2{
  width:100%;
  }
  .postid-504 h2 {
    font-size: 1.4em;
}

    .page-id-34 .background-chiffres {
        background-size: 150%;
        background-position: 38px 30px;
        width: 180px;
    }
    .page-id-34 .background-chiffres-white {
        background-position: -115px 35px;
        width: 180px;
    }
    .page-id-34 a h3 {
        font-size: 1.25em;
        top: -115px;
    }
    .page-template-dark-page p:nth-of-type(1), .page-template-dark-page-services p:nth-of-type(1) {
        margin-top: 0;
    }
    .page-template-dark-page #primary::before, .page-template-dark-page #main::before, .page-template-dark-page #primary::after {
        display: none;
    }
    #container-archives {
        width: 17em;
    }
    .header-single {
        display: none;
    }
    .image_header_mobile {
        display: flex;
        position: relative;
        top: 85px;
        width: 47em;
        margin: 0 auto;
    }
    img.header-single {
        top: 100px;
        transform: matrix(.95, 0.00, 0.00, 1.10, 0, .1);
        -ms-transform: matrix(.95, 0.00, 0.00, 1.10, 0, .1);
        -webkit-transform: matrix(.95, 0.00, 0.00, 1.10, 0, .1);
    }
    .single-post h1 {
        margin-top: 3.8em;
        text-align: center;
        line-height: 1.1em;
        font-size: 2em;
    }
    .postid-320.single-post h1 {
        font-size: 2em;
        margin-top: 3.75em;
    }
  .single-post .container-single p, .single-post #main ul.type-projet, .single-post #main ul, .single-post #main .description-projet{
	max-width:none;
	width:auto;	
  }
  .nav-links{
  flex-direction:column;
  }
    .single-post h2 {
        font-size: 1.4em;
    }
    .single-post p {
        width: 17em;
        margin: 0 auto 2em auto;
    }
    .single-post #list-type-projets {
        width: 18em;
    }
    .single-post .star p{
        width: auto;
    }
  .navposts_single::after {
    background-size: 300%;
    background-position: 0 center;
  }
    #crea-perso{
        margin: 75% auto 30% auto;
    }
    .link-crea-perso {
        margin: 0;
    }
    .background-h2-white, .background-h2-marine {
        background-size: 210%;
        background-position: -360px 70px;
        height: 260px;
        width: 320px;
    }
    .background-h2-marine {
        background-position: 0 80px;
    }
    .navposts_single .links-single {
        margin-left: 1em;
    }
 .navposts_single {
    margin: 55% auto 0% auto;
    }
  .navposts_single::after {
    top: -70%;
}
   .navposts_single .nav-previous {
    margin-bottom:2em;
    }
    .navposts_single #container-links-single {
        padding-bottom: 25%;
    }
    .navposts_single h2 {
        margin: 0 auto 1em auto;
    }
    .navposts_single h3 {
        font-size: 1em;
        margin: .5em 0!important;
        color: white;
    }
    .single-post .row-bg-saumon {
        display: block;
        justify-content: center;
        height: auto;
    }
    .single-post #main p, .single-post #main ul.type-projet, .single-post #main ul {
		display: block;
    	max-width: 16em;
    	width: 16em;
        margin: 0 auto;
    }
    .single-post p.meta-nav{
        color: white;
    }
  	.single-post #main .container-single .bloc-marine {
	margin: 5em auto;
  	}
	.post h3{
  text-align:center;
  }
  .page-id-626 article::before, .page-id-626 article::after, .page-id-626 article .content-article::before {
    background-position: -5px 50px;
    background-size: 950px;
    height: 400px;
    width: 300px;
    top: -74px;
}
.page-id-626 article .content-article::before {
    top: 835px;
    background-position: -645px 30px;
}
.page-id-626 article::after {
    top: 1755px;
    background-position: -316px 50px;
}
  
  .page-id-626 .content-article img{
  margin:12em auto;
  }
  
  .page-id-626 .content-article img:last-child{
  margin:12em auto 8em auto;
  }

  .page-template-dark-page h1, .page-template-dark-page-services h1{
    width: auto;
  }

  .page-template-dark-page-services .services h2, .page-template-dark-page-services .services p, 
  .page-template-dark-page-services .services ul, .page-template-dark-page-services .services:nth-of-type(even) h3, .page-template-dark-page-services .services:nth-of-type(even) ul{
    width: auto;
  }

  .page-template-dark-page-services .services{
    margin: 6em auto;
  }

}

@media screen and (max-width:345px) {
    h1 {
        font-size: 1.85em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.15em;
    }
    .home #main::before {
        width: 115px;
    }
    .home #main::after {
    width: 105px;
	background-position: 97% -375px;
    background-size: 1200px;
    }
    #header-home h2 {
        font-size: 1.5em;
    }
    #header-home h1 {
        font-size: .85em;
    }
    .logo-header-home {
        width: 180px;
    }
    .container-nav::before,
    .container-nav::after {
        display: none;
    }
    #site-navigation::before {
        display: none;
    }
    .shape-header-marine, .shape-header-white {
        background-size: 320px;
        top: -35px;
    }
    .background-h2-white, .background-h2-marine {
        width: 300px;
        background-position: -330px 75px;
    }
    .background-h2-marine {
        background-position: 0 85px;
    }
    .single-post .type-projet li {
        padding: 0 0 0 25px;
    }
}