@media (max-width:600px){
 
    /*------------------- NAVBAR -----------------*/
   .navbar ul{
        background: whitesmoke;
        width: 100%;
        margin-top: 80px;
        position: fixed;
        left: 0;
        height: 300px;  
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
        font-size: larger;
        font-weight: 900;
        border-bottom: 2px solid black;
        transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
        transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
    }
    .navbar i{
        display: block;
    }
    #toggle-menu:checked ~ .navbar-list {
        transform: translateY(0);
        display: flex;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    /*------------------- HERO -----------------*/

    #Hero{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 100%;
        height: auto;
        max-width: 400px;
        
    }

    #Hero .Img--Hero img{
        max-width: 370px;
        margin-top: 3rem;
    }

    #Hero .Textos--Hero{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    #Hero .Textos--Hero h1 {
        max-width: 400px;
        font-size: 26px;
        margin-bottom: 2rem;
        Text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    #Hero .Textos--Hero h2{
        max-width: 300px;
        font-size: 20px;
    }

    #Hero .Textos--Hero h3{
        max-width: 300px;
        font-size: 16px; 
    }

    #Hero .Btn--Hero{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 400px;
    }

    #Hero .Btn--Hero .IniciaSesionBtn{
        font-size: 15px;
        max-width: 8rem;
        padding: 13px 13px;
    }

    #Hero .Btn--Hero .Registro{
        font-size: 15px;
        max-width: 8rem;
        padding: 13px 13px;
    }

    /*----------------- MISION SECCION --------------*/

    #MisionSeccion{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 320px;
    }

    #MisionSeccion h2{
        text-align: center;
        font-size: 20px;
        line-height: 1.5;
        padding: 15px 15px;
    }

    #MisionSeccion p{
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 280px;
        line-height: 1.8;
    }

    /*-------------------------- EL PROYECTO AND CARDS --------------*/

    #ElProyecto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 300px;

    }


    #ElProyecto h3{
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 300px;

    }

    #CardContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 280px;
        padding: 10px;

    }

    #CardContainer .Cards-Proyecto{
        width: 100%;
        height: auto;
        max-width: 280px;  /*VER SI ME GUSTA COMO QUEDA QUE LAS IMG SOBRESALGAN */
    }

    #CardContainer .Cards-Proyecto h3{
        Text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        
    }
    

    #CardContainer .Cards-Proyecto p{
        padding: 5px;
    }


    /*------------------------ MÁS INFO PROYECTO -------------*/


    #MásInfoProyecto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 320px;
        margin: 1rem auto;

    }


    #MásInfoProyecto h3{     
        text-align: center;
        font-size: 20px;
        line-height: 1.5;
        padding: 15px 15px;   
    }

    #MásInfoProyecto p{
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 280px;
        line-height: 1.8;
        margin: 1.5rem auto;
    }

    /*--------------------------------- CONTACTO ------------------------*/

    #Contacto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    #Contacto h3{
        font-size: 27px;
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    #Contacto p{
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    #Contacto .BTNContacto a{
        width: 100%;
        height: auto;
        max-width: 8rem;
    }

    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer h4{
        width: 100%;
        height: auto;
        max-width: 400px;
        font-size: 17px;
        margin-top: 1rem;
    }

    /*------------------- FORMULARIOS -----------------*/

    #Registro{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        max-width: 500px;
    }

    #Registro img{
        max-width: 340px;
        
    }

    form{
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 300px;
    }

    form h2{
        width: 100%;
        height: auto;
        max-width: 400px;
        text-align: center;
        font-size: 27px;
        line-height: 1.8;
    }

    .inputGroup{
        max-width: 300px;
    }

    .inputGroup .TerminosyCondiciones{
        text-align: center;
        max-width: 20rem;
        font-size: 16px;
    }

    .BTNRegistro{
        width: 7rem;
        padding: 13px 10px;
        text-align: center;
    }

    .TieneCuenta p a{
        font-size: 22px;
    }



}    

/*-------------------//// TABLET RESPONSIVE ////----------*/


@media (min-width: 601px) and (max-width: 1024px) {

    .navbar ul{
        font-size: 18px;
    }

    #Hero{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 900px;
        padding: 45px;
        margin-top: 6.8rem;
    }

    #Hero .Img--Hero img{
        max-width: 600px;
    }

    #Hero .Textos--Hero{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #Hero .Textos--Hero h1{
        font-size: 35px;
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 600px;

    }

    #Hero .Textos--Hero h2{
        font-size: 24px;
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 600px;
    }

    #Hero .Textos--Hero h3{
        font-size: 19px;
        text-align: center;
        width: 100%;
        height: auto;
        max-width: 600px;
        margin-top: 1rem;
    }

    #Hero .Btn--Hero{
        display:flex;
        justify-content: center;
        align-items: center;
    }

    #Hero .Btn--Hero .IniciaSesionBtn{
        font-size: 15px;
        padding: 14px 14px;
        max-width: 8rem;
    }

    #Hero .Btn--Hero .Registro{
        font-size: 15px;
        padding: 14px 14px;
        max-width: 8rem;
    }

    /*----------------- MISION SECCION --------------*/


    #MisionSeccion{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 800px;
    }

    #MisionSeccion h2{
        font-size: 19px;
        padding: 15px 15px;
    }

    #MisionSeccion p{
        text-align: center;
    }

    /*-------------------------- EL PROYECTO AND CARDS --------------*/

    #ElProyecto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 700px;
        margin: 1rem auto;
    }

    #ElProyecto h3{
       font-weight: 900; 
    }

    #CardContainer{
        display: flex;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        height: auto;
        max-width: 700px;
    }

    #CardContainer .Cards-Proyecto{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 200px;
    }

    #CardContainer .Cards-Proyecto img{
        max-width: 185px;
    }


    #CardContainer .Cards-Proyecto p{
        font-size: 15px;
        padding: 5px;
    }

    /*------------------------ MÁS INFO PROYECTO -------------*/

    #MásInfoProyecto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 700px;
        margin: 1rem auto;
    }

    #MásInfoProyecto h3{
        font-size: 20px;
        padding: 15px 15px;
    }

    #MásInfoProyecto p{
        width: 100%;
        height: auto;
        max-width: 600px;
        margin: 1rem auto;
    }

    /*--------------------------------- CONTACTO ------------------------*/

    #Contacto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 700px;
    }

    #Contacto h3{
        font-weight: 900px;
    }


    #Contacto p{
        text-align: justify;
    }

    footer{
        width: 100%;
    }

    footer h4{
        margin-top: 2rem;
    }

    /*-------------------REGISTRO AND INICIO DE SESIÓN---------------------*/

    #Registro{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 1222px;

    }

    #Registro img{
        max-width: 400px;
    }

    /*------------------- FORMULARIOS ---------------------*/

    form{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 1224px;
        margin: 7rem 2rem;
    }

    form h2{
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        max-width: 600px;
        font-size: 30px;
    }

    .inputGroup {
        display: flex;
        justify-content: center;
        align-items: start;
    }

    .TerminosyCondiciones a{
        font-size: 16px;
    }

}