@font-face {
    font-family: 'bluu';
    src: url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff2') format('woff2'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff') format('woff'),
         url('cyberwitches-manifesto/bluunext-bolditalic.ttf') format('truetype'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.svg#bluu_nextbold_italic') format('svg');
    font-weight: normal;
    font-style: normal ;

}
@font-face {
    font-family: 'bluu';
    src: url('cyberwitches-manifesto/bluunext-bold-webfont.woff2') format('woff2'),
         url('cyberwitches-manifesto/bluunext-bold-webfont.woff') format('woff'),
         url('cyberwitches-manifesto/bluunext-bold.ttf') format('truetype'),
         url('cyberwitches-manifesto/bluunext-bold-webfont.svg#bluu_nextbold') format('svg');
    font-weight: normal;
    font-style: italic;
}

.style1 {font-family: 'Baskervville', cursive; color:#FFF ; font-size:30px }
.style2 {font-family: 'Baskervville', cursive; color:#FFF ; font-size:16px} 
.style3 {font-family: 'Baskervville', cursive; color:#CCC }
.style4 {font-family: 'Baskervville', cursive; font-size:12px; color:black }
.style5 {font-family: 'Baskervville', cursive; font-size:12px; color:#FFF }
.style6 {font-family: 'bluu', cursive; color: black ; font-size:60px }
body {
  background: linear-gradient(to top, #ff2668, #600, #000, #003, #030, white), url();
  background-repeat: repeat;
  background-position: bottom;
  background-position: right;
  background-attachment: bottom;
  background-attachment: right;
  background-color: white;
}
a:link {
  color: #999 ;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
  color: #ff2668;
}
a:active {
  text-decoration: none;
  color: #FF8FB6;
}


.d1{
    width: 100%;
    vertical-align: middle;
    align: center;
    background-color: ;
    background-size: contain;
    /* animation: fondu 20s ease-in-out infinite both; */
}
.conteneur{
    max-width: 576px;
    margin: 50px auto;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 5px;
}
.d2{
    width: 100%;
    height: 0px;
    padding-top: 75%;
    background-color: ;
    background-size: contain;
    /*animation: fondu 10s ease-in-out infinite both;*/
}
.img1{
  width:95%;
  max-width: 600px;
}

/*
.d1:hover, .d2:hover{
    animation-play-state: paused; cursor: wait;
}

@keyframes fondu{
    0%{background-image: url("img/pdt/eau.jpg"); background-repeat: no-repeat;}
    33%{background-image: url("img/pdt/terre.jpg"); background-repeat: no-repeat;}
    66%{background-image: url("img/pdt/sachets.jpg"); background-repeat: no-repeat;}
    100%{background-image: url("img/pdt/installation.jpg"); background-repeat: no-repeat;}
}
*/

@media screen and (min-width: 100px) and (max-width: 500px) and (orientation: portrait) {
  .d1{
    width: 100%;
    vertical-align: middle;
    align: center;
    background-color: ;
    background-size: contain;
    /*animation: fondu 20s ease-in-out infinite both;*/
    }
  .conteneur{
    max-width: 400px;
    margin: 50px auto;
    }
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    }
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    }
  .d1 {
    grid-column: 1;
    grid-row: 1;
    }
  .credits {
    grid-column: 1;
    grid-row: 2;
    }
  .infos {
    grid-column: 1;
    grid-row: 3;
    margin-right: 3em;
    }
  .les3imgpreums {height: 100px; margin-top: 7px;}
  .imgpreums {
    grid-column: 1;
    grid-row: 4;
    width: 95%;
    margin-right: 20px;
    background-color: #FFF;
  }
  .gif {
    width: 100%;
  }
  .tof {
    width: 100%;
    margin-top: 10px;
  }
  .infos2 {
    grid-column: 1;
    grid-row: 5;
  }
  .image{
    grid-column: 1;
    grid-row: 6;
  }
  .infos3{
    grid-column: 1;
    grid-row: 7;
  }
  .infos4{
    grid-column: 1;
    grid-row: 8;
  }
  .retour {
    grid-column: 1;
    grid-row: 10;
  } 
}  
@media screen and (min-width: 500px) and (max-width: 800px) {
  .conteneur{
    max-width: 576px;
    margin: 50px auto;
  }
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    }
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 50% 50%;
    }
  .d1 {
    grid-column: 1 / span 2;
    grid-row: 1;
    width: 100%;
    height: 600px;
    vertical-align: middle;
    align: center;
    background-color: ;
    background-size: contain;
    /*animation: fondu 20s ease-in-out infinite both;*/
    margin-top: 1em;
    }
  .credits {
    grid-column: 2;
    grid-row: 2;
    margin-left: 50px;
    }
  .infos {
    grid-column: 1 / span 2;
    grid-row: 3;
    margin-right: ;
    margin-left: 5em;
    margin-right: 2em;
    }
  .les3imgpreums {height: 150px; margin-top: 7px;}
  .imgpreums {
    grid-column: 1 / span 2;
    grid-row: 4;
    width: 95%;
    margin-right: 20px;
    background-color: #FFF;
  }
  .gif {
    width: 100%;
  }
  .tof {
    width: 100%;
    margin-top: 10px;
  }
  .infos2 {
    grid-column: 1;
    grid-row: 5 / span 3;
  }
  .image{
    grid-column: 2;
    grid-row: 7;
    width: 95%;
  }
  .infos3{
    grid-column: 2;
    grid-row: 8;
    margin-right: 1em;
  }
  .infos4{
    grid-column: 1 / span 2;
    grid-row: 9;
    margin-left: 1em;
    margin-right: 2em;
  }
  .retour {
    grid-column: 1;
    grid-row: 10;
    margin-left: 0.5em;
  } 
}
@media screen and (min-width: 800px) {
  .conteneur{
    max-width: 576px;
    margin: 50px auto;
    align-content: start;
    align-items: start;
  }
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    align-content: start;
    align-items: start;    
    }

  .d1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    width: 100%;
    max-width: 600px;
    vertical-align: middle;
    align: center;
    background-color: ;
    background-size: contain;
    /*animation: fondu 20s ease-in-out infinite both;*/
    margin-top: 1em;
    }
  .wrapper {
    width: 100%;
    display: grid;
    align-content: start;
    align-items: start;
    grid-gap: 10px;
    grid-template-columns: 33% 33% 33%;
    }
  .credits {
    grid-column: 3;
    grid-row: 1;
    margin-top: 2em;
    }

  .infos {
    grid-column: 1 / span 2;
    grid-row: 5;
    margin-right: ;
    margin-left: 5em;
    margin-right: 2em;
    }

  .les3imgpreums {
    width: 93%; 
    margin-top: 7px; 
    text-align: center;
  }
  .imgpreums {
    grid-column: 3;
    grid-row: 2 / span 4;
    width: 95%;
    margin-right: 10px;
    background-color: #FFF;
  }
  .gif {
    width: 100%;
  }
  .tof {
    width: 100%;
    margin-top: 10px;
  }
  .infos2 {
    grid-column: 1;
    grid-row: 6 / span 4;
    margin-left: 1em;
    margin-right: 2em;
    /*border: solid;*/
  }
  .image{
    grid-column: 1;
    grid-row: 10;
    width: 95%;
  }
  .infos3{
    grid-column: 2;
    grid-row: 7;
    margin-left: 1em;
    margin-right: 2em;
    /*border: solid;*/
  }
  .infos4{
    grid-column: 2 / span 2;
    grid-row: 10;
    margin-left: 1em;
    margin-right: 2em;
  }
  .retour {
    grid-column: 1;
    grid-row: 11;
    margin-left: 0.5em;
  } 
}