@media (min-width: 200px ) {
  .container {
    width: 190px;
  }
  .intro {
    font-size: 3vw;
    margin-left: 5%;
	margin-right: 5%;
    }
    
	h2 {font-size: 4.5vw;}
	h3 {font-size: 8vw;}
	h5 {font-size: 6vw;	font-family: 'Cuprum'; line-height:1.3;

}
	p {font-size: 1.2em;}
	
	.listing {font-size: 1.2em;}

	.page {
	margin-top: 20%;
	margin-left: 10%;
	margin-right: 5%;
	margin-bottom: 5%;
	}
		.titre {
width: 100%;
  background-color: #FFF;
  border: 0px solid black;
  border-radius: 0px;
  margin-top: 65%;
  margin-bottom: 30%;
  text-align: center;

}
    }
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  .intro {
    font-size: 2.2vw;
    margin-left: 10%;
	margin-right: 10%;
    }
    h2 {font-size: 3vw;}
	h3 {font-size: 3.2vw; padding-right: 20%;}
    h5 {font-size: 2.5vw;}
	p {font-size: 1.2em;}
	.page {
	margin-top: 10%;
	margin-left: 10%;
	margin-right: 5%;
	margin-bottom: 5%;
	}
	
	.titre {
width: 100%;
  background-color: #FFF;
  border: 0px solid black;
  border-radius: 0px;
  margin-top: 25%;
  margin-bottom: 8%;
  text-align: center;

}
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
    .intro {
    font-size: 1.8vw;
	margin-left: 15%;
	margin-right: 15%;
    }
	h3 {font-size: 3.2vw; padding-right: 20%;}
    h5 {font-size: 2.5vw;}
	p {font-size: 1.3em;}
	.page {
	margin-top: 10%;
	margin-left: 15%;
	margin-right: 5%;
	margin-bottom: 5%;
	}
	
	.titre {
width: 100%;
  background-color: #FFF;
  border: 0px solid black;
  border-radius: 0px;
  margin-top: 17%;
  margin-bottom: 8%;
  text-align: center;

}
}
@media (min-width: 1200px) {
	.container {width: 100%px;}
    .intro {
    font-size: 1.5vw;
    margin-left: 15%;
	margin-right: 15%;
    }
    h3 {font-size: 3.2vw; padding-right: 20%;}
    h5 {font-size: 2.5vw;}
	p {font-size: 1.3em;}
	.page {
	margin-top: 10%;
	margin-left: 15%;
	margin-right: 5%;
	margin-bottom: 5%;
	}
	
	.titre {
width: 100%;
  background-color: #FFF;
  border: 0px solid black;
  border-radius: 0px;
  margin-top: 17%;
  margin-bottom: 8%;
  text-align: center;

}
}


#dropdown-container {
margin-top: 5%;
}


.container {
width:100%;
}


#navbar, .navbar-header {
  font-family:'Cuprum';
  font-size: 1.2em;
}

h2 {
	font-family: 'Cuprum';
	font-style: italic;
	}

h3 {
width: 100%;
  font-family:'Libre Baskerville';
  text-align: left;
  margin-bottom: 3%
}

h4 {
width: 100%;
  font-family:'Libre Baskerville';
  text-align: left;
  font-size: 3vw; 
  line-height:1.5;}
}
h5 {
	font-family: 'Cuprum';
	}
	
figcaption {
	  font-size: 0.8em; 
	  }

a {position:relative; z-index:1;}

A.class1 {color:white;}
A.class1:link  {text-decoration: none; color: white;}
A.class1:visited {text-decoration: none; color: white;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: white;}

A.class2 {color:black;}
A.class2:link  {text-decoration: none; color: black;}
A.class2:visited {text-decoration: none; color: gray;}
A.class2:hover {text-decoration: underline; color: black;}
A.class2:active {text-decoration: none; color: black;}


a:hover {background: url(img/enveloppes/env03-visited.jpg);}


.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
}

.menu {
position: fixed;
top: 0;
width: 100%;
z-index:4;

}

.enveloppe {
	width: 20%;
	margin-top: 10%;
	margin-left: 5%;
	float: left;
	position: relative;
  }
#envelopper {
	width: 15%;
	margin-top: 10%;
	margin-right: 5%;
	margin-left: 5%;
	float: left;
	position: relative;
  }


.intro {
  background-color: #FAF9F0;
  border: 0px solid black;
  border-radius: 0px;
  font-family:'Libre Baskerville';
  text-align: justify;
  padding-top: 10%;
  padding-left: 10%;
  padding-right:10%;
  margin-bottom: 10%;
  margin-top: 10%;
}
.lettre {
	max-width : 1000px;
  margin-bottom: 10%;
  margin-top: 10%;
  margin-left: 25%;
 margin-right: 5%;
}


.manuscrit {
margin-top: 10%;
margin-left: 5%;
margin-right: 5%;
}

.col1 {
	margin-right: 5%;
	float: left;
	font-size: 1.2em;
	position: relative;
	display: inline-block;
}

.col2 {
	max-width: 500px;
	margin-right: 5%;
	float: left;
	font-size: 1.2em;
	position: relative;
	display: inline-block;
}

.col3 {
	max-width: 300px;
	margin-right: 5%;
	float: left;
	font-size: 1.2em;
	position: relative;
	display: inline-block;
}
.carousel-content {
	padding-top:10%;
	padding-bottom:10%;
    color:black;
    display: flex;
    align-items:center;
    font-style: italic;
    
}

.clear {
  clear: both;
}

.btn-facebook {
	color: #fff;
	background-color: #4C67A1;
	    outline: none;
}
.btn-facebook:hover {
	color: #fff;
	background-color: #405D9B;
	    outline: none;
}
.btn-facebook:focus {
	color: #fff;
	    outline: none;
}
  
.footer {
	width: 100%;
	background: #D4D2D2;
	color: white;
	font-size:1em;
	padding-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	}
	
.footer-sub {
	padding-left: 5%;
	width: 30%;
	float: left;
	}