* {
 box-sizing: border-box;
}
*:before,
*:after {
 box-sizing: border-box;
}
html,
body {
 height: 100%;
 position: relative;
}
.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}
.img-zoom-container {
  position: relative;
}


.jumbotron {
	/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
	border-radius: 5px;
	/* 5px rounded corners */
	background-color: #e9ecef !important;
}
img {
	border-radius: 5px;
	/* 5px rounded corners */
}
img:hover {
	opacity: 0.8;
}

/* Navigation */
/* L'Overlay (background) */
.overlay {
   /* La Hauteur et la Largeur dépend de la manière dont on veut révéler l'overlay (voir Javascript) */
   height: 0;
   width: 100%;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   background-color: rgb(0,0,0); /* Couleur d'arrière-plan fallback */
   background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
   overflow-y: hidden; /* Désactive le scroll horizontal */
   transition: 0.5s; /* 0.5 seconde d'effet de transition pour faire descendre ou monter l'overlay
    (hauteur ou largeur. Cela dépend de l'effet de révélation) */
}

/* Position du contenu à l'intérieur de l'overlay */
.overlay-content {
   position: relative;
   top: 25%;
   width: 100%;
   text-align: center; /* Texte et Liens centrés */
   margin-top: 30px; /* on fixe 30px de marge au top, pour éviter un conflit avec le bouton de fermeture sur les écrans plus petits */
}

/* Les Liens de navigation à l'interieur de l'overlay */
.overlay a {
   padding: 8px;
   text-decoration: none;
   font-size: 36px;
   color: #818181;
   display: block; /* Affichage en block au lieu de inline */
   transition: 0.3s; /* Effets de Transition en hover (couleur) */
}

/* Couleur des liens de navigation en mouse over */
.overlay a:hover, .overlay a:focus {
   color: #f1f1f1;
}

/* Position du bouton Fermer (top right corner) */
.overlay .closebtn {
   position: absolute;
   top: 120px;
   right: 100px;
   font-size: 60px;
}

/* Quand la heuteur de l'écran est inférieure à 450 pixels, il faut changer le font-size des liens
et positionner le bouton de fermeture */
@media screen and (max-height: 450px) {
   .overlay a {font-size: 20px}
   .overlay .closebtn {
       font-size: 40px;
       top: 15px;
       right: 35px;
   }
}

.starter-template {
  background-image: url('../../images/fullscreen-menu-1.jpg');
  box-shadow: 0 0 0 10px rgba(0,0,255,0.3) inset;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 70vh;
  padding: 18px;
  background-color: #83aac7;
}

@media only screen and (max-width: 450px) {
  .starter-template {
  height: 70vh;
  padding: 180px 18px 18px 18px;
  vertical-align: bottom;
  background-color: #83aac7;
   }
}