/* **************************** desktop ******************************* */



body{

	background-image: url("images/background/background.jpg");

	background-attachment: fixed;

	background-size: cover;

	background-position:top center;

	font-family: 'Fjalla One', sans-serif;

  color: white;

	background-color: #151515;

}



/* **************************** logo ******************************* */

.logo{

  background-image: url("/images/logo/logo.svg");

  background-position: center;

  width: 10em;

  height: 10em;

	margin-bottom: -1.5em;

  color: white;

  background-repeat: no-repeat;

}



/* **************************** text et contenu ******************************* */

.contenu{

	margin-top: 8em;

}



h2 {

  color: white;

  text-align: center;

  margin-bottom: .3em;

  width: 80%;

  font-size: 49px;

  font-family: 'PT Serif',serif;

  font-style: italic;

  font-weight: 400;

}



/* **************************** barres en dessou texte principal ******************************* */

.barsHaut{

 background-image: url("/images/logo/lignesHaut.svg");

 width: 32.5em;

 height: 1em;

 background-repeat: no-repeat;

 color: white;

}



.bars {

  background-image: url("/images/logo/lignesBas.svg");

  width: 32.5em;

  height: 1em;

	margin-bottom: -.5em;

  background-repeat: no-repeat;

  color: white;

}



p.domaines{

	text-align: left;

	margin-bottom: 1.5em;

	font-size: 25px;

	line-height: 2.5rem;

}





p{

  line-height: 2.5rem;

  font-family: 'PT Serif',serif;

  color: #aaa;

  font-style: italic;

  font-weight: 400;

  font-size: 20px;

}



p a{

  color: #fff;

  text-decoration: none;



}



p a:hover{

	text-decoration: underline;

}



.contenu{

  display: flex;

  flex-direction: column;

  align-items: center;

}

.contenu p {

  text-align: center;

}

.text{

	color: #fff;

}



.medias p{

	margin-bottom: -.5em;

}

.mobile{

  display: none;

}

.desktop{

	display: inline-block !important;

}





/* --------------------------------------------

---------------- Téléphone --------------------

-------------------------------------------- */



@media only screen

and (min-width : 200px)

and (max-width : 767px) {

.logo{

  width: 6em;

  height:6em;

	margin-bottom: -.1em;

}

.contenu{

  margin-top: 1em;

}

h2 {

  width: 100%;

  font-size: 26px;



}

p{

  font-size: 18px;

  line-height: 2rem;

}



p.domaines{

	text-align: left;

	margin-bottom: 1.5em;

	font-size: 20px;

	text-align: center;

	line-height: 2rem;

	margin-top: .5em;

	margin-bottom: 1em;

}



.medias p{

	font-size: 15px;

}

.bars {

  width: 17em;

  height: 1em;

}



.barsHaut{

	width: 17em;

	height: 1em;

}

.mobile{

  display: flex;

}

.desktop{

	display: none !important;

}



}