/* Bienvenue dans la CSS de mon portfolio et bonne lecture */ 


/* Définitions de base */
.nav, ul, li{
  margin: 0;
  padding: 0;
  list-style: none none;
}

html {
  font-size: 100%;
  margin: 0;
}

body {
  margin: 0;
  font-family: "rooney-web", serif;
  color: #032427;
 }

body.faire-comprendre {
	background: url('/img/projets/Fond-Article-Faire-Comprendre.jpg') no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}

body.travailler-ensemble{
	background: url('/img/projets/Fond-Article-Travailler-Ensemble.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

body.pharmafr {
	background: url('/img/projets/Fond-Article-Groupe.jpg') no-repeat left bottom;
	background-size: cover;
	background-attachment: fixed;
}

body.contribuer-www {
	background: url('/img/projets/Fond-Article-WWW.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

body.challenge {
	background: url('/img/projets/Fond-Article-Challenge.jpg') no-repeat left center;
	background-size: cover;
	background-attachment: fixed;
}

body.obstacle {
	background: url('/img/projets/Fond-Article-Obstacle.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

body.capCuisine {
	background: url('/img/projets/Fond-Article-CAP.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

body.ComInterne {
	background: url('/img/projets/Fond-Article-Com-Interne.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

body.accelerer-marketing {
	background: url('/img/projets/accelerer-Fond-Article.jpg') no-repeat left top;
	background-size: cover;
	background-attachment: fixed;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
}


a {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

a:link, a:visited {
  color: #0d919c;
  text-decoration: none;
}

a:hover, a:focus {
  color: #c2203a;
  text-decoration: underline;
}

a img {
  border: none;
}


p {
  margin: 0 0 .5rem;
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  display: block;
  font-family: "ratio-display", arial, sans-serif;
  line-height: 1;
  margin: 0 0 10px;
  font-weight: 300;
  text-align: center;
}


h1,
.h1 {
  font-size: 60px;
  font-size: 3.75rem;
  margin: 1.5em 0 0.5em;
}


h2,
.h2 {
  font-size: 40px;
  font-size: 3rem;
  padding: 1rem 1rem 0.5rem;
  margin: 1.5rem 0rem .5rem;
}


p,
li {
  font-size: 20px;
  font-size: 1.25rem;
}


hr {
  height: 0;
  border: 0;
  background: #032427;
  border-bottom: 1px solid #00b3ef;
}

table {
  empty-cells: show;
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 10px 0;
}

th {
  font-weight: normal;
  font-family: "ratio-display", arial, sans-serif;
  font-size: 25px;
  font-size: 1.5625rem;
  white-space: nowrap;
}

.container {
  position: relative;
  max-width: 768px;
  margin: 0 auto;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

.center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.flex {
	display: flex;
	display: -webkit-flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
}

.flex li {
	-webkit-flex: 1;
}

footer.mentions {
	background: #FAFAFA;
	background: rgba(255, 255, 255, .5);
	margin-top: 0;
	padding: 1rem ;
}

footer p {
	text-align: center;
	margin: 0;
	padding: .5rem;
	font-size: 1rem;
	font-family: "ratio-display", arial, sans-serif;
	font-weight: 300;
}

footer a h3 {
	color: #032427;
	font-size: 1.2rem;
}


header div {
	position: fixed;
	width: 100%;
	top:0;
	z-index: 100;
}

header a {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

header a:hover,
header a:focus {
	text-decoration:none;
}

/* Contenus page d'accueil */

.home header div {
	position: relative;
	box-shadow: none;
	margin: 0;
}

.home header {
  position: relative;
  text-align: center;
  min-height: 60vh;
  background: #FFF no-repeat center;
  background-size: cover;
}

.home header .content {
	z-index: 0;
}

.home header .element-visuel {
	position: fixed;
	width: 3rem;
	height: 3rem;
	text-align: center;
	z-index: 0;
	font-family: "acier-bat-strokes", sans-serif;
}

.home header .element-visuel.fleche {
	font-size: 40rem;
	top: -20vh;
	left: -2.5vw;
	color: rgba(17,189,204,0.3);
}

.home header .element-visuel.cercle {
	font-size: 40rem;
	top: 40vh;
	left: 7.5vw;
	color: rgba(238,170,18,0.5);
}

.home header .element-visuel.degre {
	top: -30vh;
	right: 10vw;
	font-size: 40rem;
	color: rgba(238,170,18,0.5);
}

.home header .element-visuel.esperluette {
	top: 40vh;
	right: 20vw;
	font-size: 30rem;
	color: rgba(0,10,20,0.20);
}

header .element-visuel.bouton {
	position: fixed;
	top: 0;
	right: 0;
	font-size: 1rem;
	width: auto;
	min-height: 1.5rem;
	height: auto;
	color: #FFF;
	z-index: 100;
	background: rgba(238,170,18,1);
	font-family: "ratio-display", arial, sans-serif;
}

header .element-visuel.bouton a {
	position: relative;
	padding: .6rem;
	display: block;
	width: 100%;
	height: 100%;
	color: #FFF;
	text-align: left;
}

header .element-visuel.bouton a:hover,
header .element-visuel.bouton a:focus {
	background: rgba(0,10,20,1);
	color: #11bdcc;
}

.home .pageheader h1 {
	color: #da291c;
	margin: 20vh 0 0;
	padding-bottom: 0;
	font-size: 5rem;
	font-weight: 400 !important;
	font-family: "acier-bat-gris", sans-serif;
    text-align: left;
}
.home .pageheader h2 {
    font-style: none;
}

h2.intertitle {
	font-family: "acier-bat-noir", sans-serif;
	font-style: italic;
	font-weight: 300 !important;
	margin-top: 2rem;
	font-size: 3rem;
	color: #da291c;
}

.flex.next h2 {
	font-size: 3.5rem;
	font-family: "acier-bat-noir", sans-serif;
}



.home .pageheader h2 {
	font-size: 2rem;
	line-height: 3rem;
	opacity: 1;
	color: #AFA7A8;
	font-family: "rooney-web", serif;
	font-style: normal;
	margin-top: 0;
	padding-top: 0;
}

.home .pageheader .resume {
	color: #f9f4f4;
	text-align: center;
	font-weight: 300;
	font-style: italic;
}

.home .logo {
	position: fixed;
}

.home  .pageheader .resume a.thinkinnovation {
 	color: #11bdcc;
}


p.confidentialite {
	color: #404444;
	opacity: 0.6;
	padding-bottom: 2rem;
	padding-top: 0;
}

p.confidentialite .fa {
	margin-right: 5px;
}

header div.confidentialite p {
	color: #FFF;
	text-align: center;
	margin: 0;
	padding: .5rem;
	font-size: 1rem;
	
}

div.logo:hover .svg-logo path,
div.logo:focus .svg-logo path{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	fill: #11bdcc;
}

div.logo:hover,
div.logo:focus{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	background: #032427;
	cursor: default;
}

div.logo .svg-logo {
  width: auto;
  height: 1.2rem;
}

div.logo a {
	position: relative;
	border: 0;
	box-shadow: 0;
	font-size: 1.2rem;
}

.home div.logo a {
	position: relative;
	display: inline;
	color: #FFF;
	font-size: 1.2rem;
}

.logo .svg-logo path {
  fill: white;
}

figure.cover {
	position: fixed;
	margin: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
}

article header {
	position: relative;
}

article footer {
	background: #11bdcc;
} 

article h1 {
	background: rgba(0,10,20,0.75);
	color: #FFF;
	margin: 0vh;
	padding: 30vh 0;
	font-size: 6rem;
	font-family: "acier-bat-gris", sans-serif;
	text-shadow: 0 0 0.3rem rgba(0,10,20,0.75);
}

article.noel h1 {
	padding: 10vh 0;
}

.faire-comprendre article h1 {
	background: rgba(17,189,204,0.6);
}

.travailler-ensemble article h1 {
	background: rgba(238,170,18,0.7);
}

.pharmafr article h1 {
	background: rgba(17,189,204,0.6);
}

.contribuer-www article h1 {
	background: rgba(238,170,18,0.8);
}

.challenge article h1 {
	background: rgba(210,106,19,0.4);
}

.obstacle article h1 {
	background: rgba(0,10,20,0.75);
}

.ComInterne article h1 {
	background: rgba(0,10,20,0.5);
}

.accelerer-marketing article h1 {
	background: rgba(17,189,204,0.6);
}

main {
	position: relative;
	z-index: 50;
}

.content {
	 background: #FFF;
	 width: 100%;
	 padding-top: 1rem;
	 margin-top: -0px;
}

.home main .content {
	background: rgba(255,255,255,0);
	padding: 0;
	margin-top: -10px;
}

h2.intertitre.home {
	color: #11bdcc;
	text-align: center;
	font-size: 4rem;
	font-weight: 400 !important;
	font-family: "acier-bat-gris", sans-serif;
    margin: 6rem auto 3rem auto;
	text-shadow: 0;
}

h2.intertitre.home.justeavant {
    color: rgb(238,170,18);
    margin: 6rem auto 0 auto;
}

p.justeavant {
    text-align: center;
    line-height: 1.24em;
    padding: 0 1rem;
    margin: 0 auto 3rem auto;
    font-style: italic
}

.narrow-content {
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  width: 45rem;
  line-height: 1.9rem;
  color: #404444;
  font-size: 1.1rem;
}

article figure {
	margin: 0 auto;
	padding: 1rem 0 1rem;
	width: 60rem;
}

article figure.medium-size {
	width: 45rem;
}

blockquote .fa {
	position: absolute;
	display: block;
	color: #EFEFEF;
	font-size: 5rem;
	left: 50%;
	margin-left: -31rem;
	z-index: 0;
}

blockquote p {
	position: relative;
  margin: 0 auto;
  padding: .5rem 0 .5rem 3rem;
  width: 52rem;
  line-height: 2rem;
  color: #404444;
  font-size: 1.5rem;
  font-style: italic;
}

.resume {
	color: #032427;
	font-size: 1.2rem;
	line-height: 1.9rem;
}

.flex.informations.details {
	margin: 0 0;
	padding: 1rem 0;
	background: rgba(255, 255, 255, .9);
	box-shadow: inset 0px 0px 1px #CCC;
}

.flex.informations.details li {
	flex: 1;
}

.flex.informations {
	margin: 0 0;
	padding: 1rem 0;
	flex-flow: row wrap;
	-webkit-flex-flow: wrap;
}

.flex.informations.home {
	margin: 0 0;
	padding: 0;
	-webkit-flex-flow: wrap;
	flex-flow: wrap;
	justify-content:space-between;
	align-items: stretch;
	width: auto;
	box-shadow: none;
    background: transparent;
}

.flex.informations p {
    width: auto;
}


.flex.informations li {
	min-width: 33%;
}

.flex.informations.home li {
	position: relative;
    flex: 1 0 350px; /* this */
	margin: 0;
	padding: 0;
	background-size: cover;
	min-width: 350px;
	min-height: 350px;
	font-size: 3rem;
	flex-basis: auto;
}

.flex.informations.home li a {
	display: block;
	position: absolute;
	color: #FFF;
	width: 100%;
	height: 100%;
}

.flex.informations.home li a:hover,
.flex.informations.home li a:focus
 {
	text-decoration: none;
}

.flex.informations.home li h3{
	color: #11bdcc;
	text-align: center;
	font-size: 3rem;
	font-weight: 400 !important;
	font-family: "acier-bat-noir", sans-serif;
	padding: 3rem 2rem 0.5rem 2rem;
	text-shadow: 0;
}

li a button {
	cursor: pointer;
	background: 1da291;
	font-size: 1.2rem;
	color: rgba(0,10,20,.75);
	border-radius: 0.2rem;
	padding: 0.25rem 0.5rem;
	border: 0.1rem solid rgba(0, 10, 20, .25);
	font-family: "acier-bat-solid", sans-serif;
    margin: 0;
}


.flex.informations.home li a button,
.flex.informations.home li a button  {
	background: #da291c;
	color: rgb(255,255,255);
	border: 0.1rem solid rgba(255, 255, 255, .25);
}

.flex.informations.home li a button:hover,
.flex.informations.home li a button:focus  {
	background: rgb(255,255,255);
	color: #da291c;
	border: 0.1rem solid #da291c;
}

.flex.informations.home.intro {
    justify-content:center;
	align-items: center;
}

.flex.informations.home.intro li.portrait img{
    margin: 2rem auto 0 auto;
    max-height: 800px;
    width: auto;
}

.flex.informations.home.intro li.bio {
    min-width: 50vw;
    max-width: 50vw;
    background: rgba(255,255,255,0.8);
    max-height: none;
}

.flex.informations.home li.bio h1{
     padding: 1rem 1rem 0.5rem;
    }


.flex.informations.home li.bio h2{
	text-align: left;
	font-size: 2.5rem;
    font-style: italic;
	font-weight: 400 !important;
    font-family: "rooney-web", sans-serif;
	max-width: 40rem;
    margin: 1rem 0 0.5rem 0;
	text-shadow: 0;
}

.flex.informations.home li.bio p {
    max-width: 40rem;
    margin: 0.5rem auto 1rem auto;
    text-align: left;
    line-height: 1.24em;
    padding: 0.5rem 7rem 0.5rem 1rem;
}

.flex.informations.home li.bio p a {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
    color: #0d919c;
    font-size: inherit;
    text-decoration: underline;
}


.flex.informations.home li.faire-comprendre {
    background: #FFF;
    background: #f5f5f5 url('/img/projets/Fond-Accueil-Faire-Comprendre.jpg') top right;
	min-width: 40vw;
}

.flex.informations.home li.faire-comprendre a {
	background: rgba(255,255,255,0.8);
	text-decoration: none;
	color: #FFF;
}


.flex.informations.home li.faire-comprendre a h3{
	position: relative;
	/* margin-top: 6rem; */
}

.flex.informations.home li.faire-comprendre:hover a h3,
.flex.informations.home li.faire-comprendre:focus a h3{
	color: rgb(0,10,20);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

article h1 span,
.flex.informations.home li a h3 span,
h2.relative span {
	display: block;
	font-size: 2rem;
	line-height: 2.5rem;
	font-family: "rooney-web", sans-serif;
	font-style: italic;
	opacity: 1;
	margin-bottom: 0;
}

article h1 span {
	line-height: 4rem;
	font-size: 4rem;
}


.flex.informations.home li.pharmafr {
	background: #f5f5f5 url('/img/projets/Fond-Accueil-Groupe.jpg') top right;
	background-size: cover;
	max-width: 25vw;
}

.flex.informations.home li.pharmafr a {
	background: rgba(17,189,204,0.8);
	text-decoration: none;
	color: #FFF;
}

.flex.informations.home li.pharmafr a h3{
	color: #FFF;
	text-align: center;
}

.flex.informations.home li.pharmafr:hover a,
.flex.informations.home li.pharmafr:focus a {
	background:  rgba(0,10,20,0.8);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.flex.informations.home li.accelerer {
	background: #f5f5f5 url('/img/projets/accelerer-Fond-Accueil.jpg') top right;
	background-size: cover;
	max-width: 25vw;
}

.flex.informations.home li.accelerer a {
	background: rgba(17,189,204,0.8);
	text-decoration: none;
	color: #FFF;
}

.flex.informations.home li.accelerer a h3{
	color: #FFF;
	text-align: center;
}

.flex.informations.home li.accelerer:hover a,
.flex.informations.home li.accelerer:focus a {
	background:  rgba(0,10,20,0.8);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.flex.informations.home li.challenge {
	background: #f5f5f5 url('/img/projets/Fond-Accueil-Challenge.jpg') top right;
	background-size: cover;
    min-width: 30vw;
}

@media screen and (max-width: 400px) {
    .flex.informations.home li.challenge {
        max-width: 100vw;
    }
}

.flex.informations.home li.challenge a {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,10,20,0.4);
	text-decoration: none;
}


.flex.informations.home li.challenge a h3 {
	color: #FFF;
	/* top: 10rem; */
	text-align: center;
}


.flex.informations.home li.challenge:hover a,
.flex.informations.home li.challenge:focus a {
	background: rgba(210,106,19,0.7);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}



.flex.informations.home li.obstacle {
	background: #f5f5f5 url('/img/projets/Fond-Accueil-Obstacle.jpg') top center;
	background-size: cover;
	min-width: 30vw;
}


.flex.informations.home li.obstacle a {
	background: rgba(0,10,20,0.5);
	text-decoration: none;
	color: #FFF;
}

.flex.informations.home li.obstacle a h3 {
	color: #FFF;
	text-shadow: 0 0rem 0.2rem rgb(0,10,20);
}

.flex.informations.home li.obstacle:hover a,
.flex.informations.home li.obstacle:focus a {
	background: rgba(0,10,20,0.8);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}


.flex.informations.home li.travailler-ensemble {
	position: relative;
	background: #f5f5f5 url('/img/projets/Fond-Accueil-Travailler-Ensemble.jpg') top center;
	background-size: cover;
	min-width: 40vw;
}


.flex.informations.home li.travailler-ensemble a {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(238,170,18,0.7);
	text-decoration: none;
}

.flex.informations.home li.travailler-ensemble a h3 {
	color: #FFF;
	text-shadow: none;
	text-align: center;
}



.flex.informations.home li.travailler-ensemble:hover a,
.flex.informations.home li.travailler-ensemble:focus a {
	background: rgba(238,170,18,0.9);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}


.flex.informations.home li.capCuisine {
	position: relative;
	background: #f5f5f5 url('/img/projets/Fond-Accueil-CAP.jpg') top center;
	background-size: cover;
	min-width: 25vw;
}


.flex.informations.home li.capCuisine a {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(238,170,18,0.7);
	text-decoration: none;
}

.flex.informations.home li.capCuisine a h3 {
	color: #FFF;
	text-shadow: none;
	text-align: center;
}



.flex.informations.home li.capCuisine:hover a,
.flex.informations.home li.capCuisine:focus a {
	background: rgba(238,170,18,0.9);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}


.flex.informations.home li.www {
	background: #f5f5f5 url('/img/projets/Fond-Accueil-WWW.jpg') top right;
	background-size: cover;
	font-size: 3rem;
	min-width: 30vw;
}

.flex.informations.home li.www a {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,10,20,0.8);
	text-decoration: none;
}

.flex.informations.home li.www a h3 {
	color: #FFF;
	text-align: center;
	/* margin-top: 7rem; */
	
}

.flex.informations.home li.www:hover a,
.flex.informations.home li.www:focus a{
	background: rgba(238,170,18,0.7);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.flex.informations.home li.www:hover a h3,
.flex.informations.home li.www:focus a h3{
	color: rgba(0,10,20,0.8);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.flex.informations.home li.ComInterne {
	background: #f5f5f5 url('/img/projets/Fond-Accueil-Com-Interne.jpg') bottom right;
	background-size: cover;
}

.flex.informations.home li.ComInterne a {
	background: rgba(0,10,20,0.7);
	text-decoration: none;
	color: #FFF;
}

.flex.informations.home li.ComInterne a h3{
	position: relative;
	color: #FFF;
	text-align: center;
	
}

.flex.informations.home li.ComInterne:hover a,
.flex.informations.home li.ComInterne:focus a {
	background: rgba(0,10,20,0.9);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}


.flex.informations.home li.rencontre {
	background: #f5f5f5 url('/img/projets/Fond-rencontre.jpg') no-repeat center center;
	background-size: cover;
	}
	
.flex.informations.home li.rencontre a {
	display: inline;
	position: relative;
	width: auto;
	text-align: center;
	color: #11bdcc;
	opacity: 1;
}

.flex.informations.home li.rencontre h3 {
	text-align: center;
	color: rgb(0,10,20);
	/* margin-top: 5rem; */
}

.flex.informations.home li.rencontre a:hover,
.flex.informations.home li.rencontre a:focus {
	text-decoration: none;
	color: #a72339;
	opacity: 1;
	text-decoration: underline;
}
	
.flex.informations.home li.photo {
	background: #f5f5f5 url('/img/projets/Fond-Presentation.jpg') no-repeat Top center;
	background-size: cover;
	}


.flex.informations.home li img {
	width: 100%;
	height: auto;
	min-height: auto;
}

.flex.informations .fa {
	color: #11bdcc;
	font-size: 1.2rem;
	padding: 0 0.2rem 0.5rem;
}

footer .flex.informations li {
	flex: 1 1 15rem;
	min-width: 15rem;
	max-width: 15rem;
}

footer .flex.informations li a,
footer .flex.informations li a {
	display: block;
	border: 1px solid #FAFAFA;
	padding: .5rem;
	
}

footer .flex.informations li a:hover,
footer .flex.informations li a:focus {
	border: 1px solid #EFEFEF;
	background: #FFF;
}

footer .flex.informations li a:hover,
footer .flex.informations li a:focus,
footer .flex.informations li a:hover h3,
footer .flex.informations li a:focus h3,
footer .flex.informations li a:hover i.fa, 
footer .flex.informations li a:focus i.fa {
	text-decoration: none;
	color: #d46275;
}

.flex.informations .icon-light {
	opacity: 0.3;
}

article footer {
	background: #FAFAFA;
	margin: 3rem 0 0;
	padding-bottom: 2rem;
}

article footer h2 {
	background: #FAFAFA;
}

article footer h2.relative {
	font-family: "acier-bat-gris", sans-serif;
	font-size: 4rem;
	margin: 3rem 0 1.5rem;
	color: #11bdcc;
}

article footer .flex.next {
	align-items: stretch;
	padding-top: 0;
}

article footer .flex.next p {
	font-size: 1.2rem;
	font-family: "rooney-web", serif;
}

article footer .flex li {
	flex: 1;
	margin-bottom: 1rem;
}


	
article footer .flex.next li {
	vertical-align: top;
	text-align: center;
	background: #f6da9c;
	padding: 3.5rem;
	min-height: 20rem;
}

.home article footer .flex.next li  {
	min-height: 25rem;
}

article footer .flex.next li.rencontre {
	background: #f5f5f5 url('/img/projets/Fond-rencontre.jpg') no-repeat center center;
	background-size: cover;
	}
	
article footer .flex.next li.photo {
	background: #f5f5f5 url('/img/projets/Fond-Presentation.jpg') no-repeat Top center;
	background-size: cover;
	}
	
article footer .flex.next li.next-steps {
	background: #000 url('/img/projets/Fond-AllerPlusLoin.jpg') no-repeat top center;
	background-size: cover;
	color: #FFF;
}

article footer .flex.next li.next-steps p {
	text-align: left;
}

article footer .flex.next li i {
	color: #FAFAFA;
	display: block;
	font-size: 3.5rem;
	text-shadow: 0 0 0.1rem #CCC;
}

article footer .flex.next h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	background: transparent;
}

article footer .flex.next li.next-steps i {
	color: #112330;
	text-shadow: 0 0 0.1rem #04090c;
}

.flex.informations li {
	margin: 0;
	padding: 1rem 2rem;
	min-width: 100px;
	text-align: center;
	font-size: 1rem;
}

.flex.informations li span {
	opacity: 0.7;
}


@media screen and (min-width: 1600px) {
	.home header .element-visuel.degre {
		top: -20vh;
	}
	
	.home header .element-visuel.cercle {
		top: 50vh;
	}
	
	footer .flex.informations li {
		flex: 1 1 25rem;
		min-width: 25rem;
		max-width: 25rem;
	}
}

@media screen and (max-width: 1400px) {
  .flex.informations.home li.faire-comprendre,
  .flex.informations.home li.pharmafr,
  .flex.informations.home li.travailler-ensemble,
  .flex.informations.home li.accelerer,
  .flex.informations.home li.obstacle {
  	max-width: 100vw;
  }
  
}


@media screen and (max-width: 990px) {

	article h1 {
		padding: 20vh 0;
	}

	article h1,
	article h1 span  {
		font-size: 3rem;
		line-height: 3rem;
	}
	
	article h2, 
	h2.intertitle,
	.flex.next h2,
	article footer h2.relative {
		font-size: 2rem;
	}
	
	.narrow-content {
		width: 90%;
		padding: 0 5%;
	}
	
	article figure {
		width: 100%;
		margin: 1rem 0;
	}
    
    article figure.medium-size {
       width: 90%;
        margin: 1rem auto;
    }
	
	blockquote p {
		width: 80%;
	}
	

  .flex li {
  	-webkit-flex: 1 1 200px !important;  
  }
  
  .flex.informations.home li {
  	max-height:30vh;
  }
  
  .flex.informations.home li.faire-comprendre a h3,
  .flex.informations.home li.pharmafr a h3,
  .flex.informations.home li.travailler-ensemble a h3,
  .flex.informations.home li.capCuisine a h3,
  .flex.informations.home li.obstacle a h3,
  .flex.informations.home li.www a h3,
  .flex.informations.home li.challenge a h3, 
  .flex.informations.home li.accelerer a h3, 
  .flex.informations.home li.ComInterne a h3{
  	position: relative;
  	width: 100%;
  	top: 0;
  	margin-top: 5rem;
  	text-align: center;
  	padding: 0;
  	font-size: 2.5rem;
  }
  
  .flex.informations.home li.rencontre h3 {
  	width: 100%;
  	top: 0;
  	margin-top: 5rem;
  	text-align: center;
  	padding: 0;
  	font-size: 2.5rem;
  }
  
}
@media screen and (max-width: 720px) {
  .home .pageheader h1 {
  	font-size: 3rem;
  	font-family: "acier-bat-noir", sans-serif;
    text-align: left;
  }

    
  
  article h1{
  	font-size: 3rem;
  	font-family: "acier-bat-noir", sans-serif;
  }
   
  
  article h2 {
  	font-size: 2rem;
  }
  
  .flex.informations.home li, .flex.informations.home li.bio {
  	min-width: 100%;
    max-width: 100%;
  }
  
  
  article h1 span {
  	font-size: 2rem;
  }
  
  
 .flex.informations.home li.faire-comprendre a h3, .flex.informations.home li.pharmafr a h3, .flex.informations.home li.travailler-ensemble a h3, .flex.informations.home li.obstacle a h3, .flex.informations.home li.www a h3, .flex.informations.home li.challenge a h3, .flex.informations.home li.ComInterne a h3, .flex.informations.home li.rencontre a h3, .flex.informations.home li.capCuisine a h3, .flex.informations.home li.accelerer a h3 {
 	position: relative;
 	font-size: 2rem;
 	margin-top: 5rem;
 	padding-top: 1rem;
 	} 
  
  footer .flex.informations li {
  	flex: 1 1 10rem;
  	min-width: 300px;
  	max-width: 15rem;
  	padding: 0;
  	margin: 0;
  }
  
  article footer .flex.next li.rencontre {
  	max-width: 100%;
  	padding: 0;
  }
  
  p,
  li {
    font-size: 16px;
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  p.narrow-content {
  	margin-bottom: 1rem;
  }
  
  blockquote {
  	display: none;
  }
    
    .flex.informations.home.intro li.bio {
        min-width: 60%;
        max-width: 90%;
        margin: 0 auto 0 auto;
      }

    .flex.informations.home.intro {
        justify-content: center;
        align-items: center;
    }
    
    .flex.informations.home.intro li.portrait img{
    margin: 2rem auto 0 auto;
    height: 300px;
    width: auto;
    }
    
    .flex.informations.home.intro li.bio p, .flex.informations.home li.bio h2 {
    max-width: none;
    padding: 0.5rem 2rem 0.5rem 0rem;   
    
    }
    
    .flex.informations.home.intro li.bio h1 {
            margin-top: 0.5em;
        text-align: center;
    }
    
    .flex.informations.home.intro a {
         height: auto;
    }
    
    h2.intertitre.home {
	color: #11bdcc;
	text-align: center;
	font-size: 2.5rem;
    font-family: "acier-bat-noir", sans-serif;
    }

}


@media screen and (min-width: 720px) and (max-width: 1080px) {
    .flex.informations.home {
        min-width: 60%;
        max-width: 90%;
        margin: 0 auto 0 auto;
      }
    
    .flex.informations.home h1 {
        margin-top: 0.5em;
    }

    .flex.informations.home.intro {
        justify-content: center;
        align-items: center;
    }
    
    .flex.informations.home.intro li.portrait img{
    margin: 2rem auto 0 auto;
    height: 300px;
    width: auto;
    }
    
    .flex.informations.home.intro li.bio p, .flex.informations.home li.bio h2 {
    max-width: none;
    padding: 0.5rem 2rem 0.5rem 0rem;
    }
}


/* line 1, ../sass/_contact.scss */
.home main .content .contact-form {
    display: block;
    box-shadow: 0 0 0.1em #7f7877;
    margin: 1em auto 2em;
    text-align: left;
    width: 30rem;
    color: #7f7877;
    font-size: 1em;
    padding: 1rem;
}
    
    

@media screen and (max-width: 720px) {
  /* line 1, ../sass/_contact.scss */
  .home main .content .contact-form {
    width: 80%;
  }
}

/* line 20, ../sass/_contact.scss */
.contact-form p {
  font-size: 1em;
  margin-bottom: 1.5em;

}
/* line 25, ../sass/_contact.scss */
.contact-form label {
  display: block;
  font-size: 1em;
  color: #7f7877;
  padding: 0 0 0.5em;
}
/* line 32, ../sass/_contact.scss */
.contact-form input.text {
  display: block;
  border: 0;
  border-bottom: 1px dashed #c5c5c5;
  font-size: 1em;
  font-style: italic;
  font-family: "rooney-web", serif;
  color: #032427;
  width: 100%;
}
/* line 43, ../sass/_contact.scss */
.contact-form input.text:focus {
  background: #f9f4f4;
}
/* line 47, ../sass/_contact.scss */
.contact-form textarea {
  display: block;
  width: 100%;
  height: 5em;
  font-style: italic;
  font-size: 1em;
  color: #032427;
  border: 1px dashed #c5c5c5;
  font-family: "rooney-web", serif;
}
/* line 58, ../sass/_contact.scss */
.contact-form .button {
  display: block;
  text-align: center;
  position: relative;
  width: 6em;
  margin: 0 ;
  padding: 0.2em 0.5em;
  border: 0.1em solid #7f7877;
  background: white;
  border-radius: 0.2em;
  color: #7f7877;
  font-size: 0.9em;
  cursor: pointer;
}
/* line 72, ../sass/_contact.scss */
.contact-form .button:hover, .contact-form .button:focus {
  border-color: #0d919c;
  background: #0d919c;
  color: white;
  text-decoration: none;
}
/* line 80, ../sass/_contact.scss */
.contact-form .edit {
  margin-top: 1em;
  text-align: center;
  color: #c5c5c5;
  font-size: 0.8em;
}