/*--------------------------- Fiche IMMO ---------------------------------------------------------- */
  
.ref {
    vertical-align: center;
  }
  .text_vertical {
      writing-mode: vertical-rl;
      text-orientation: sideways;
      /* text-orientation: upright; */
      /* text-orientation: mixed ; */
      transform: rotate(180deg);
      /* margin-top: 217px;
      margin-bottom: 300px; */
      font-size: 50px;
      margin: auto;
      padding-top: 190px;
      padding-bottom: 229px;
  }

  .accroche {
      font-weight: bolder;
      font-size: 32px;
      margin-bottom: 10px;
  }
  .price {
    font-size: 4em;
    font-weight: bolder;
    text-align: center;

  }
  .div_fiche_immo {
      background: rgb(252, 251, 251);
  }

  .mr_img {
      margin-bottom: 10px;
      height: 280px;
      min-width: 450px;
      background-size: contain; 
      background-repeat: no-repeat;
  }

  .mr_img2 {
      margin-bottom: 10px;
      height: 280px !important;
      width: 450px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
  }

  .img_p {
      margin-left: 10px;
      margin-right: 10px;
      height: 570px;
      width:810px;
      background-size: contain;
      background-repeat: no-repeat;
  }

  div.p_immo p{
      background: gray;
      color: aliceblue;
      /* margin-left: 10px; */
      
  }

  .p_m1, .p_m2, .p_m3 {
      /* margin-right: 10px; */
      text-align: center;
  }

  .p_m1, .p_m2, .p_m3, .p_m4{
    height: 40px;
    padding-top: 0px;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .p_m1 , .p_m2{
      width:450px;
  }

  .p_m3 {
      width:400px;
  }

  .p_m4 {
      width:320px;
      text-align: center;
  }

  .aside {
      background: grey;
      width: 100px;
      height: auto;
      /* position: absolute; */
      /* margin-left: 247px; */
      margin-right: 0px;
      color: white;
  }

  .img_energy {
    width: 564px;
    height: 351px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .bloc_annonce {
    margin-left: 50px;
  }

  div.infos p{
    width: 560px;
    font-size: 14px;
    font-weight: bolder;
  }

  .energy {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .annonce {
    font-size: 22px;
  }

  p.annonce, p.price{
    margin-bottom: 0px;
  }

  p.annonce {
    width: 1043px;
  }
  /* --------------------  Visuels à diffuser ------------------ */

  div.page-header a {
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .page-header {
    border-radius: 10px;
  }

  @media all and (min-width: 801px) and (max-width: 1540px) {
      .energy {
        text-align: center;
        display: inherit !important;
      }

      div.d-flex.justify-content-between.infos.flex-wrap {
        justify-content: center !important;
        text-align: center;
        margin-top: 20px;
      }
  }

  @media all and (max-width: 800px) {
      .card-img-top {
        width: 290px;
        height: auto;
      }

      .my_flex {
        display: inherit;
      }

      /* ---- login form ---- */
      div.wrapper{ 
        margin-top: 40px;
        width: 350px;
      }

      p a.ml-3 {
        margin-left: inherit !important;
      }

      div.wrapper2{ 
        width: 350px;
        margin-top: 50px;
      }

      img#imgPreview:hover, img#imgPreview1:hover, img#imgPreview2:hover, img#imgPreview3:hover, img#imgPreview4:hover, img.imgPreview:hover {
        width: 300px !important;
        padding-left: inherit !important;
        margin-left: -11px;
      }
      
      .bt_accueil {
        height: 100%;
        margin: auto;
        margin-right: 8px;
        margin-left: 5px;
        padding: 5px;
      }
  
      .my_post{
        font-size: 1.4em;
        padding-top: 25px;
      }

      .bt_accueil, .bt_add, .bt_dec {
        font-size: 14px;
      }

  }
  /* ----------- Form Add and Update ----------------------- */
  .holder {
    height: 50px;
    width: 65px;
    /* border: 2px solid black; */
    border-radius: 20px;
    margin-top: 5px;
  }

  .holder:hover {
    width: 400px;
    height: 230px;
    /* position: absolute; */
    border-radius: 20px;
  }

  img#imgPreview, img#imgPreview1, img#imgPreview2, img#imgPreview3, img#imgPreview4, img.imgPreview {
    max-width: 65px;
    max-height: 50px;
    min-width: 65px;
    min-height: 50px;
    border-radius: 20px;
  }


  img#imgPreview:hover, img#imgPreview1:hover, img#imgPreview2:hover, img#imgPreview3:hover, img#imgPreview4:hover, img.imgPreview:hover {
    width: 390px ;
    height: 210px ;
    max-width: inherit;
    max-height: inherit;
    min-width: inherit;
    min-height: inherit;
    padding-left: 8px;
    padding-top: 8px;
  }

  .pmodif {
    margin-top: 10px;
  }

  .wrapper{ 
    width: 360px; 
    padding: 20px;
    border: solid 2px gray;
    border-radius: 20px;
    margin-top: 250px;
  }

  .wrapper2{
    width: 500px;
    margin: 0 auto;
}

  .body_form{ 
    font: 14px sans-serif;
    text-align: center;
 }

 input[type="file"] {
  margin-top: 5px;
}

.seb_flex{
  display: flex;
  justify-content: center;
}

#file, #file1, #file2, #file3, #file4 {
  margin-top: auto;
  margin-bottom: auto;
}

.display_none {
  display: none;
}

/*------ accueil_login.php -------*/
b.color_user {
  color: rgb(191, 49, 204);
}



/* ------------------------ Vertical Display ------------------------------------------*/

/* Make the image fully responsive */
.carousel-inner img {
  width: 100%;
  height: 1920px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.carousel-item img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}