/* TEMPLATE BLEU */

/* Sticky footer styles
================================================================== */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
 /* border: 1px solid blue;*/

}

/* Set the fixed height of the footer here */
#footer {
  background-color: #C2C2C2;
  background-image: url("../img/denim.png");
  background-repeat: repeat;
  font-size: 0.8em;
  padding-bottom: 0.2em;
}

#footer a {
  color: #FFF;
}

#footer a:hover {
  color: #C2C2C2;
  text-decoration: none;
}

#footer .glyphicon {
  top: 10px
}

.social {
  margin-left: -50px;
  margin-top: -20px;
  font-size: 2.5em;
}

.social .fa {
  margin-right: 0px;
}

.social li {
  float: left;
  list-style: none;
  padding: 10px;
}
@media (max-width: 980px){
    .social {
    margin-left: -33px;
  }

  .credit {
    margin-left: 15px;
  }
}

@media (max-width: 768px){
    .social {
    margin-left: -33px;
  }

  .credit {
    margin-left: 0px;
  }

  .container3 {
    padding-left: 15px;
    padding-right: 15px;
  }

#footer .glyphicon {
  margin-right: 20px;
}
}

/* Custom page CSS
============================================================ */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 980px;
}

.container2 {
  clear: both;
  width: 100%;
  height: auto;
  max-width: 980px;
  /*background: lightgray;*/
  margin: 10px auto;
  /*border: 1px solid green;*/
}

.container3 {
  clear: both;
  width: 100%;
  height: auto;
  max-width: 980px;
  /*background: lightgray;*/
  margin: 0px auto;
  /*border: 1px solid green;*/
  color: #FFF;
}

.container .credit {
  margin: 20px 0;
}

/* HEADER
=================================================================== */

.headerAccueil {
  width: 100%;
  height: auto;
  /*border: 1px solid red;*/
  margin: 0px auto;
  /*background: #4e3b3b; /* couleur */
  background-image: url("../img/denim.png");
  background-repeat: repeat;
}

.header {
  width: 100%;
  height: 100px;
  /*border: 1px solid red;*/
  margin: 0px auto;
  background: #C2C2C2;
  background-image: url("../img/denim.png");
  background-repeat: repeat;
}

.containerLogoHome {
  clear: both;
  height: 547px;
  background: #FFF;
  background-image: url('../img/subtle_dots.png');
  background-repeat: repeat;
  margin-top: -60px;
  margin-bottom: 20px;
  padding-top: 20px;
  z-index: 1000;
  border-radius: 0 0 2px 2px;
  box-shadow: 0px 5px 10px -4px;
}

.containerLogo {
  clear: both;
  height: auto;
  min-height: 220px;
  background: #FFF;
  background-image: url('../img/subtle_dots.png');
  background-repeat: repeat;
  margin-top: -60px;
  margin-bottom: 20px;
  padding-top: 20px;
  z-index: 1000;
  border-radius: 0 0 2px 2px;
  box-shadow: 0px 5px 10px -4px;
}

.containerLogo .btn,
.containerLogoHome .btn {
  text-align: left;
}

.containerLogo .btn span,
.containerLogoHome .btn span {
  width: auto;
  height: 100%;
  float: left;
}

.containerLogo .btnContent,
.containerLogoHome .btnContent {
  float: left;
}

.containerLogo .btnContent a ,
.containerLogoHome .btnContent a {
color: #FFF;
}

.containerLogo .btnContent a:hover ,
.containerLogoHome .btnContent a:hover {
color: #FFF;
}


.containerLogo .btnContent a:visited ,
.containerLogoHome .btnContent a:visited {
color: #FFF;
}
@media (max-width: 991px) {
  .containerLogo {
    margin-top: 0px;
    height: 220px;
    padding-top: 0.5em;
    z-index: 0;
    border-top: 1px solid ;
    padding-bottom: 0.5em;
  }
  .containerLogoHome {
    margin-top: 0px;
    height: auto;
    padding-top: 0.5em;
    z-index: 0;
    border-top: 1px solid ;
    padding-bottom: 0.5em;
  }

  .header {
    margin-top: 0px;
  }
}

.containerNav {
  width: 100%;
  height: 57px;
  position: relative;
  top: 10px;
  /*border: 1px solid red;*/
  margin: 0px auto;
  box-shadow: 20px 20px 200px -4px;
}

@media (max-width: 991px) {
  .containerNav {
    top: 0px;
  }
}
.menuhaut {
  width: 1024px;
  margin: 0 auto;
  font-weight: 700;
}

@media (max-width: 968px) {
  .menuhaut {
    width: 100%;
  }
}

.logo {
/*  margin-bottom: 1em;*/
  margin-top: 40px;
  padding-left: 0px;
}

.logo img {
  margin: 0 auto;
  /*max-width: 220px;*/
  /*max-height: 160px;*/
}

.adresse {
  height: auto;
  margin-bottom: 1em;
  left: -15px;
}

.adresse li {
  list-style: none;
  margin-left: -20px;
}

.adresse .fa {
  margin-right: 15px;
}

.adresseAccueil {
  height: auto;
  margin-bottom: 1em;
  position: absolute;
  bottom: 210px;
  left: -15px;
}

.adresseAccueil li {
  list-style: none;
  margin-left: -20px;
}

.adresseAccueil .fa {
  margin-right: 15px;
}

.boutons {
  height: auto;
  position: relative;
  bottom: 10px;
  left: 0px;
}

.boutons .btn {
  margin: 5px 0px;
}

.boutonsHome {
  height: auto;
  position: absolute;
  bottom: 10px;
  left: 0px;
}

.boutonsHome .btn {
  margin: 5px 0px;
  font-size: .9em;
  padding: 10px;
}

@media (max-width: 991px) {
  .adresse li,
  .adresseAccueil li
   {
    margin-left: -40px;
    text-align: center;
  }

  .adresse,
  .adresseAccueil {
    position: relative;
    bottom: 0;
    border-right: 1px solid #E2E2E2;
  }

  .boutons,
  .boutonsHome {
    margin-bottom: 1em;
    position: relative;
    bottom: 0px;
    top: 10px;
  }
}

@media (max-width: 768px) {
  .adresse li,
  .adresseAccueil li {
    margin-left: -40px;
    text-align: center;
  }

  .adresse,
  .adresseAccueil {
    border-right: 0px;
    padding-bottom: 2em;
  }

  .boutons,
  .boutonsHome {
    margin-bottom: 1em;
  }
}

.fonddiv {
  width: 100%;
  height: auto;
  clear: both;
}

.diaporama {
  height: auto;
  margin-top: 20px;
  margin-bottom: 25px;
}

.diaporama img {
  width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .diaporama {
  height: auto;
  min-height: 10em;
  margin-top: 10px;
  }
}

/* PRESENTATION + HORAIRES
====================================================== */

.presentation {
  position: relative;
  height: auto;
  min-height: 220px;
  border-bottom: 1px solid #C2C2C2;
  /*border: 1px solid violet;*/
}

.presentation .btn {
  margin: 0 15px 15px 0;
}

.horaires {
  /*border: 1px dashed green;*/
  height: 220px;
  /*border-bottom: 1px solid #C2C2C2;*/
  background-color: #F2F2F2;
}

.horaires ul {
  margin-top: 0px;
}

.horaires li {
  border-bottom: 1px solid #C2C2C2;
  list-style: none;
  margin: 5px auto 5px -40px;
}

.horaires .btn {
  margin: 0 15px 15px 0;
}

.horaires .fin  {
  border-bottom: 0px solid gray;
}

.heures {
  width: 60%;
  position: absolute;
  left: 120px;
  /*border: 1px solid blue;*/
  text-align: left
}

.jours {
  width: 40px;
  margin-left: 15px;
  /*border: 1px solid red; */
}

@media (min-width: 768px) and  (max-width: 968px) {

  .horaires {
    font-size: 0.9em;
  }

  .horaires li {
    border-bottom: 1px solid #C2C2C2;
    list-style: none;
  }

  .heures {
    font-size: 0.9em;
    width: auto;
    position: relative;
    left: 10px;
    /*border: 1px solid blue;*/
    text-align: left;
  }
}

/* VIGNETTES
====================================================== */

.titreVignette {
  width: 100%;
  height: 30px;
}

.titreVignette .glyphicon-chevron-right {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #FFF;
  font-size: 0.8em;
}

.titreVignette .fa-calendar {
color: #FFF;
position: relative;
top: 7px;
}

.vignette1 img.img-thumbnail,
.vignette2 img.img-thumbnail,
.vignette3 img.img-thumbnail,
.vignette4 img.img-thumbnail {
  margin-top: -30px;
  border-radius: 0px;
  padding: 0px;
  width: 100%;
  height: 210px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .vignette1 img.img-thumbnail,
  .vignette2 img.img-thumbnail,
  .vignette3 img.img-thumbnail,
  .vignette4 img.img-thumbnail {
    margin-top: -30px;
    border-radius: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
  }
}

.vignette1,
.vignette2,
.vignette3,
.vignette4 {
  height: auto;
  min-height: 390px;
  background: #F2F2F2;
  margin-left: 0px;
  /*border-bottom: 1px solid #C2C2C2;*/
  padding-bottom: 10px;
}

.vignette1 p,
.vignette2 p,
.vignette3 p,
.vignette4 p {
  padding: 10px 15px;
}

.vignette1 a,
.vignette2 a,
.vignette3 a,
.vignette4 a {
  color: #000;
}

.vignette1 a:hover,
.vignette2 a:hover,
.vignette3 a:hover,
.vignette4 a:hover {
  text-decoration: none;
}

.vignette1 .btn,
.vignette2 .btn,
.vignette3 .btn,
.vignette4 .btn {
  position: absolute;
  bottom: 10px;
  right: 35px;
}

.vignette1 h5,
.vignette2 h5,
.vignette3 h5,
.vignette4 h5,
.horaires h5 {
  color: #FFF;
  line-height: 30px;
}

/* SOUS MENU DEROULANT
============================================================= */
.sousmenu {
  width: auto;
  height: auto;
  border: 1px dashed red;
  position: relative;
  top: 0px;
}

/* CONTENU PAGES + SIDEBAR
============================================================= */

.content {
  clear: both;
  position: relative;
  top: -115px;
  width: 980px;
  height: auto;
  margin: 0px auto;
  /*background: #F2F2F2;*/
  /*border: 1px solid blue;*/
}

@media (max-width: 990px) {
  .content {
  clear: both;
  position: relative;
  top: 0px;
  width: auto;
  height: auto;
  margin: 0px auto;
  }
}

.menuSidebar  {
  margin-top: 10px;
  background-color: #F2F2F2;
  /*border: 1px solid #C2C2C2;*/
  padding: 10px;
}

.sidebarDivers {
  margin-top: 15px;
  padding: 10px;
  background-color: #F2F2F2;
  /*border: 1px solid #C2C2C2;*/
}

.sidebarDivers .btn span {
  width: auto;
  height: 100%;
  float: left;
}

.sidebar {
  margin-top: 100px;
  padding: 0;
}

@media (max-width: 990px) {
  .sidebar {
    margin-top: 150px;
  }
}

.page {
  background-color: #F2F2F2;
  height: auto;
  margin: 10px 0px 0px 0px;
  padding: 15px;
}

.page img {
  margin-bottom: 10px;
  max-width: 100%;
}

@media (max-width: 960px) {
  .page {
  background-color: #F2F2F2;
  height: auto;
  margin-top: 200px;
  margin-bottom: 30px;
  padding: 15px;
  }
}

.menuGauche li,
.menuGaucheServices li {
  height: 25px;
  list-style: none;
  margin-left: -40px;
  line-height: 25px;
}

.menuGauche li a,
.menuGaucheServices li a {
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 5px;
  color: #000;
}

.menuGauche li a:hover,
.menuGaucheServices li a:hover {
  color: #FFF;
  text-decoration: none;
}

.menuGauche .fin,
.menuGaucheServices .fin  {
  border-bottom: 0px solid gray;
}

.menuGauche .glyphicon-chevron-right,
.menuGaucheServices .glyphicon-chevron-right  {
  position: relative;
  top: 5px;
  right: 5px;
  font-size: 0.8em;
}

.especes ul {
  margin-left:  -50px;
}

.especes li {
float: left;
list-style: none;
margin-bottom: 10px;
text-align: center;
}

li.separateur {
  height: 1px;
  border-bottom: 1px solid #C2C2C2;
  margin: 10px auto 10px -40px;
}

.tel {
  width: auto;
  margin: 3px;
  color: white;
}

.tel span {
  position: relative;
  top: -3px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tel {
  border: 1px solid white;
}

.tel:hover {
    color: white;
}

.numero,
.numero a,
.numero a:visited {
  color: black;
  text-decoration: none;
}

li.menuactif  a {
    color: #FFF;
}