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

@media screen and (min-width: 100px) and (max-width: 580px) and (orientation: portrait) {
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    }
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    }
  .image {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    }
  .img {
    width: 100%;
    }
  .credits {
    grid-column: 1;
    grid-row: 2;
    margin-right: 2em;
    margin-left: 1em;
    }
  .titre1 {
    grid-column: 1;
    grid-row: 3;
  }
  .texte1 {
    grid-column: 1;
    grid-row: 4;
    margin-right: 2em;
    margin-left: 1em;
    }
  .image2 {
    width: 100%;
    grid-column: 1;
    grid-row: 5;
    }
  .titre2 {
    grid-column: 1;
    grid-row: 6;
    margin-top: 1em;
    text-align: center;
  }
  .titre3 {
    grid-column: 1;
    grid-row: 7;
  }
  .texte2 {
    grid-column: 1;
    grid-row: 8;
    margin-right: 2em;
    margin-left: 1em;
    }  
  .titre4 {
    grid-column: 1;
    grid-row: 9;
    }    
  .texte3 {
    grid-column: 1;
    grid-row: 10;
    margin-right: 2em;
    margin-left: 1em;
  }
  .video1 {
    grid-column: 1;
    grid-row: 11;
    margin-right: 2em;
    margin-left: 1em;
  }
  .titre5 {
    grid-column: 1;
    grid-row: 12;
  } 
  .video2 {
    grid-column: 1;
    grid-row: 14;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .texte4 {
    grid-column: 1;
    grid-row: 13;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre6 {
    grid-column: 1;
    grid-row: 15;
  } 
  .texte5 {
    grid-column: 1;
    grid-row: 16;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre7 {
    grid-column: 1;
    grid-row: 17;
  } 
  .texte6 {
    grid-column: 1;
    grid-row: 18;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre8 {
    grid-column: 1;
    grid-row: 19;
  } 
  .texte7 {
    grid-column: 1;
    grid-row: 20;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre9 {
    grid-column: 1;
    grid-row: 21;
  } 
  .texte8 {
    grid-column: 1;
    grid-row: 22;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre10 {
    grid-column: 1;
    grid-row: 23;
  } 
  .texte9 {
    grid-column: 1;
    grid-row: 24;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre11 {
    grid-column: 1;
    grid-row: 25;
  } 
  .texte10 {
    grid-column: 1;
    grid-row: 26;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre12 {
    grid-column: 1;
    grid-row: 27;
  } 
  .texte11 {
    grid-column: 1;
    grid-row: 28;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre13 {
    grid-column: 1;
    grid-row: 29;
  } 
  .texte12 {
    grid-column: 1;
    grid-row: 30;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .youtube {
    width: 100%;
    height: auto;
  }
  .mix {
    grid-column: 1;
    grid-row: 31;
    margin-right: 2em;
    margin-left: 1em;
  }
  .mixcloud{
    width: 100%;
  }
  .photos {
    grid-column: 1;
    grid-row: 32;
    width: 100%;
  }
  .photo {
    width: 100%;
    margin-top: 10px;
  }
  .titre14 {
    grid-column: 1;
    grid-row: 33;
    margin-top: 1em;
    text-align: center;
  } 
  .photos2 {
    grid-column: 1;
    grid-row: 34;
  } 
  .texte13 {
    grid-column: 1;
    grid-row: 35;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .photos3 {
    grid-column: 1;
    grid-row: 36;
  } 
  .texte14 {
    grid-column: 1;
    grid-row: 37;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .photo4 {
    grid-column: 1;
    grid-row: 38;
  } 
  .retour {
    grid-column: 1;
    grid-row: 39;
  } 
}
@media screen and (min-width: 580px) and (max-width: 800px) {
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    }
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    }
  .image {
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 1;
    }
  .img {
    width: 100%;
    }
  .credits {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin-right: 2em;
    margin-left: 1em;
    }
  .titre1 {
    grid-column: 1 / span 2;
    grid-row: 3;
  }
  .texte1 {
    grid-column: 1;
    grid-row: 4;
    margin-right: 2em;
    margin-left: 1em;
    }
  .image2 {
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 5;
    }
  .titre2 {
    grid-column: 1 / span 2;
    grid-row: 6;
    margin-top: 1em;
    text-align: center;
  }
  .titre3 {
    grid-column: 1 / span 2;
    grid-row: 7;
  }
  .texte2 {
    grid-column: 1;
    grid-row: 8;
    margin-right: 2em;
    margin-left: 1em;
    }  
  .titre4 {
    grid-column: 1 / span 2;
    grid-row: 9;
    }    
  .texte3 {
    grid-column: 1;
    grid-row: 10;
    margin-right: 2em;
    margin-left: 1em;
  }
  .video1 {
    grid-column: 1 / span 2;
    grid-row: 11;
    margin-right: 2em;
    margin-left: 1em;
  }
  .titre5 {
    grid-column: 1 / span 2;
    grid-row: 12;
  } 
  .video2 {
    grid-column: 1 / span 2;
    grid-row: 14;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .texte4 {
    grid-column: 1;
    grid-row: 13;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre6 {
    grid-column: 1 / span 2;
    grid-row: 15;
  } 
  .texte5 {
    grid-column: 1;
    grid-row: 16;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre7 {
    grid-column: 1 / span 2;
    grid-row: 17;
  } 
  .texte6 {
    grid-column: 1;
    grid-row: 18;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre8 {
    grid-column: 1 / span 2;
    grid-row: 19;
  } 
  .texte7 {
    grid-column: 1;
    grid-row: 20;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre9 {
    grid-column: 1 / span 2;
    grid-row: 21;
  } 
  .texte8 {
    grid-column: 1;
    grid-row: 22;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre10 {
    grid-column: 1 / span 2;
    grid-row: 23;
  } 
  .texte9 {
    grid-column: 1;
    grid-row: 24;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre11 {
    grid-column: 1 / span 2;
    grid-row: 25;
  } 
  .texte10 {
    grid-column: 1;
    grid-row: 26;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre12 {
    grid-column: 1 / span 2;
    grid-row: 27;
  } 
  .texte11 {
    grid-column: 1;
    grid-row: 28;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre13 {
    grid-column: 1 / span 2;
    grid-row: 29;
  } 
  .texte12 {
    grid-column: 1;
    grid-row: 30;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .youtube {
    width: 560; height: 315;
    }
  .mix {
    grid-column: 1 / span 2;
    grid-row: 31;
    margin-right: 2em;
    margin-left: 1em;
  }
  .mixcloud{
    width: 560; height: 60;
    }
  .photos {
    grid-column: 1 / span 2;
    grid-row: 32;
    width: 100%;
  }
  .photo {
    width: 100%;
    margin-top: 10px;
  }
  .titre14 {
    grid-column: 1 / span 2;
    grid-row: 33;
    margin-top: 1em;
    text-align: center;
  } 
  .photos2 {
    grid-column: 1 / span 2;
    grid-row: 34;
  } 
  .texte13 {
    grid-column: 1;
    grid-row: 35;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .photos3 {
    grid-column: 1 / span 2;
    grid-row: 36;
  } 
  .texte14 {
    grid-column: 1;
    grid-row: 37;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .photos4 {
    grid-column: 1 / span 2;
    grid-row: 38;
  } 
  .retour {
    grid-column: 1;
    grid-row: 39;
  }   
}
@media screen and (min-width: 800px) {
  .contenant {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    }
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 33% 33% 33%;
    }
  .image {
    width: 100%;
    grid-column: 1 / span 3;
    grid-row: 1;
    }
  .img {
    width: 100%;
    }
  .photos {
    grid-column: 1;
    grid-row: 2 / span 4;
    width: 100%;
  }
  .credits {
    grid-column: 2;
    grid-row: 5;
    margin-right: 2em;
    margin-left: 1em;
    }
  .titre1 {
    grid-column: 2 / span 2;
    grid-row: 2;
    margin-top: 0.1em;
  }
  .texte1 {
    grid-column: 2 / span 2;
    grid-row: 3;
    margin-right: 5em;
    margin-left: 1em;
    }
  
  .titre2 {
    grid-column: 1 / span 3;
    grid-row: 6;
    margin-top: 0.5em;
    text-align: center;
    font-size: 90px;
  }
  .titre3 {
    grid-column: 1 / span 2;
    grid-row: 7;
  }
  .texte2 {
    grid-column: 1;
    grid-row: 8;
    margin-right: 2em;
    margin-left: 1em;
    }  
  .titre4 {
    grid-column: 1 / span 2;
    grid-row: 9;
    }    
  .texte3 {
    grid-column: 3;
    grid-row: 10;
    margin-right: 2em;
    margin-left: 1.5em;
  }
  .video1 {
    grid-column: 1 / span 2;
    grid-row: 10;
    margin-right: 2em;
    margin-left: 1em;
  }
  .titre5 {
    grid-column: 1 / span 2;
    grid-row: 12;
  } 
  .video2 {
    grid-column: 2 / span 2;
    grid-row: 13;
    margin-left: 1em;
  } 
  .texte4 {
    grid-column: 1;
    grid-row: 13;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre6 {
    grid-column: 1;
    grid-row: 14;
  } 
  .texte5 {
    grid-column: 1;
    grid-row: 15;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .photo {
    width: 100%;
    margin-top: 10px;
  }
  .image2 {
    width: 100%;
    grid-column: 1;
    grid-row: 16 / span 2;
    }
  .titre7 {
    grid-column: 2;
    grid-row: 16;
    height: auto;
  } 
  .texte6 {
    grid-column: 2;
    grid-row: 17;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre8 {
    grid-column: 3;
    grid-row: 16;
  } 
  .texte7 {
    grid-column: 3;
    grid-row: 17;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre9 {
    grid-column: 1;
    grid-row: 18;
  } 
  .texte8 {
    grid-column: 1;
    grid-row: 19 / span 3;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre10 {
    grid-column: 2;
    grid-row: 18;
  } 
  .texte9 {
    grid-column: 2;
    grid-row: 19;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre11 {
    grid-column: 3;
    grid-row: 18;
  } 
  .texte10 {
    grid-column: 3;
    grid-row: 19;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre12 {
    grid-column: 2;
    grid-row: 20;
  } 
  .texte11 {
    grid-column: 2 / span 2;
    grid-row: 21;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .titre13 {
    grid-column: 2;
    grid-row: 22;
  } 
  .texte12 {
    grid-column: 2 / span 2;
    grid-row: 23;
    margin-right: 2em;
    margin-left: 1em;
  } 
  .youtube {
    width: 560; height: 315;
    }
  .mix {
    grid-column: 2 / span 2;
    grid-row: 24;
    margin-right: 2em;
    margin-left: 1em;
  }
  .mixcloud{
    width: 560; height: 60;
    }
  .titre14 {
    grid-column: 1 / span 3;
    grid-row: 30;
    margin-top: 0.1em;
    text-align: center;
    font-size: 90px;
  } 
  .photos2 {
    grid-column: 2 / span 2;
    grid-row: 34;
    margin-right: 2em;
  } 
  .texte13 {
    grid-column: 1;
    grid-row: 34;
    text-align: right;
    margin-right: 2em;
    margin-left: 1em;
    margin-top: 15px;
  } 
  .photos3 {
    grid-column: 2;
    grid-row: 35;
  } 
  .texte14 {
    grid-column: 3;
    grid-row: 35;
    margin-right: 2em;
    margin-left: 1em;
    margin-top: 15px;
  } 
  .photos4 {
    grid-column: 1;
    grid-row: 35;
  } 
  .retour {
    grid-column: 1;
    grid-row: 39;
    margin-left: 1em;
  }  
}