@charset "UTF-8";

*{
    padding:0;
    margin:0;
    text-decoration: none;
    font-family: 'Roboto Condensed','Roboto', sans-serif;
    scroll-behavior: smooth;
    list-style:none;
    box-sizing: border-box;
}

.mensajeForm{
    color:red;
    width:80%;
    text-align: center;
    font-size:100%;
    margin:auto;
    display:none;
}
.visible{
    display:flex;
}

@media screen and (max-width:279px){
    .barraNavegacion{
        background: rgb(25, 122, 179);
        
        width:100%;
        
        position:fixed;
        z-index:9;
        
        display:flex;
        background:linear-gradient(100deg, rgb(53, 140, 191),rgb(19, 78, 112));

    }
    
    .barraNavegacion h1{
        width:6em;
        font-size: 1.5em;
        display:flex;
        white-space: nowrap;
    }
    .titulo{
        float:left;
        margin:0.5em;
    }
    .titulo h4{
        font-size: 1em;
    }
    

    
    .barraNavegacion ul{
        position:fixed;
        display:flex;
        width:100%;
        height:100vh;
        flex-direction:column;
        text-align:center;
        top:-150%;


        background:rgb(19, 78, 112);

        background:linear-gradient(220deg, rgb(53, 140, 191), rgb(19, 78, 112));
        transition-duration:0.5s;
        z-index:9;
        font-size:1em;
        overflow:hidden;
    }


    .barraNavegacion ul li button{
        outline:none;
        background-color: transparent;
        border:none;
        cursor:pointer;
        color:#FFF;
        text-transform: uppercase;
        transition-duration:0.3s;

        padding:1em;
    }

    
    .barraNavegacion ul li button:hover{
        color:#FFF;
    }

    #menu{
        position: relative;
        background:transparent;
        border:none;
        outline:none;
        color:#fff;
        float:right;

        font-size:2em;
        margin:auto 0.5em auto auto;
        cursor:pointer;
        z-index:1;
    }
    #contenedorCerrar{
            
        width:100%;
        display:flex;
        position: relative;
    }

    #menuNavegacion li button{
        font-size:1.4em;
    }


    #cerrar{
        width:auto;
        font-size:2em;
        
        background:transparent;
        outline:none;
        border:none;
        cursor:pointer;
        color:#fff;
        margin:0.5em 0.5em auto auto;
        
        

    }

    
    .fondo{
        background: #fff no-repeat 45%;
        background-size: cover;
        width:100%;
        background-image: url('/imagenes/taller.jpg');
        filter:brightness(80%);
        height:60vh;

    }
    .tituloMedio{
        position: absolute;
        text-align:center;
        z-index:1;
        margin:0 auto;
        transform:translateY(-20em);
        text-transform: uppercase;
        left:0;
        right:0;
    }
    
    .tituloMedio div{
        text-align:center;
    }
    
    .tituloMedio h1{ 
        
        color:#FFF;
        padding:0.5em;
        border-radius:0.2em;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 200%;
        text-shadow: 3px 3px 2px #000;
        /*margin: 1em auto 0;*/
        margin:80px auto 0;
    }
    
    .instagram{/*contenedor palabra instagram para poder centrarse*/
        position:absolute;
        width:100%;
        transform:translateY(-5em);
    }
    .instagram h4 a{ /*palabra instagram arriba del logo*/
        width:100%;
        color:#fff;
        font-family: 'Sansita Swashed', cursive;
        font-size: 1.3em;
    }
    
    .instagram h4{ /*palabra instagram arriba del logo*/
        text-align:center;
        width:100%;
    }
    
    .iconoInstagram{ /*contenedor span del A en donde esta I*/
        position:absolute;
        transform:translateY(-3em);
        width:100%;
        align-content: center;
        align-content:center;
    }
    .iconoInstagram div{
        overflow:hidden;
        text-align:center;
    }
    
    .iconoInstagram i{ /*Icono instagram*/
        font-size:2em;
        color:#fff;
        margin-top:0;
    }
    
    .servicios{ /*fondo en negro */
        height:initial;
        background: #fff fixed;
        background-size: auto;
        background-image: url('imagenes/fondoOscuroServicios.jpg');
    }
    
    .servicios h1{ /*"Servicios"*/
        color:#fff;
        text-transform: uppercase;
        text-align:center;
        padding-top: 0.4em;
        font-size:2.5em;
    
        height:1.5em;
    }
    .lineaServicios{ /*Linea de abajo de servicios*/
        display:flex;
        margin:auto;
        border-top:0.2rem solid #fff;
        width:8em;
    }
    .descripcionServicios{ /*Servicios ofrecidos e iconos*/
        height:auto; /*500px originalmente*/
        flex-direction: column;
        width:auto; /*60em originalmente*/
        margin: 2em auto;
    }
    
    .elemento{ /*cada div en donde esta el logo, el titulo y la info*/
        color:#fff;
        width:100%;
        padding-bottom:2em;
    }
    .elemento i{ /*icono reparaciones, pintura, tapiceria*/
        font-size:4.5em;
        border:0.2rem solid #fff;
        
        padding:8%;
        border-radius: 100%;
        display:flex;
        margin:auto;

        width:fit-content;
        width:-webkit-fit-content;
        width:-o-fit-content;
        width:-ms-fit-content;
        width:-moz-fit-content;
    }
    
    .elemento h2{ /*titulo abajo del icono*/
        text-align:center;
        margin:0.4em 0 0;
        font-size: 2em;
        text-transform: uppercase;
    }
    
    .elemento h3{ /*especificaciones abajo del titulo (servicios)*/
        font-size:1.2em;
        text-align: center;
        padding:0.2em 1em;
        font-family: 'Cairo', sans-serif;
    }
    
    .fondo h4{
        margin:60vh auto;
        position:absolute;
        filter:none;
        overflow:hidden;
        width:100%;
        text-align:center;
    }
    .fondo a{
        color:rgb(255, 255, 255);
        overflow:hidden;
        width:100%;
    }
    
    .tituloFotos{ /*h2 y h3 de FOTOS*/
        text-align:center;
        padding-top:0;
        margin:-2em 0 0;
    }
    .tituloFotos h2{
        font-size: 3em;
        text-transform: uppercase;
        padding:0.5em 0 0.2em;
    }
    
    .lineaLogros{
        border:none;
        border-bottom:0.2rem solid #000;
        display:flex;
        margin:auto;
        width:10em;
        
    }
    
    .contenedorFotos{
        display:flex;
    }
    
    .tituloFotos h3{
        padding:0.8em;
        font-size: 1.5em;
        font-family: 'Cairo', sans-serif;
    }
    
    
    .fotos{ /*contenedor de las fotos*/
        overflow:hidden;   
        width:90%;
        margin:0 auto 2em;
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 3;
        border-radius:0.2em;
    }
    
    .fotos img{
        object-fit: cover;
        width:100%;
        height:8em;
        filter:brightness(80%);
    }
    
    .sobreNosotros{
        display:flex;
        width:100%;
        background: #fff fixed repeat;
        background-position:center center;
        background-size: auto;
        background-image:url('imagenes/herramientas.jpg');
        height:100%;
        
    }
    
    .divSobreNosotros{
        margin:4em auto;
        background-color: #fff;
        width:40em;
        height:100%;
        text-align:center;
        border-radius: 0.2em;
    }
    
    .divSobreNosotros h1{
        margin:0.5em auto 0.4em;
        font-size: 2.5em;
        text-transform:uppercase;
    }
    .lineaSobreNosotros{
        border:none;
        border-bottom:0.2em  solid black;
        width:8em;
        margin: 0 auto;
        display:flex;
    }
    
    .divSobreNosotros h3{
        font-family: 'Cairo', sans-serif;
        font-size:1.3em;
        margin:1em auto;
        width:80%;
        text-align: justify;
    } 
    
    .contacto{
        
        background-color:rgb(27, 26, 26);
        height:auto;
    }
    
    .contacto img{
        display:flex;
        position:relative;
        margin: 0 auto;
        padding:1em;
        width:15em; /*20em originalmente*/
    }
    
    .centrarContacto{
        margin:-1.5em auto 0;
        width:100%; /*48em anteriormente*/
        height:auto;
        overflow:hidden;
    }
    
    .divContacto{
        background-color:#fff;
        display:flex;
        
        flex-direction: column-reverse;
        
        width:100%;
        height: auto; /*Pasar a medidas necesarias en % y en el contacto tambien*/
        
        
    }
    
    .divContacto form{
        
        width:auto;
        
        overflow:hidden;
    }
    
    .divContacto form h1{
        font-size: 3em;
        text-transform: uppercase;
        margin:0 auto;
        padding-top:0.2em;
        text-align:center;
    }
    
    .contacto form input{
        outline:none;
        display:flex;
        margin:1em auto;
        width:80%;
        border:1px solid #aaa;
        height:3em;
        font-size:1em;
        white-space: 10px;
        padding-left:0.5em;
        font-family: 'Cairo', sans-serif;
        border-radius:0.2em;
    }
    
    .contacto form input:focus{
        border:2px solid rgb(24, 104, 150);
    }
    
    .contacto textarea{
        display:flex;
        font-size:1em;
        padding:0.5em;
        margin:0 auto 1.5em;
        height:6em;
        width:80%;
        resize:none;
        outline:none;
        font-family: 'Cairo', sans-serif;
        border:1px solid #aaa;
        border-radius:0.2em;

    }
    
    .contacto textarea:focus{
        border:0.13em solid rgb(24, 104, 150);
    }
    
    #enviar{
        display:none;
    }
    #labelEnviar{
        color:#fff;
        display:flex;
        width:80%;
        border:1px solid rgb(36, 36, 36);
        margin:1em auto;
        font-family: 'Cairo', sans-serif;
        justify-content:center;
        cursor:pointer;
        background:linear-gradient(60deg,rgb(53, 46, 46) 50%,  rgb(24, 104, 150) 50.1%);
        transition: all 1s;
        font-size:1.1em;
        border-radius: 0.2em;
    }
    
    #labelEnviar:hover{
        background: linear-gradient(60deg,rgba(53, 46, 46, 0.950) 50%,  rgba(24, 104, 150, 0.950) 50.1%);
    }
    
    
    .atencion{ /*lado oscuro de contacto al desarrollador, FORMULARIO ABAJO*/
        width:100%;
        height:auto;
        
        margin:auto 0 auto;
    
        background-color:rgb(27, 26, 26);
    }
    
    .atencion h3{
        color:#FFF;
        font-family: 'Cairo', sans-serif;
        padding:1em;
        font-size: 1em;
        text-align:center;
    }
    
    .atencion a{ /*Email*/
        font-family: 'Cairo', sans-serif;
        text-decoration: underline;
        color:white;
    }
    
    
    footer{
        background-color:rgb(27, 26, 26);
        padding: 0.2em 0.5em 0.5em;
    }
    
    footer h3{
        color:white;
        font-size:0.8em;
    }
    footer a{
        text-decoration: underline;
        margin:auto;
        color:rgb(0,132,255);
        font-size:80%;
    }

    #logros{ /*en este div esta lo que lleva a "logros"*/
        
        position:absolute;
        
        margin:-6em 0;
    }
    #nosotros{ /*div en donde se lleva a logros*/
        position:absolute;
    }
    #contacto{/*div en donde se lleva a contacto*/
        margin:-4.5em 0; 
        position:absolute;
    }

}

@media screen and (min-width:280px){
    .barraNavegacion{
        background: rgb(25, 122, 179);
        
        width:100%;
        
        position:fixed;
        z-index:9;
        
        display:flex;
        background:linear-gradient(100deg, rgb(53, 140, 191),rgb(19, 78, 112));

    }
    
    .barraNavegacion h1{
        width:6em;
        font-size: 1.5em;
        display:flex;
        white-space: nowrap;
    }
    .titulo{
        float:left;
        margin:0.5em;
    }
    .titulo h4{
        font-size: 1em;
    }
    

    
    .barraNavegacion ul{
        position:fixed;
        display:flex;
        width:100%;
        height:100vh;
        flex-direction:column;
        text-align:center;
        top:-150%;


        background:rgb(19, 78, 112);

        background:linear-gradient(220deg, rgb(53, 140, 191), rgb(19, 78, 112));
        transition-duration:0.5s;
        z-index:9;
        font-size:1em;
        overflow:hidden;
    }


    .barraNavegacion ul li button{
        outline:none;
        background-color: transparent;
        border:none;
        cursor:pointer;
        color:#FFF;
        text-transform: uppercase;
        transition-duration:0.3s;

        padding:1em;
    }

    
    .barraNavegacion ul li button:hover{
        color:#FFF;
    }

    #menu{
        position: relative;
        background:transparent;
        border:none;
        outline:none;
        color:#fff;
        float:right;

        font-size:2em;
        margin:auto 0.5em auto auto;
        cursor:pointer;
        z-index:1;
    }
    #contenedorCerrar{
            
        width:100%;
        display:flex;
        position: relative;
    }

    #menuNavegacion li button{
        font-size:1.4em;
    }


    #cerrar{
        width:auto;
        font-size:2em;
        
        background:transparent;
        outline:none;
        border:none;
        cursor:pointer;
        color:#fff;
        margin:0.5em 0.5em auto auto;
        
        

    }

    
    .fondo{
        background: #fff no-repeat 45%;
        background-size: cover;
        width:100%;
        background-image: url('/imagenes/taller.jpg');
        filter:brightness(80%);
        height:60vh;

    }
    .tituloMedio{
        position: absolute;
        text-align:center;
        z-index:1;
        margin:0 auto;
        transform:translateY(-20em);
        text-transform: uppercase;
        left:0;
        right:0;
    }
    
    .tituloMedio div{
        text-align:center;
    }
    
    .tituloMedio h1{ 
        
        color:#FFF;
        padding:0.5em;
        border-radius:0.2em;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 200%;
        text-shadow: 3px 3px 2px #000;
        /*margin: 1em auto 0;*/
        margin:80px auto 0;
    }
    
    .instagram{/*contenedor palabra instagram para poder centrarse*/
        position:absolute;
        width:100%;
        transform:translateY(-5em);
    }
    .instagram h4 a{ /*palabra instagram arriba del logo*/
        width:100%;
        color:#fff;
        font-family: 'Sansita Swashed', cursive;
        font-size: 1.3em;
    }
    
    .instagram h4{ /*palabra instagram arriba del logo*/
        text-align:center;
        width:100%;
    }
    
    .iconoInstagram{ /*contenedor span del A en donde esta I*/
        position:absolute;
        transform:translateY(-3em);
        width:100%;
        align-content: center;
        align-content:center;
    }
    .iconoInstagram div{
        overflow:hidden;
        text-align:center;
    }
    
    .iconoInstagram i{ /*Icono instagram*/
        font-size:2em;
        color:#fff;
        margin-top:0;
    }
    
    .servicios{ /*fondo en negro */
        height:initial;
        background: #fff fixed;
        background-size: auto;
        background-image: url('imagenes/fondoOscuroServicios.jpg');
    }
    
    .servicios h1{ /*"Servicios"*/
        color:#fff;
        text-transform: uppercase;
        text-align:center;
        padding-top: 0.4em;
        font-size:2.5em;
    
        height:1.5em;
    }
    .lineaServicios{ /*Linea de abajo de servicios*/
        display:flex;
        margin:auto;
        border-top:0.2rem solid #fff;
        width:8em;
    }
    .descripcionServicios{ /*Servicios ofrecidos e iconos*/
        height:auto; /*500px originalmente*/
        flex-direction: column;
        width:auto; /*60em originalmente*/
        margin: 2em auto;
    }
    
    .elemento{ /*cada div en donde esta el logo, el titulo y la info*/
        color:#fff;
        width:100%;
        padding-bottom:2em;
    }
    .elemento i{ /*icono reparaciones, pintura, tapiceria*/
        font-size:4.5em;
        border:0.2rem solid #fff;
        
        padding:8%;
        border-radius: 100%;
        display:flex;
        margin:auto;

        width:fit-content;
        width:-webkit-fit-content;
        width:-o-fit-content;
        width:-ms-fit-content;
        width:-moz-fit-content;
    }
    
    .elemento h2{ /*titulo abajo del icono*/
        text-align:center;
        margin:0.4em 0 0;
        font-size: 2em;
        text-transform: uppercase;
    }
    
    .elemento h3{ /*especificaciones abajo del titulo (servicios)*/
        font-size:1.2em;
        text-align: center;
        padding:0.2em 1em;
        font-family: 'Cairo', sans-serif;
    }
    
    .fondo h4{
        margin:60vh auto;
        position:absolute;
        filter:none;
        overflow:hidden;
        width:100%;
        text-align:center;
    }
    .fondo a{
        color:rgb(255, 255, 255);
        overflow:hidden;
        width:100%;
    }
    
    .tituloFotos{ /*h2 y h3 de FOTOS*/
        text-align:center;
        padding-top:0;
        margin:-2em 0 0;
    }
    .tituloFotos h2{
        font-size: 3em;
        text-transform: uppercase;
        padding:0.5em 0 0.2em;
    }
    
    .lineaLogros{
        border:none;
        border-bottom:0.2rem solid #000;
        display:flex;
        margin:auto;
        width:10em;
        
    }
    
    .contenedorFotos{
        display:flex;
    }
    
    .tituloFotos h3{
        padding:0.8em;
        font-size: 1.5em;
        font-family: 'Cairo', sans-serif;
    }
    
    
    .fotos{ /*contenedor de las fotos*/
        overflow:hidden;   
        width:90%;
        margin:0 auto 2em;
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 3;
        border-radius:0.2em;
    }
    
    .fotos img{
        object-fit: cover;
        width:100%;
        height:8em;
        filter:brightness(80%);
    }
    
    .sobreNosotros{
        display:flex;
        width:100%;
        background: #fff fixed repeat;
        background-position:center center;
        background-size: auto;
        background-image:url('imagenes/herramientas.jpg');
        height:100%;
        
    }
    
    .divSobreNosotros{
        margin:4em auto;
        background-color: #fff;
        width:40em;
        height:100%;
        text-align:center;
        border-radius: 0.2em;
    }
    
    .divSobreNosotros h1{
        margin:0.5em auto 0.4em;
        font-size: 2.5em;
        text-transform:uppercase;
    }
    .lineaSobreNosotros{
        border:none;
        border-bottom:0.2em  solid black;
        width:8em;
        margin: 0 auto;
        display:flex;
    }
    
    .divSobreNosotros h3{
        font-family: 'Cairo', sans-serif;
        font-size:1.3em;
        margin:1em auto;
        width:80%;
        text-align: justify;
    } 
    
    .contacto{
        
        background-color:rgb(27, 26, 26);
        height:auto;
    }
    
    .contacto img{
        display:flex;
        position:relative;
        margin: 0 auto;
        padding:1em;
        width:15em; /*20em originalmente*/
    }
    
    .centrarContacto{
        margin:-1.5em auto 0;
        width:100%; /*48em anteriormente*/
        height:auto;
        overflow:hidden;
    }
    
    .divContacto{
        background-color:#fff;
        display:flex;
        
        flex-direction: column-reverse;
        
        width:100%;
        height: auto; /*Pasar a medidas necesarias en % y en el contacto tambien*/
        
        
    }
    
    .divContacto form{
        
        width:auto;
        
        overflow:hidden;
    }
    
    .divContacto form h1{
        font-size: 3em;
        text-transform: uppercase;
        margin:0 auto;
        padding-top:0.2em;
        text-align:center;
    }
    
    .contacto form input{
        outline:none;
        display:flex;
        margin:1em auto;
        width:80%;
        border:1px solid #aaa;
        height:3em;
        font-size:1em;
        white-space: 10px;
        padding-left:0.5em;
        font-family: 'Cairo', sans-serif;
        border-radius:0.2em;
    }
    
    .contacto form input:focus{
        border:2px solid rgb(24, 104, 150);
    }
    
    .contacto textarea{
        display:flex;
        font-size:1em;
        padding:0.5em;
        margin:0 auto 1.5em;
        height:6em;
        width:80%;
        resize:none;
        outline:none;
        font-family: 'Cairo', sans-serif;
        border:1px solid #aaa;
        border-radius:0.2em;

    }
    
    .contacto textarea:focus{
        border:0.13em solid rgb(24, 104, 150);
    }
    
    #enviar{
        display:none;
    }
    #labelEnviar{
        color:#fff;
        display:flex;
        width:80%;
        border:1px solid rgb(36, 36, 36);
        margin:1em auto;
        font-family: 'Cairo', sans-serif;
        justify-content:center;
        cursor:pointer;
        background:linear-gradient(60deg,rgb(53, 46, 46) 50%,  rgb(24, 104, 150) 50.1%);
        transition: all 1s;
        font-size:1.1em;
        border-radius: 0.2em;
    }
    
    #labelEnviar:hover{
        background: linear-gradient(60deg,rgba(53, 46, 46, 0.950) 50%,  rgba(24, 104, 150, 0.950) 50.1%);
    }
    
    
    .atencion{ /*lado oscuro de contacto al desarrollador, FORMULARIO ABAJO*/
        width:100%;
        height:auto;
        
        margin:auto 0 auto;
    
        background-color:rgb(27, 26, 26);
    }
    
    .atencion h3{
        color:#FFF;
        font-family: 'Cairo', sans-serif;
        padding:1em;
        font-size: 1em;
        text-align:center;
    }
    
    .atencion a{ /*Email*/
        font-family: 'Cairo', sans-serif;
        text-decoration: underline;
        color:white;
    }
    
    
    footer{
        background-color:rgb(27, 26, 26);
        padding: 0.2em 0.5em 0.5em;
    }
    
    footer h3{
        color:white;
        font-size:0.8em;
    }
    footer a{
        text-decoration: underline;
        margin:auto;
        color:rgb(0,132,255);
        font-size:80%;
    }

    #logros{ /*en este div esta lo que lleva a "logros"*/
        
        position:absolute;
        
        margin:-6em 0;
    }
    #nosotros{ /*div en donde se lleva a logros*/
        position:absolute;
    }
    #contacto{/*div en donde se lleva a contacto*/
        margin:-4.5em 0; 
        position:absolute;
    }

}

@media screen and (min-width: 360px){
    .tituloMedio h1{
        margin: 1em auto;
        font-size:220%;
    }
    .elemento i{
        font-size:5.8em;
    }
    .elemento h3{
        font-size:1.4em;
    }
    .servicios{
        height: auto;
    }
    .tituloFotos{
        margin:2em auto 0;
    }

    #logros{/*div que lleva a logros*/
        margin:4em;
    }
    .atencion h3{
        text-align:center;
    }

    .tituloFotos h2{
        padding:0;
        margin: 1em auto 0;
        transform:translateY(-0.6em);
    }
    .lineaLogros{
        transform: translateY(-1em);
    }

    .tituloFotos h3{
        transform: translateY(-0.4em);
        margin:0.4em auto;
        padding:0;
        font-size:140%;
    }
    
    #logros{ /*Linea que lleva a logros*/
        margin:-7em;
        position:absolute;
    }
    .divContacto form input, .divContacto form textarea, #labelEnviar{
        width:65%;
    }
    

}

/*----------------------------------------------------------------------------------*/

@media screen and (min-width:400px){
    .tituloFotos h2{
        padding:0;
    }
    

    .tituloFotos h2{
        transform: translateY(-0.5em);
    }
    .lineaLogros{
        transform:translateY(-0.5em)
    }
    
}

@media screen and (min-width:445px){ /*poner los servicios juntos, falta terminar*/
    .elemento i{
        font-size:7em;
        border-radius:20em;
    }

    .tituloMedio h1{
        margin:1em auto 0;
    }

    .barraNavegacion h1{
        font-size:2em;
    }

    #logros{
        position:absolute;
        margin:-7em;
    }
    .tituloFotos h2{
        margin:1.2em auto auto;
    }

    .fotos{
        width:80%;
    }
    
    
}


@media screen and (min-width:475px){
    .descripcionServicios{
        flex-direction: row;
        height:auto;
        display: flex;
        
    }
    .elemento{
        margin:0 auto 0;
        flex-direction: column;
        width:33%;
        display:flex;
        float:right;        
        
    }

    .elemento i{
        font-size:4em;
        border-radius: 50%;
        width:auto;
        padding:0.3em;
    }
    .elemento h2{
        font-size:1.5em;
        margin:0.5em auto 0;
    }

    .elemento h3{
        font-size:90%;
        
    }

    .fotos{
        margin: 0 auto 3em;
    }

    .atencion h3{
        margin: auto 2em;
    }
    .tituloMedio h1{
        font-size:220%;
    }
}

@media screen and (min-width:750px){

    .fotos{
        width:75%;
    }
    .contacto{
        background:linear-gradient(60deg, rgb(24, 104, 150) 50%,rgb(53, 46, 46) 50.1%);
    }
    .divContacto{
        margin:1em auto 2em;
        flex-direction: row;
        width:85%;
        border:2px solid #000;
        height:30em;
        overflow:hidden;
        border-radius:0.2em;
    }
    .divContacto form{
        width:60%;
        padding:0 2em;
        
    }
    .divContacto form h1{
        margin: 0.4em auto 0;
    }
    .atencion{
        height:36em;
        width:40%;
    }
    .tituloMedio h1{
        font-size:250%;
        text-shadow: 4px 4px 3px #000;
    }
}




/*-----------------------------------------------------------------------------------------------*/




@media screen and (min-width:995px){

    .barraNavegacion{
        position:fixed;
        z-index:9;
        width:100%;
    }

    .barraNavegacion h1{
        font-size: 2.2em;
        display:flex;
    }
    .titulo{
        margin:0.5em 2em;
        width:initial;
    }
    .titulo h4{
        font-size: 1.3em;
    }
    

    .barraNavegacion ul{
        float:right;
        margin-right:3em;
        white-space:nowrap;
    }

    .barraNavegacion ul li{
        display:inline-block;
        padding-left:1em;
    }
    .barraNavegacion ul li button{
        outline:none;
        background-color: transparent;
        border:none;
        cursor:pointer;
        color:#fff;
        font-size: 1.4em;
        text-transform: uppercase;
        transition-duration:0.3s;
    }

    .barraNavegacion ul li button:hover{
        color:#ddd;
    }

    .fondo{
        background: #fff fixed no-repeat 45% 100%;
        background-size: cover;
        background-image: url('/imagenes/taller.jpg');
        filter:brightness(80%);
        height:80vh;
    }
    .tituloMedio{
        position: absolute;
        text-align:center;
        z-index:1;
        margin:0 auto 0;
        transform:translateY(-62vh);
        width:100%;
        text-transform: uppercase;
        font-size:140%;
    }

    .tituloMedio div{
        text-align:center;
    }



    .instagram{/*contenedor palabra instagram para poder centrarse*/
        position:absolute;
        width:100%;
        transform:translateY(-4.2em);
    }
    .instagram h4 a{ /*palabra instagram arriba del logo*/
        width:100%;
        color:#fff;
        font-family: 'Sansita Swashed', cursive;
        font-size: 1.3em;
    }

    .instagram h4{ /*palabra instagram arriba del logo*/
        text-align:center;
        width:100%;
    }

    .iconoInstagram{ /*contenedor span del A en donde esta I*/
        position:absolute;
        transform:translateY(-2.4em);
        width:100%;
        align-content: center;
        align-content:center;
    }
    .iconoInstagram div{
        overflow:hidden;
        text-align:center;
    }

    .iconoInstagram i{ /*Icono instagram*/
        font-size:2em;
        color:#fff;
        margin-top:0;
    }

    .servicios{ /*fondo en negro */
        background: #fff fixed no-repeat;
        background-size: cover;
        background-image: url('imagenes/fondoOscuroServicios.jpg');
        padding-bottom:1em;
    }

    .servicios h1{ /*"Servicios"*/
        color:#fff;
        text-transform: uppercase;
        text-align:center;
        padding-top: 0.5em;
        font-size:3em;

        height:1.5em;
    }
    .lineaServicios{ /*Linea de abajo de servicios*/
        display:flex;
        margin:auto;
        border-top:0.2rem solid #fff;
        width:20em;
    }
    .descripcionServicios{ /*Servicios ofrecidos e iconos*/
        width:100%;
        margin: 2em auto 0.5em;
    }

    .elemento{ /*cada div en donde esta el logo, el titulo y la info*/
        color:#fff;
        width:33%;
        float:left;
        padding:0;
        
    }
    .elemento i{ /*icono reparaciones, pintura, tapiceria*/
        font-size:6em;
        border:0.2rem solid #fff;
        border-radius: 50%;
        display:flex;
        margin: 1rem auto;
    }

    .elemento h2{ /*titulo abajo del icono*/
        text-align:center;
        margin:0.8em 0 0.5em;
        font-size: 2em;
        text-transform: uppercase;
    }

    .elemento h3{ /*especificaciones abajo del titulo (servicios)*/
        font-size:1.2em;
        text-align: center;
        padding:0.5em 1em;
        font-family: 'Cairo', sans-serif;
    }

    .fondo h4{
        margin:60vh auto;
        position:absolute;
        filter:none;
        overflow:hidden;
        width:100%;
        text-align:center;
    }
    .fondo a{
        color:rgb(255, 255, 255);
        overflow:hidden;
        width:100%;
    }

    .tituloFotos{ /*h2 y h3 de FOTOS*/
        text-align:center;
    }
    .tituloFotos h2{
        font-size: 3em;
        text-transform: uppercase;
        padding:0;
        margin:0.8em auto 0.3em;
    }

    .lineaLogros{
        border:none;
        border-bottom:0.2rem solid #000;
        display:flex;
        margin:auto;
        width:20em;
        transform: translateY(-1.4em)
        
    }

    .contenedorFotos{
        display:block;
    }

    .tituloFotos h3{
        font-size: 1.5em;
        font-family: 'Cairo', sans-serif;
    }


    .fotos{ /*contenedor de las fotos*/
        overflow:hidden;
        width:60%;
    }

    .fotos img{
        float:right;
        object-fit: cover;
        filter:brightness(80%);
    }

    .sobreNosotros{
        display:flex;
        width:100%;
        background: #fff fixed repeat;
        background-position:center center;
        background-size: auto;
        background-image:url('imagenes/herramientas.jpg');
        height:100%;
        
    }

    .divSobreNosotros{
        margin:5em auto;
        background-color: #fff;
        width:40em;
        height:100%;
        text-align:center;
    }

    .divSobreNosotros h1{
        margin:1em auto 0.4em;
        font-size: 2.5em;
        text-transform:uppercase;
    }
    .lineaSobreNosotros{
        border:none;
        border-bottom:0.2em  solid black;
        width:8em;
        margin: 0 auto;
        display:flex;
    }

    .divSobreNosotros h3{
        font-family: 'Cairo', sans-serif;
        font-size:1.3em;
        margin:1.5em auto 2.5em;
    } 

    .contacto{
        
        background: linear-gradient(60deg, rgb(24, 104, 150) 50%,rgb(53, 46, 46) 50.1%);
        height:52em; /*pasar a porcentaje*/
    }

    .contacto img{
        display:flex;
        position:relative;
        margin: 0 auto;
        padding:3em 0 0;
        width:20em;
    }

    .centrarContacto{
        margin:0 auto;
        width:48em;
        height:67%;
        overflow:hidden;
        border-top:none;
        border-left:none;
    }

    .divContacto{
        background-color:#fff;
        
        margin:0;
        
        width:100%;
        height: 100%; /*Pasar a medidas necesarias en % y en el contacto tambien*/
        display:inline-flex;
        
    }


    .divContacto form h1{
        font-size: 3em;
        text-transform: uppercase;
        margin:0 auto;
        padding-top:0.5em;
        text-align:center;
    }

    .contacto form input{
        outline:none;
        display:flex;
        margin:1.5em auto;
        font-size:1em;
        white-space: 10px;
        padding-left:1em;
        font-family: 'Cairo', sans-serif;
    }

    .contacto form input:focus{
        border:0.13em solid rgb(24, 104, 150);
    }

    .contacto textarea{
        display:flex;
        font-size:1em;
        padding:1em;
        margin:0 auto 1.5em;
        height:6em;
        resize:none;
        outline:none;
        font-family: 'Cairo', sans-serif;
    }

    .contacto textarea:focus{
        border:0.13em solid rgb(24, 104, 150);
    }

    #enviar{
        display:none;
    }
    #labelEnviar{
        color:#fff;
        display:flex;
        margin:1em auto;
        font-family: 'Cairo', sans-serif;
        justify-content:center;
        cursor:pointer;
        background:linear-gradient(60deg,rgb(53, 46, 46) 50%,  rgb(24, 104, 150) 50.1%);
        transition: all 1s;
        font-size:1.1em;
    }

    #labelEnviar:hover{
        background: linear-gradient(60deg,rgba(53, 46, 46, 0.950) 50%,  rgba(24, 104, 150, 0.950) 50.1%);
    }


    .atencion{ /*lado oscuro de contacto al desarrollador*/
    
        width:20em;
        height:150%;
        
        margin:auto 0 auto auto;

        background-color:rgb(27, 26, 26);
    }

    .atencion h3{
        color:#FFF;
        font-family: 'Cairo', sans-serif;
        padding:2em 1em;
        font-size: 1em;
        
    }

    .atencion a{ /*Email*/
        font-family: 'Cairo', sans-serif;
        text-decoration: underline;
        color:white;
    }





    
    #menu{
        display:none;
    }
    #cerrar{
        display:none;
    }
    


        .barraNavegacion ul li button{
            padding:0.5em;
        }

        #menu{
            position: relative;
            background:transparent;
            border:none;
            outline:none;
            color:#fff;
            float:right;
            font-size:3em;
            margin:0 1em;
            cursor:pointer;
            z-index:1;
        }
        #contenedorCerrar{
            
            width:100%;
            display:flex;
            position: relative;
        }

        #menuNavegacion li button{
            font-size:1.8em;
        }


        #cerrar{
            width:auto;
            font-size:2em;
            
            background:transparent;
            outline:none;
            border:none;
            cursor:pointer;
            color:#fff;
            margin:0.5em 1em;
            
            

            margin:0.5em 95%;
        }

        
        #menuNavegacion{/*volver a darle el margin al titulo de nav*/
            display:inline-flex;
            position:sticky;
            flex-direction: row;
            width:auto;
            height:auto;
            font-size:0.65em;
            background: transparent;
            margin:auto 1.5em 0.5em auto;
        }

        
    

    #logros{ /*en este div esta lo que lleva a "logros"*/
        margin:-10em 0;
    }
    #nosotros{ /*div en donde se lleva a logros*/
        position:absolute;
        margin:-7em 0;
    }
    #contacto{/*div en donde se lleva a contacto*/
        margin:-6em 0; 
        position:absolute;
    }

    .fotos{
        grid-template-columns: repeat(3,1fr);
        width:70%;
        height:20em;
    }
    .fotos img{
        height:10em;
    }

}



@media screen and (min-width:1300px){

    .fotos{
        height:26em;
    }
    .fotos img{
        height:13em;
    }
 
}
@media screen and (min-width:1500px){
    .fotos{
        width:60%;
    }

}

@media screen and (min-width:1800px){
    .fotos{
        width:65%;
        height:30em;
    }
    .fotos img{
        margin:auto;
        height:15em;
    }
}

@media screen and (min-width:2047px){/*2K*/
    .barraNavegacion button{
        font-size:2em;
        
    }
    #menuNavegacion{
        margin-right: 4em;
    }

    .tituloMedio h1{
        font-size:3em;
    }

    .instagram h4 a{
        font-size:180%;
    }
    .iconoInstagram{
        font-size:120%;
    }

    .elemento h3{
        font-size: 1.4em;
    }

    .divSobreNosotros{
        width:60em;
    }
    .divSobreNosotros h1{
        font-size:3em;
    }
    .divSobreNosotros h3{
        font-size:1.5em;
    }

}

@media screen and (min-width:3839px){ /*4K*/

    .barraNavegacion h4{
        font-size:3em;
    }

    #menuNavegacion li{
        font-size:2em;
    }

    .tituloMedio h1{
        font-size:5em;
    }

    .instagram h4 a{
        font-size:3em;
    }
    .iconoInstagram i{
        font-size: 4em;
    }

    .servicios{
        height:54vh;
    }

    #divServicios h1{
        font-size:7em;
    }



    .elemento h2{
        font-size:5em;
    }
    .elemento h3{
        font-size:2.5em;
    }

    .tituloFotos h2{
        font-size:7em;
    }
    .tituloFotos h3{
        font-size:3em;
    }



    .divSobreNosotros{
        width:100em;
        margin:8em auto;
    }
    .divSobreNosotros h1{
        font-size:6em;
    }
    .lineaSobreNosotros{
        width:25em;
    }
    
    .divSobreNosotros h3{
        font-size:3em;
    }

    .contacto{
        height:80vh;
    }

    .contacto img{
        width:40em;
    }

    .centrarContacto{
        width:90em;
        margin:3em auto;
    }

    .divContacto form h1{
        font-size:7em;
    }

    .divContacto form input{
        font-size:1.8em;
    }
    .divContacto form textarea{
        font-size: 1.8em;
    }

    #labelEnviar{
        font-size:2em;
    }

    .atencion{
        width:38em;
    }
    .atencion h3{
        font-size:2.2em;
    }

    #logros{
        margin:10em;
    }

    #nosotros{
        margin:-10em;
    }


    footer h3{
        font-size:2em;
    }
    footer h4{
        font-size:1.8em;
    }

    .fotos{
        width:45%;
    }
    .fotos img{
        height:15em;
    }
    

}