@charset "utf-8";
/* CSS Document */

/*________________________________________________ General pour tout le site ________________________________________________________*/
#copyright { position: absolute; width:960px; height: 20px; bottom:20px; margin: 0 auto; }
#copyright, #copyright a {font-size:12px; color:#ABAAA9;}
#copyright a {text-decoration:underline; }
#copyright a:hover { text-decoration:underline;color:#000; }
/*______________________________________________________________________________________________________________________________________*/


#industrie-poetique {}



body{margin:0;padding:0;font-family:'Roboto Flex',sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;text-align:center;color:#222;/*background:#f3eee3;*/background:radial-gradient(circle at 50% 40%, #fff 0%, #f1ebdf 60%);}


.container{animation:fadeIn 1.8s ease-in-out}
.logo{max-width:400px;margin-bottom:30px}

/*animation sur le logo*/
.logo{animation:logoFade 1.8s ease-in-out;}
@keyframes logoFade{0%{opacity:0;transform:translateY(-15px)}100%{opacity:1;transform:translateY(0)}}


h1{font-weight:600;margin:0 0 20px 0;font-size: 25px;}
.separator{width:60px;height:1px;background:#222;margin:20px auto 30px auto;opacity:.3}
.contact p{margin:8px 0;font-weight:300;font-size:14px}
.contact a{text-decoration:none;color:#222;transition:.3s}
.contact a:hover{opacity:.6}
.instagram{margin-top:12px;}
.instagram img{width:16px;vertical-align:middle;margin-right:2px;transition:.3s ease;}
.instagram a{text-decoration:none;color:#222;font-weight:300;}
.instagram a:hover img{opacity:.6;transform:scale(1.05);}

@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}



/*----------- RESPONSIVE -----------*/
@media screen and (max-width: 1300px) {
/*body#industrie-poetique { background:yellow; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: orange;}*/
}
@media screen and (max-width: 960px) {
/*body#industrie-poetique { background:blue; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: purple;}*/
}
@media screen and (max-width: 779px) {
/*body#industrie-poetique { background:green; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: blue;}*/
}
@media screen and (max-width: 479px){
/*body#industrie-poetique { background:yellow; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: orange;}*/
.logo{max-width:100%;}
}