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

    .logo_crd {
        width: 40%;
    }

    .btn_abrir{
        bottom: 75px;
        right: 25px;
    }
        .btn_cerrar {
            width: 40px;
            height: 40px;
        }

        .modal {
            width: 90vw;
        }

        .logo_hm {
            width: 30%;
        }

        .hm_element {
            padding: 20px;
            gap: 40px;
            top: 30px;
        }

        #hm_element1,
        #hm_element2,
        #hm_element3,
        #hm_element4,
        #hm_element4_bis,
        #hm_element5,
        #hm_element6,
        #hm_element7,
        #hm_element8 {
            font-size: 18px;
        }

        #nav a {
            padding: 15px;
        }




        #side_menu {
            width: 350px;
            bottom: 0px;
            left: 00px;

        }

        .hor_line1,
        .hor_line2,
        .dot1,
        .dot2,
        .img1,
        .img2 {
            display: none;
        }

        .mex,
        .cr {
            width: 350px;
            height: 350px;
        }
.mex{
    top: 50px;
}
        .cr {
            right: 0px;
            top:0px;
            bottom: 900px;
        }
        
        .li_footer a{
            font-size: 10px;   
        }
       .social_link a{
    width: 60px;
    height: 60px;
    line-height: 60px;
    bottom: 10px;    
}
.ul_footer{
    position: relative;
    bottom: 0px;
    right: 0px;
    top: 50px;
    display: block;
    
}
h4{
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    position: relative;
    bottom: 60px;
}
       
    }