* {box-sizing: border-box}
body {font-family: 'spartan', Arial, sans-serif;
 margin: 0;
 padding: 0 2em;
 font-size: 10px;
 color: #3e3e3e}
img {max-width: 100%;
 height: auto;
 display: block;}
a {text-decoration: none;
 color: inherit}

#intro {height: 100vh}
#intro .logo img {max-width: 70px}

@media screen and (min-width:48em) {#intro .logo img { max-width: 100px }}
@media screen and (min-width:72em) {#intro .logo img { max-width: 100% }}

#intro h1 {font-size: 1.19em;
 font-weight: 200;
 display: flex;
 justify-content: flex-end;
 align-items: center;}

#intro h1 .grobul {font-size: 3em;
 line-height: 0;
 margin: 0.1em 0.1em 0;}

#intro h2 {font-size: 6.3em;
 font-weight: 700;
 color: #e2e2e2;
 margin: 0;
 padding: 0 0 0.2em;}

@media screen and (min-width:48em) {#intro h2 { font-size: 11.5em }}
@media screen and (min-width:72em) {#intro h2 { font-size: 14.5em }}

/*__________________ POINT ANIME _____________________*/

#intro h2 .grogrobul {animation: change-color 4s ease infinite;}



 /*__________________ FLECHES ANIMEES _____________________*/
#intro .arrows-down {display: flex;
 flex-direction: column}
#intro .arrows-down img {animation: change-opacity 2s ease infinite;}
@keyframes change-opacity {
  0% { opacity: 1 }
 50% { opacity: 0 }
 100% { opacity: 1 }
}
#intro .arrows-down .arrow-1 {animation-delay: 0}
#intro .arrows-down .arrow-2 {animation-delay: 0.5s}
#intro .arrows-down .arrow-3 {animation-delay: 1s}
#intro .arrows-down .arrow-4 {animation-delay: 1.5s}


section#intro, section#portfolio {max-width: 1600px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;}

section#portfolio {min-height: 80vh;
 justify-content: flex-start}

@media screen and (min-width:48em) {
  section#portfolio {
   flex-direction: row;
   justify-content: space-around }
  }

#portfolio nav {padding: 2em 0}

@media screen and (min-width:48em) {
  #portfolio nav { padding: 0 }
}

/*__________________ FILTRES _____________________*/
ul.filtres {font-size: 1.27em;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center}

@media screen and (min-width:48em) {ul.filtres { font-size: 1.72em;
 flex-direction: column;
 align-items: flex-start }}

.filtres li {list-style: none}

.filtres li a {display: block;
 padding: 0.5em;
 margin: 0;
 border-radius: 1em;
 color: #666;
 text-align: right;
 cursor: pointer;}

/*__________________ PROJETS _____________________*/
.conteneur-projets {max-width: 1400px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center}

article, article figure {
 width: 100px;
 height: 100px;
 }

figure {border-radius: 90px;}

figure {position: relative;
 overflow: hidden;
 margin: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;}

figure a {padding: 2em;}

figure a img {}

@media screen and (min-width:48em) {
    article, article figure {width: 220px; height: 220px; margin:0 10px; }
    figure a {padding: 4em;}


 figure { border-radius: 150px;
 transform: scale(0.1) }}

@media screen and (max-width:47.9em) {figure { transform: scale(0.8) !important }}

footer {font-family: 'Open Sans', sans-serif;
 max-width: 1600px;
 min-height: 20vh;
 margin: 5em auto 0;
 padding: 2em 0;
 display: flex;
 flex-direction: column-reverse;
 justify-content: space-between;

 font-size: 1.4em;}



footer .flex-inline {display: flex;
 justify-content: space-between;
 align-items: center}

footer .copyright {
font-weight: 200;
 margin: 0 0 0 3em;
 }

footer .social {font-weight: 400;margin-bottom: 2em;}

footer .social a {position: relative}


@media screen and (min-width:48em) {
    footer {margin-top:0; flex-direction: row;align-items: center; }
    footer .social a:not(.contact-link){padding:0 0 0 2em}
}

footer .social a:not(.contact-link):hover::before {content: '\2022';
 font-size: 1.24em;
 color: #000;
 position: absolute;
 top: -1em;
 right: 0;
 left: 0;
 text-align: center}

footer .social a.contact-link {color: #33affd;
 animation: change-color 3s ease infinite;
 animation-play-state: running;}

footer .social a.contact-link:hover {animation-play-state: paused;
 text-decoration: underline}
@keyframes change-color {0% { color: #33affd }
 25% { color: #66d5bb }
 50% { color: #eb535a }
 75% { color: #ffc20f }
 100% { color: #33affd }
}

/*__________________ TAILLES TYPOS _____________________*/
.t-light {font-weight: 200}
.t-regular {font-weight: 400}
.t-bold {font-weight: 600}
.filtres a.active {font-weight: 600}

/*__________________ COULEURS _____________________*/
/* web */
.filtres a.web.active, .t-rouge {color: #eb535a}
article.web figure, .b-rouge {background: #eb535a}
/* app */
.filtres a.app.active, .t-vert {color: #66d5bb}
article.app figure, .b-vert {background: #66d5bb}
/* branding */
.filtres a.branding.active, .t-bleu {color: #33affd}
article.branding figure, .b-bleu {background: #33affd}
/* print */
.filtres a.print.active, .t-jaune {color: #ffc20f}
article.print figure, .b-jaune {background: #ffc20f}


/* cache */
.cache {display: none;}





/*_________________ MOBILE ___________________________*/
@media screen and (min-width:48em) {

 /*__________________ TRANSITIONS _____________________*/
 figure { transition: all 0.3s ease }
 figure img { opacity: 0;
 transition: opacity 0.3s ease }
 figcaption h1 { opacity: 0;
 transition: opacity 0.5s ease }

 /*__________________ HOVERS _____________________*/
 article:hover figure { box-shadow: 0 0 20px #0006;
 -webkit-transform: scale(1) !important; }
 article:hover figure img,
 article:hover figure figcaption h1 { opacity: 1 }
 figure:hover { cursor: pointer }

/*cache */
 .cache { display: block;
 pointer-events: none; }
 .cache figure { transform: scale(0) !important }}

 /*_________________ SCROLLBAR ___________________________*/
/* width */::-webkit-scrollbar {width: 4px}
/* Track */::-webkit-scrollbar-track {background: #fff}
/* Handle */::-webkit-scrollbar-thumb {background: #ffc20f;border-radius: 10px}
/* Handle on hover */
.p-web ::-webkit-scrollbar-thumb {background: #eb535a}
.p-print ::-webkit-scrollbar-thumb {background: #ffc20f}
.p-branding ::-webkit-scrollbar-thumb {background: #33affd}
.p-app ::-webkit-scrollbar-thumb {background: #66d5bb}