@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i,900,900i');

body {
  /* overflow-y: hidden !important; */
}

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

#content-header {
  height: 60px;
}

#content-header #mobile-nav {
  height: 100%;
}

/* =======================================================
                          MAIN MENU
   ======================================================= */

/* #content-body {
  height: 100vh;
} */

#menu-left-bar {
  width: 335px !important;
  min-width: 335px !important;
  height: 100vh;
  display: none !important;
  position: relative;
  box-shadow: 10px 0px 15px -10px black;
}

#menu-left-bar img {
  display: block;
  margin: 0 auto;
}

#menu-left-bar.show {
  display: block !important;
}

#menu-left-bar .btn {
  background-color: #e8521a;
  border-color: #e8521a;
}

#menu-left-bar #producteur-avatar {
  border-radius: 50%;
}

#menu-left-bar {
  display: none !important;
}

#menu-left-bar #fiche-producteur.show {
  display: flex !important;
  flex-direction: column;
}

#menu-left-bar #contact-area,
#menu-left-bar #hidden-contact-area {
  width: 100% !important;
}

/* change transition animation to width when entire sidebar is toggled */
#hidden-contact-area.active {
  bottom: 0;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .2s;
  -o-transition-duration: .2s;
  transition-duration: .2s;
}

#hidden-contact-area {
  position: absolute;
  background-color: white;
  bottom: 100%;
  opacity: 1;
  box-shadow: 0px 0px 20px -5px black;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-property: width;
  -o-transition-property: width;
  transition-property: width;
}

#menu-left-bar #contact-button-up,
#menu-left-bar #contact-button-down {
  width: 100%;
  border-radius: 0;
}

/* Style all font awesome icons */
#menu-left-bar #reseaux-sociaux .fa {
  padding: 10px;
  font-size: 15px;
  width: 35px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin: 5px 2px;
}

/* Add a hover effect if you want */
#menu-left-bar #reseaux-sociaux .fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

#menu-left-bar #reseaux-sociaux .fa-facebook {
  background: #3B5998;
  color: white;
}
#menu-left-bar #reseaux-sociaux .fa-twitter {
  background: #55ACEE;
  color: white;
}
#menu-left-bar #reseaux-sociaux .fa-google-plus {
  background: #dd4b39;
  color: white;
}
#menu-left-bar #reseaux-sociaux .fa-linkedin {
  background: #3B5998;
  color: white;
}

#menu-left-bar #reseaux-sociaux .fa-youtube {
  background: #c4302b;
  color: white;
}

#menu-left-bar #reseaux-sociaux .fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  color: white;
}

/* =======================================================
                         MAIN CONTENT
   ======================================================= */

#main-content {
  overflow-y:hidden;
  position: relative;
  width: 100%;
  display: none !important;
  background-color: #13ac86;
}

#main-content h1 {
  font-family: 'Muli', sans-serif;
}

#main-content.show {
  display: initial !important;
}

#main-content .card {
  border: none;
  border-radius: 0;
  width: 20rem;
  min-height: 295px;
  max-height: 295px;
  margin: 25px;
}

#main-content .card.green-card {
  background-color: #439976;
}

#main-content .card.yellow-card {
  background-color: #f9cc00;
}

#main-content .card.red-card {
  background-color: #e8521a;
  color: white;
}

#main-content .card .card-img-top {
  padding: 5px;
  /* border-top-left-radius: 9px;
  border-top-right-radius: 9px; */
}

#main-content .card:hover img {
  display: none;
}

#main-content .card .card-body {
  padding-top: 0.45rem !important;
  overflow: hidden;
  font-family: 'Muli', sans-serif;
}

#main-content .card .card-body a.btn {
  display: none;
  font-family: 'Montserrat', sans-serif;
}

#main-content .card:hover .card-body .card-text-div {
  overflow: hidden;
  background-image: linear-gradient(180deg,#000000 50%,rgba(0,0,0,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  display:inline-block;
}

#main-content .card:hover .card-body a.btn {
  display: block;
  background-color: #5B9D5F;
  border-color: #5B9D5F;
}

#main-content .card.green-card .card-title {
  color: white;
//  font-family: 'Montserrat', sans-serif;
}

#main-content .card.yellow-card .card-title {
  color: #5B9D5F;
//  font-family: 'Montserrat', sans-serif;
}

#main-content .card.green-card .text-short,
#main-content .card.green-card .text-long {
  color: white;
}

#main-content  .card-title {
  font-family: 'Montserrat', sans-serif;
}

#main-content .card.yellow-card .text-short,
#main-content .card.yellow-card .text-long {
}

#main-content .card .text-long {
  display: none;
}

#main-content .card:hover .text-short,
#main-content .card:hover .card-title {
  display: none;
}
#main-content .card:hover .text-long {
  display: block;
}

/* =======================================================
                     MAIN CONTENT SERVICES
   ======================================================= */


#main-content-services {
  position: absolute;
  width: 100%;
  height: calc(100% - 200px);
  top: 200px;
  right: 0;
  background-color: #FFFFFF;
  overflow-y: scroll;
}

/* =======================================================
                     MAIN CONTENT BANDEAU
   ======================================================= */

#main-content-bandeau {
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: #439976;
  height: 200px;
}
@media (max-width:900px){
  #main-content-bandeau {
    visibility: hidden;
  }
  #main-content-services{
    top: 0px;
    height: 100%;
  }
}

#main-content-bandeau #logo-portail {
  max-width: 500px;
  padding-top: 45px !important;
}

#main-content-bandeau #img-bandeau {
  height: 100%;
}

#main-content-bandeau #img-bandeau img {
  object-fit: cover;
}

/* =======================================================
                            MODALS
   ======================================================= */

   
.modal:not(#home-modal):not(#connexion-modal) .modal-content {
  border-radius: 10px !important;
}

.modal:not(#connexion-modal) button.close {
  opacity: 1;
  color: #279A95;
}

.modal button.close:hover {
  background-color: #f1f1f1;
}

#connexion-modal .modal-body form {
  text-align: center;
}

#home-modal .modal-content,
#connexion-modal .modal-content {
  background-color: #439976;
  color: white;
}

#connexion-modal button.close i {
  color: white;
}
#connexion-modal button.close:hover i {
  color: #535353;
}

#pwd-reset-link{
  color: white;
  font-weight: bold;
}

.pwd-link{
  color: white;
  font-weight: bold;
}

/* =======================================================
                          FORM ERROR
   ======================================================= */

input.has-error { border-color: red; }