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

    .logo_crd {
        width: 40%;
    }

    .btn_abrir {
        width: 100px;
        bottom: 70px;
        width: 60px;
        height: 60px;
}
        .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;
        }
       
        .ul_footer{

    bottom: 0px;
    top: 00px;   
}

    .social_link{
        bottom: 150px;
        right: 0px;
        left: 0px;
        min-width: 400px;
    }
    h4{
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        position: relative;
        bottom: 50px;
    }    
    }