@media only screen and (max-width:900px){

    .nav_desc{
        display: none;
    }
   hr{
    display: none;
   }
   .logo_crd{
    display: block;
    width: 30%;
    margin: none;
   }
   .btn_abr{
    display: flex;
    float: right;
   }
   .btn_crdo{
    display: flex;
    float: right;
   }
   .btn_abrir{
    display: block;
    width: 100px;
    position: relative;
    bottom: 70px;
    width: 60px;
    height: 60px;
    background-color: #bbdefb;
    border-color: transparent;
    border-radius: 15px;
   }
   .btn_cerrar{
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #e04f5f;
    border-color: transparent;
    border-radius: 15px;
   }
   .header_hm{
    display: inline;
   }
   .modal{
    width: 90vw;
    background-color: #bbdefb;
    border-color: transparent;
   }
   .modal::backdrop{
    background-color: rgba(0, 0, 0, 0.615);
   }
   .logo_hm{
    width: 30%;
    position: relative;
   }
   .hm_element{
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 40px;
    position: relative;
    top: 30px;
   }
   #hm_element1,
   #hm_element2,
   #hm_element3,
   #hm_element4,
   #hm_element4_bis,
   #hm_element5,
   #hm_element6,
   #hm_element7,
   #hm_element8{
    font-size: 18px;
    text-decoration: none;
    color: black;
   }
   #nav a{
    padding: 15px;
   }
   .page-title{
    font-size: 20px;
   }    

}