div#container {
  background-image: url("../images/ciel_bleu.png");
  max-width: 1200px;
  margin: 10px auto;
  padding:0;
  min-height: 400px;
  border: 0px solid #426;
  display: table;
}

div#container div#image .img-fluid{
height:100%;
padding:0;
margin:0;
width:100%;
position:relative;
top:0px;
}

div#container main {
  width: 100%;
  min-height: 250px;
  
  padding:0;
  margin:0;
}

div#container main .row h1 {
  font-weight: bold;
  color: #915;
  text-align: center;
  padding: 0px auto;
  margin: 0px auto 0px auto;
}

/* Style the dropdown button */
div#container main .dropbtn {
background-color: #f88;
color: white;
margin: 0px 0px 0px 10px;
padding: 0px 4px;
float:right;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
float:right;
margin: 0px;
padding:0px;
display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
margin: 30px 0px 0px 10px;
padding:2px;
background-color: #aac;
width: 40px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: #000;
font-weight:bold;
float:right;
padding: 3px;
font-size: 18px;
text-decoration: none;
display: block-inline;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:#a00;
font-weight: bold;
background-color: #fff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}


div#container main p {
  float: center;
  font-weight: bold;
  font-style: italic;
  color: #703;
  font-size: 24px;
  text-align: center;
  padding: 10px 20px;
  margin: 10px 25px 10px 20px;
  width:90%;
}

div#container h2 {
  padding: 0px;
  margin: 0px;
font-size:24px;
}

div#container h3 {
  padding: 0px;
  margin: 0px;
}


div#container main .row {
  margin: 10px auto 0px auto;
  padding: 0px;
}

div#container main div#reprints {
  width: 95%;
  border: 3px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 10px auto;
  margin: 15px auto;
  float: center;
  text-align: center;
}

div#container main div#passages_parallèles {
  width: 95%;
  border: 3px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 10px auto;
  margin: 15px auto;
  float: center;
  text-align: justify;
}

div#container main div#hymnes {
  width: 95%;
  border: 3px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 10px auto;
  margin: 15px auto;
  float: center;
  text-align: center;
}

div#container main div#Poèmes {
  width: 95%;
  border: 3px solid #000000;
  border-radius: 20px;
  background-image: url("../images/gris_clair.png");
  padding: 10px auto;
  margin: 15px auto;
  float: center;
  text-align: center;
}

div#container main div#commentaire_1,
div#container main div#commentaire_2 {
  width: 95%;
  border: 3px solid #000000;
  border-radius: 20px;
  padding: 20px auto;
  margin: 10px auto;
  background-image: url("../images/ciel_rose.png");
}

div#container main div#commentaire_1 p,
div#container main div#commentaire_2 p {
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  color: #11d;
  text-align: justify;
  padding: 10px;
}

div#container div#passages_parallèles p {
  color: black;
  font-weight: bold;
  padding:10px;
font-size:18px;
}

div#container h2 {
  font-weight: bold;
  padding: 0px;
  text-align: center;
}

div#container main h2 {
  font-weight: bold;
  padding: 10px 0px 0px 0px;
  text-align: center;
}

div#container h3 {
  font-weight: bold;
  padding: 5px 0px 0px 0px;
  text-align: center;
}

div#container div#reprints p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:5px;
  text-align: center;
}

div#container div#hymnes p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding:10px;
  text-align: center;
}

div#container div#Poèmes p {
  color: black;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

div#container main #images .row {
  margin: 0px;
  padding: 0px;
}

div#images {
  width: 97%;
  padding: 20px auto;
  margin: 20px auto;
  border: 0px solid #88f;
  border-radius: 50px;
}

div#images .top-left a {
  position: absolute;
  top: 15px;
  left: 46px;
  font-size: 20px;
  font-weight: bold;
  color: #eee;
  text-align: center;
}

div#images .top-right a {
  position: absolute;
  top: 15px;
  right: 46px;
  font-size: 20px;
  font-weight: bold;
  color: #eee;
  text-align: center;
}

div#images .top-left a:hover,
div#images .top-right a:hover,
div#Poèmes a:hover,
div#hymnes a:hover,
div#paspar a:hover,
div#reprints a:hover

 {
  background-color: #fff;
  color: #a00;
  font-weight: bold;
  text-decoration: none;
}

div#Poèmes a,
div#hymnes a,
div#paspar a,
div#reprints a

 {
  color: #a00;
  text-decoration: none;
}


div#container main div#iframe
{margin:0;
padding:0;
height:30px;
position:relative;
width:100%;
bottom:0;
}

div#container main div#iframe
{color:#000}


/* smartphones */
@media (max-device-width: 768px)
{

div#container main div#commentaire_1 p,
div#container main div#commentaire_2 p,
div#container div#passages_parallèles p,
div#container div#reprints p,
div#container div#hymnes p,
div#container div#Poèmes p,
div#container h3,
.top-left,
.top-right
 {
font-size: 16px;

}

div#container main p,
div#container h2
{
font-size:18px;
padding: 5px auto;
margin: 0px;
width:95%;
}

div#container main h1
{
font-size:20px;
color: #005;
margin: 15px auto 0px auto; 
}

div#container h2
{
font-size:20px;
margin: 0px auto; 
}


div#container main .dropbtn 
{
margin: 0px;
padding: 0px;
font-size: 18px;
}

.dropdown-content {
margin: 25px 0px 0px 0px;
padding:2px;
width: 25px;
}

.dropdown-content a 
{
color: #000;
font-weight:bold;
float:right;
margin: 3px 0px;
font-size: 15px;
text-decoration: none;
display: block-inline;
}

div#container main div#reprints,
div#container main div#passages_parallèles,
div#container main div#hymnes,
div#container main div#Poèmes,
div#container main div#commentaire_1,
div#container main div#commentaire_2
 {
  width: 95%;
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 5px auto;
  margin: 5px auto;
  }

}