@font-face {font-family: "Mostra Nuova W00 Regular";
  src: url("./fonts/e155ad249a01de9057566bb6d6fc9d89.eot"); /* IE9*/
  src: url("./fonts/e155ad249a01de9057566bb6d6fc9d89.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("./fonts/e155ad249a01de9057566bb6d6fc9d89.woff2") format("woff2"), /* chrome、firefox */
  url("./fonts/e155ad249a01de9057566bb6d6fc9d89.woff") format("woff"), /* chrome、firefox */
  url("./fonts/e155ad249a01de9057566bb6d6fc9d89.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}

body
{
    font-family: 'Catamaran', sans-serif; 
    /* font-family: 'MostraNuovaW00-Regular', sans-serif; */
    margin: 0px 0px;
    background: #eee;
    padding-top: 0px;
}

video
{
    border-radius: 10px;
}

h2
{
    text-transform: uppercase;
    font-weight:bold;
    font-size: 30px;
}

h3
{
    text-align: center;
    text-transform: uppercase;
}

td
{
    text-align: center;
}

.orange
{
    color: #ff7a00;
}

.turquoise
{
    color: #1da9b8;
}

p
{
    font-size: 20px;
    color: #777;
}

ul
{
    list-style: none;
}

.divider
{
    width: 200px;
    height: 4px;
    background: #1da9b8;
    margin: 50px auto 5px;
}
.heading 
{
    text-align: center;
    margin: 0px auto auto auto;        
}

/* Barre de navigation */

#titre 
{
    margin: 5px 30px 0 0px;
    font-family: 'Catamaran',sans-serif;
    font-size: 35px;
    color:  #444;
}

#logo
{
    margin-right: 5px;
}

#navbarSupportedContent
{
    float: right; 
    margin-top: 5px;
}

#navbarSupportedContent ul li a
{
    font-family: 'Catamaran',sans-serif;
    text-transform: uppercase; 
    font-size: 20px; 
}

#navbarSupportedContent>ul>li>a:focus, #navbarSupportedContent>ul>li>a:hover
{
    border-bottom: 2px #444 solid;
}

/* Accueil */

.marge
{
    
    padding-top: 15px;
}

.margeAcceuil
{
    
    padding-top: 50px;
}

#intro
{
    text-align: center;
    font-style: italic;
}

#carouselAccueil
{
    margin-left: 50px;
    width: calc(100% - 100px);
}

.carouselImage
{
    border-radius: 10px;   
}

.carousel-control-prev-icon,.carousel-control-next-icon 
{
    filter: invert(100%);
    width: 50px;
    height: 50px;
}
  
    
/* Description */
#resume
{
    margin: 100px 0 50px 0;   
}

.texteIcone
{
    margin: 20px 50px 0 10px;
}

.thumbnail
{
    margin: 0 0px 5px 0px;
    text-align: center;
}

.vignette
{
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.caption
{
    text-align: center;
}

.listeEquipements
{
    margin-top: 10px;
    list-style: outside;
    font-size: 20px;
    width: 90%;
}

#divers
{
    align-content: center;
    margin-top: 50px;
}

#listeDivers
{
    margin: 0 auto;
}

#equipementsDivers
{
    margin: 0 auto;
    list-style: outside;
    font-size: 20px;
}

/* Localisation */

#map
{
    height: 620px;
    margin-left: 50px;
    border: solid 2px #ddd;
    border-radius: 10px;
}

#plages
{
    height: 620px;
    width: 300px;
    margin-left: 50px;
    border: solid 2px #ddd;
    border-radius: 10px;
}

#distances
{
    font-size: 20px;
    padding-top: 10px;
    margin-left: 50px;
    align-content: center;
}

/* Activites */

#activites ul
{
    margin-top: 2px;
    font-size: 30px;
    text-align: left;
}


/* Tarifs */
#texteTarifs
{
    font-style: italic;
}

.bouttonLiens
{
    border: 1px solid #ddd;
    background: #1da9b8;
    color: #fff;
    width: 100%;        
    font-weight: bold;
    text-transform: uppercase;
    padding: 18px;
    border-radius: 5px;
    transition: all 0.3s ease-in 0s;
}
.bouttonLiens:hover
{
    background: #333;
    border-color: #1da9b8;
}


/* Disponibilités */
.mois
{
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    text-align: center;
}

#calendrier
{
    text-align: center;
    
}

.horsMois
{
    color: grey;
}

.nonDispo.basseSaison
{
   /*  text-decoration-line: line-through; */
    background: linear-gradient(135deg, lightgreen 12.5%, #fff 12.5%, #fff 37.5%, lightgreen 37.5%,lightgreen 62.5%, #fff 62.5%, #fff 87.5%, lightgreen 87.5%);
}

.nonDispo.moyenneSaison
{
    background: linear-gradient(135deg, lightgoldenrodyellow 12.5%, #fff 12.5%, #fff 37.5%, lightgoldenrodyellow 37.5%,lightgoldenrodyellow 62.5%, #fff 62.5%, #fff 87.5%, lightgoldenrodyellow 87.5%);
}

.nonDispo.hauteSaison
{
    background: linear-gradient(135deg, orange 12.5%, #fff 12.5%, #fff 37.5%, orange 37.5%,orange 62.5%, #fff 62.5%, #fff 87.5%, orange 87.5%);
}

.nonDispo.treshauteSaison
{ 
    background: linear-gradient(135deg, red 12.5%, #fff 12.5%, #fff 37.5%, red 37.5%,red 62.5%, #fff 62.5%, #fff 87.5%, red 87.5%);
}
.basseSaison
{
    background-color: lightgreen;
}
.moyenneSaison
{
    background-color: lightgoldenrodyellow;
}
.hauteSaison
{
    background-color: orange;
}
.treshauteSaison
{
    background-color: red;
}

.badge
{
    font-size: 16px;
    font-style: normal;
    margin-right: 1%;
}

#annulations
{
    font-style: italic;
    text-align: left;
}
/*Commentaires */
.carousel-item {
    padding: 3rem;
    text-align: center;
    background-color: white;
    border-radius: 10px;
}

.testimonial-author {
    font-style: italic;
    color: #777;
}

/* Contact */

#contact h2
{
    text-transform: uppercase;
    font-weight:bold;
    color: black;
}
#contact-form
{
    font-size: 20px;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
}
.blue
{
    color: #0069d6;
    margin-bottom: 5px;
}
.form-control
{
    height: 50px;
    font-size: 18px;
}
#contact-form input[type=submit]
{
    margin: 20px auto 0px;
    display: block;
}
.comments
{
    font-style: italic;
    font-size: 18px;
    color: #d82c2e;
    height: 25px
}
#contact-form .thank-you
{
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    font-size: 22px;
}
#message
{
    margin-bottom: 0px;
}

.form-control
{
    margin-bottom: 0px;
}

.button1
{
    border: 1px solid #ddd;
    background: #1da9b8;
    color: #fff;
    width: 100%;        
    font-weight: bold;
    text-transform: uppercase;
    padding: 18px;
    border-radius: 5px;
    transition: all 0.3s ease-in 0s;
}
.button1:hover
{
    background: #333;
    border-color: #1da9b8;
}

#mailContact
{
    font-weight: bold;
}

/* FOOTER */

footer
{
    margin-top: 50px;
    height: 150px;
    background-color: #444;
}

footer h1
{
    padding-top: 20px;
    text-align: center;
    color: white;
}

.copyright
{
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
    color: #777;
}


/* MODAL */

.photoMaison{
    margin-top:10%;
}

#images img{
    box-shadow: -5px -5px 10px 0px #aaa,  5px 5px 10px 0px #aaa;
}

			/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* SLIDER */
#slider { width: calc(100% - 100px);} 
#slider li { width: 350px; }
        

/* Calendrier */
.calendar .calendar-header {
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border: 0;
}

.calendar .calendar-header .year-title {
  font-size: 18px;
}

.calendar .calendar-header .year-title:not(.year-neighbor):not(.year-neighbor2) {
  border-bottom: 2px solid #2196f3;
}

.calendar .months-container .month-container {
  height: 260px;
  margin-bottom: 25px;
}

.calendar table.month {
  background-color: white;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  height: 100%;
}

.calendar table.month th.month-title {
  background-color: #2196F3;
  color: white;
  padding: 12px;
  font-weight: 400;
}

.calendar table.month th.day-header {
  padding-top: 10px;
  color: #CDCDCD;
  font-weight: 400;
  font-size: 12px;
}

.calendar table.month td.day .day-content {
  padding: 8px;
  border-radius: 100%;
}