@font-face {
  font-family: compagnon-bold;
  src: url(fonts/Compagnon-Bold.woff);
}
@font-face {
   font-family: compagnon-italic;
  src: url(fonts/Compagnon-Italic.woff);
  }
@font-face {
   font-family: compagnon-light;
  src: url(fonts/Compagnon-Light.woff);
  }
@font-face {
   font-family: compagnon-medium;
  src: url(fonts/Compagnon-Medium.woff);
  }
@font-face {
   font-family: compagnon-roman;
  src: url(fonts/Compagnon-Roman.woff);
  }


/* MOBILE FIRST */


/* reset général de marges */
body, h1, h2, h3, h4, h5, ul{
	margin:0;
	padding: 0;
}

body{
	background-color: white;
	font-family: compagnon-medium;
	text-align: center;
	list-style: none;
}

img{
	width: 90%;
	margin: auto;
}

.global {
	width: 550px;
	margin: auto;
	font-size: 15px;
}

p{ 
  margin: 30px;
  text-align: left;
 }

.précédent{
	text-decoration: none;
	color: black;
	border: black solid 2px;
	padding:1px;
	margin: 20px;

}
.suivant{
	text-decoration: none;
	color: black;
	border: black solid 2px;
	padding:1px;
	margin: 20px;
}

.nav1 li{
	display: inline;
	text-decoration: none;
	margin-left: 60px;
	margin-right: 60px;
	padding-top: 10px;
}

nav a:hover {
	color: red;
}

footer {
        width: 515px;
        background-color: red;
        	font-family: compagnon-medium;
        	margin: auto;
        	margin-top: 20px;
        	padding: 20px;
        }

footer a{
	color: white;
}


a {
	text-decoration: none;
	color: black;
}



h1 {
	font-family: compagnon-bold;
	color: white;
	font-size: 60px;
   background-color: red;
   padding: 10px;
   position: -webkit-sticky;
   position: sticky;
   top:-1px;
   margin-bottom: 10px;
   margin: auto;
   z-index: 10;
}

h2 {
	font-family: compagnon-roman;
	color: white;
	font-size: 35px;
	width: 515px;
   background-color: darkblue;
   padding: 10px;
   margin: auto;
   	border: darkblue solid 2px;
}

h3{
	font-family: compagnon-italic;
	color: red;
	font-size: 30px;
	margin: 10px;
	border: red solid 2px;
	padding: 10px;
}

.nav2 a{
	    color: darkblue;
	    font-family: compagnon-medium;
	    font-size: 20px;
}

blockquote {
	         font-family: compagnon-bold;
	         font-size: 15px;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.compagnon-light{
   font-family: 'compagnon-light';
   width: 100%;
   box-sizing: border-box;
   margin-top: 20px;
   padding-bottom: 10px;
      padding-top: 10px;
}

.compagnon-italic{
   font-family: 'compagnon-italic';
   width: 100%;
   box-sizing: border-box;
   margin-top: 20px;
   padding-bottom: 10px;
      padding-top: 10px;
}

.compagnon-roman{
   font-family: 'compagnon-roman';
   width: 100%;
   box-sizing: border-box;
   margin-top: 20px;
   padding-bottom: 10px;
      padding-top: 10px;
}

.compagnon-medium{
   font-family: 'compagnon-medium';
   width: 100%;
   box-sizing: border-box;
   margin-top: 20px;
   padding-bottom: 10px;
      padding-top: 10px;
}

.compagnon-bold{
   font-family: 'compagnon-bold';
   width: 100%;
   box-sizing: border-box;
   margin-top: 20px;
   margin-bottom: 20px;
   padding-bottom: 10px;
   padding-top: 10px;

}

.download {
	border: black solid 2px;
	padding: 2px;
	font-family: compagnon-medium;
	margin-bottom: 20px;
}

.download a:hover{
color: darkblue;

}

.stickers {
	width: 50%;
}


/* pour plus grand que 550px */
@media (min-width: 550px) {

body{
	background-color: white;
	}

}