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



}









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




/*portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.portada-texto h1{ font-size: 80px;
                   line-height: 80px;}

.portada-texto h2{ font-size: 19px;}

/*boton*/
.portada-boton{ width: 180px;
                height: 50px;}

.portada-boton p{ font-size: 14px;
                  line-height: 50px;}






/* saludoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*texto binvenido*/
.saludo-texto h1{ font-size: 35px}

/*sitio web*/
.saludo-texto h2{ font-size: 50px}

/*holaa usuario...*/
.saludo-texto h3{ font-size: 15px;
                  line-height: 20px;}

/*parrafo*/
.saludo-texto p{ font-size: 14px;}

/*fraseeee*/
.saludo-texto h4 {font-size: 15px;}





}













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







/* saludoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#saludo{ height: auto;
         margin: 0px 0px 50px 0px}


/*imagennn mascotaaaaaaaaa*/
.saludo-mascota{ width: 100%;}



/*textoooooooooooooooooooooo*/
.saludo-texto{ width: 100%;
               padding: 0px 0px 0px 0px;
               text-align: center;}
/*texto binvenido*/
.saludo-texto h1{ color:#6a00b5;font-size: 32px}

/*sitio web*/
.saludo-texto h2{ font-size: 50px}

/*holaa usuario...*/
.saludo-texto h3{ font-size: 15px;
                  line-height: 25px;
                  text-align: justify;
                  width: 80%;
                  margin: 0 auto}

/*parrafo*/
.saludo-texto p{ font-size: 14px;}

/*fraseeee*/
.saludo-texto h4 {font-size: 15px;}







/*preguntasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
.pregunta-forma h1{ font-size: 18px;}

.pregunta-forma p{ font-size: 13px;}

.pregunta-forma2 h1{ font-size: 18px;}

.pregunta-forma2 p{ font-size: 13px;}








/* webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb */

.web-titulo h1{ font-size:18px; }

.web-titulo h1 span{ padding:10px 14px 10px 14px;
                     font-size: 13px;}

.web-info-caja h1{ font-size: 15px;}
                
.web-info-caja p{ font-size: 13px;}









/*beneficiosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

/*imagennnnn mascotaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.beneficios-img{ width: 500px;}

.beneficios-viñeta h1{ font-size: 30px; }

.beneficios-viñeta h2{ font-size: 25px }









/*procesoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

/*tituloooooooo*/
.proceso-titulo h1{ font-size: 20px}

.proceso-titulo h2{ font-size: 32px}
/*infooooooooooo*/
.proceso-info{ grid-template-columns: repeat(3,1fr)}






/*herramientasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
#herramientas{ padding: 50px 0px 50px 0px}
/*hoptimizacionnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.hoptimizacion{ width:100%;
                float: left;}

/*infooooooooooo*/
.hoptimizacion-info{ width: 100%;
                     grid-template-columns: repeat(3,1fr);
                     grid-gap: 20px}

.hoptimizacion-info-caja{text-align: center;}


/*hlineaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.hlinea{ display: none;}


/*hbusquedaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.hbusqueda{ width:100%;
            float: left;
            background-color:rgba(255,255,255,.1);
            padding: 50px 20px 50px 20px}
/*infooooooooooo*/
.hbusqueda-info{ width: 100%;
                 grid-template-columns: repeat(2,1fr);
                 grid-gap: 20px}

.hbusqueda-info-caja{ text-align: center;}






/*appppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp*/

/*tituloooooooooooooooooooooooooo*/
.app-titulo-centro{ width: 220px;}

.app-titulo-centro img{ top: -10px;
                        right: -80px;
                        max-width: 120px}

.app-titulo-centro h1{ font-size: 25px }

.app-titulo-centro h2{ font-size: 25px}

/*infooooooooooooooooooooooo*/
.app-info{ grid-gap: 20px;
           grid-template-columns: repeat(3,1fr);}

.app-info-caja-icono img{ max-width: 80px }

.app-info-caja h1{ font-size: 16px;}
           






/*soporteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
/*textooooooo*/
.soporte-info-texto{width: 60%;}

.soporte-titulo h1{ font-size: 25px}

.soporte-info-texto h1{ font-size: 18px;}

.soporte-info-texto p{  font-size: 13px;
                        margin: 0px 0px 30px 0px}

/*imagennnnnn*/
.soporte-info-img{ width: 40%;
                   float: left;
                   text-align: center;}

.soporte-info-img img{ width: 100%;
                       max-width: 350px }








/* titulooo planessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

.planes-titulo-centro{ width: 250px}

.planes-titulo-centro img{ top: -40px;
                           right: -80px;
                           max-width: 120px;
                           z-index: 1}

.planes-titulo-centro h1{ font-size: 38px}

.planes-titulo-centro h2{ font-size: 45px;
                          line-height: 40px}

.planes-titulo p{ width: 60%;
                  color: #fff; }




/*hostttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/
/*titulooo*/
.host-caja h1{ font-size: 17px }

/*parrafoo*/
.host-caja p{ font-size: 13px}

/*preciooo*/
.host-caja h2{ font-size: 30px}

/*año del precio*/
.host-caja h2 span{ font-size: 14px}

/*descuento*/
.host-caja h3{ font-size: 20px;}


/*subtitulo caracteristicas*/
.host-caja h4{ font-size: 14px}

.host-caja ul li{ font-size: 13px;
                  line-height: 30px}





/*contactooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*titulooooooooooo*/
.contacto{ width: 100%;
		   margin: 0px 0px 40px 0px}
.contacto-titulo{ text-align: center;}

.contacto-titulo h2{ font-size: 20px;}




/*widgettttttttttttttttttttttttttttt*/
.contacto-widget{ width: 100%;}





/*widgettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/


/*textoooooooooooooooooooooooooooooooooooooooo*/
.widget-texto{ height: 320px;}

.widget-texto h1{ font-size: 40px;
                  line-height: 30px;}

.widget-texto h2{font-size: 60px;
                  line-height: 50px;}

.widget-texto h3{ font-size: 15px;}



/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.widget-img{ height: 320px;}






/* firmasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */
.firma-texto h1{ font-size: 35px;
                  line-height: 30px;}

.firma-texto h2{ font-family:Raleway;
                  font-size: 40px;
                  line-height: 30px;}

.firma-texto h3{ font-size: 16px;}

.firma-texto h4{ font-size: 13.5px;}


}















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









/*preguntasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

.pregunta{ width: 100%;
           padding: 80px 0px 80px 0px}



.pregunta-forma h1{ font-size: 18px;}

.pregunta-forma p{ font-size: 13px;}

.pregunta-forma2 h1{ font-size: 18px;}

.pregunta-forma2 p{ font-size: 13px;}









/*beneficiosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

/*imagennnnn mascotaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.beneficios-img{ width: 450px;}

/* infooooooooooooooooooooooooooooooooooooooooooo */
.beneficios-info{ grid-template-columns: repeat(2,1fr)}

.beneficios-info-caja h1{ font-size: 17px;}

.beneficios-info-caja h2{ font-size: 17px;}

.beneficios-info-caja p{  font-size: 13px;}	









/*appppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp*/

/*infooooooooooooooooooooooo*/
.app-info{ grid-gap: 20px;
           grid-template-columns: repeat(2,1fr);}








/*soporteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
/*tituloooooooooooooooooo*/
.soporte-titulo{ text-align: center;}
.soporte-titulo h1{ font-size: 22px}

/*infoooooooooooooooooooo*/
.soporte-info-texto{width: 100%;}

.soporte-info-texto h1{ font-size: 18px;}

.soporte-info-texto p{  font-size: 13px;
                        margin: 0px 0px 30px 0px}

/*imagennnnnn*/
.soporte-info-img{ width: 100%;}

.soporte-info-img img{ width: 100%;
                       max-width: 350px }





/*hostttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/

.host{ width: 100%;
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(2,1fr);}





/* firmasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

/*textooooooooooooooooooooooooooooooooooooo*/
.firma-texto{ width: 100%;
              height:auto;}

.firma-texto-centro{  position: relative;
                      width: 100%;
                      top: 0;
                      left: 0;
                      transform: translateY(0)
                      translateX(0);
                      text-align: center;}


.firma-texto h1{ font-size: 35px;
                  line-height: 30px;}

.firma-texto h2{ font-family:Raleway;
                  font-size: 40px;
                  line-height: 30px;}

.firma-texto h3{ font-size: 16px;}

.firma-texto h4{ font-size: 13.5px;}



/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.firma-img{ width: 100%;
            height: auto;
            text-align: center;}

.firma-img img{ width: 100%;
                max-width: 400px;
                position: relative;
                top: 0;
                left:0;
                transform: translateX(0)
                translateY(0); }
}
















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





/*portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.portada-texto h1{ font-size: 70px;
                   line-height: 70px;}

.portada-texto h2{ font-size: 17px;}

/*boton*/
.portada-boton{ width: 150px;
                height: 40px;}

.portada-boton p{ font-size: 13px;
                  line-height: 40px;}







/* webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb */

.web-titulo h1{ font-size:17px; }

.web-titulo h1 span{ padding:10px 14px 10px 14px;
                     font-size: 12px;}

/*infooooooooooooooooooooo*/
.web-info{grid-gap: 30px;
           grid-template-columns: repeat(2,1fr);}






/*procesoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#proceso{ padding: 70px 20px 50px 20px}
/*tituloooooooo*/
.proceso-titulo h1{ font-size: 18px}

.proceso-titulo h2{ font-size: 30px}

/*infooooooooooo*/
.proceso-info{ grid-template-columns: repeat(2,1fr)}
.proceso-info-caja:nth-child(2n){background: rgba(255,255,255,.2);padding: 10px;border-radius: 20px}







/*herramientasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/


/*infooooooooooo*/
.hoptimizacion-info{ grid-template-columns: repeat(2,1fr)}




/* titulooo planessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

.planes-titulo p{ width: 80%;
                  color: #fff; }






/*widgettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/


/*textoooooooooooooooooooooooooooooooooooooooo*/
.widget-texto{ height: 300px;}

.widget-texto h1{ font-size: 30px;
                  line-height: 20px;}

.widget-texto h2{font-size: 50px;
                  line-height: 50px;}

.widget-texto h3{ font-size: 14px;}



/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.widget-img{ height: 300px;}




}















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










/* saludoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#saludo{ margin: 0px 0px 40px 0px}


/*texto binvenido*/
.saludo-texto h1{ color:#6a00b5;font-size: 28px}

/*sitio web*/
.saludo-texto h2{ font-size: 43px}

/*holaa usuario...*/
.saludo-texto h3{ font-size: 15px;
                  line-height: 25px;
                  width: 100%;
                  margin: 0}

/*parrafo*/
.saludo-texto p{ font-size: 13px;}











/*widgettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/
.widget{padding: 40px 20px 0px 20px;}

/*textoooooooooooooooooooooooooooooooooooooooo*/
.widget-texto{ width: 100%;
               height: auto;}

.widget-texto-centro{ position: relative;
                      width: 100%;
                      top: 0;
                      left: 0;
                      transform: translateY(0)
                      translateX(0);
                      text-align: center;}


.widget-texto h1{ font-size: 30px;
                  line-height: 20px;}

.widget-texto h2{font-size: 50px;
                  line-height: 50px;}

.widget-texto h3{ font-size: 14px;}



/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.widget-img{ width: 100%;
             height: auto;
             text-align: center;}

.widget-img img{ width: 100%;
                 max-width: 400px;
                 position: relative;
                 bottom: 0;
                 left: 0;
                 transform: translateX(0);}

	
}
















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







/*portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.portada-texto h1{ font-size: 50px;
                   line-height: 50px;}

.portada-texto h2{ font-size: 15px;}








/*procesoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#proceso{ padding: 50px 20px 50px 20px}
/*tituloooooooo*/
.proceso-titulo h1{ font-size: 17px}

.proceso-titulo h2{ font-size: 27px}

/*infooooooooooo*/
.proceso-info{ grid-template-columns: repeat(1,1fr)}







/*herramientasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

/*infooooooooooo*/
.hoptimizacion-info{ grid-template-columns: repeat(1,1fr)}

/*infooooooooooo*/
.hbusqueda-info{ grid-template-columns: repeat(1,1fr)}







/*appppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp*/

/*tituloooooooooooooooooooooooooo*/
.app-titulo-centro{ width: 200px;}

.app-titulo-centro img{ top: -10px;
                        right: -60px;
                        max-width: 100px}

.app-titulo-centro h1{ font-size: 22px }

.app-titulo-centro h2{ font-size: 22px}

/*infooooooooooooooooooooooo*/
.app-info{ grid-gap: 20px;
           grid-template-columns: repeat(1,1fr);
           margin: 50px 0px 0px 0px}

.app-info-caja-icono img{ max-width: 50px }




/*soporteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
/*tituloooooooooooooooooo*/
.soporte-titulo h1{ font-size: 20px}

/*infoooooooooooooooooooo*/
.soporte-info-texto h1{ font-size: 16px;}

.soporte-info-texto p{  font-size: 13px;
                        margin: 0px 0px 20px 0px}

/*imagennnnnn*/
.soporte-info-img img{ width: 100%;
                       max-width: 300px }


	




/* titulooo planessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */
#planes{padding: 70px 20px 120px 20px}
.planes-titulo-centro{ width: 250px}

.planes-titulo-centro img{ top: -40px;
                           right: -50px;
                           max-width: 100px;
                           z-index: 1}

.planes-titulo-centro h1{ font-size: 30px}

.planes-titulo-centro h2{ font-size: 40px;
                          line-height: 40px}

.planes-titulo p{ width: 100%;
                  color: #fff; }







/*hostttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/
.host{ grid-template-columns: repeat(1,1fr);}
.host-caja{ width: 80%;margin: 0 auto }

/*titulooo*/
.host-caja h1{ font-size: 17px }

/*parrafoo*/
.host-caja p{ font-size: 13px}

/*preciooo*/
.host-caja h2{ font-size: 30px}

/*año del precio*/
.host-caja h2 span{ font-size: 14px}

/*descuento*/
.host-caja h3{ font-size: 20px;}


/*subtitulo caracteristicas*/
.host-caja h4{ font-size: 14px}

.host-caja ul li{ font-size: 13px;
                  line-height: 30px}

}













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







/* webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb */
#web{ padding: 50px 20px 50px 20px}

.web-titulo h1{ font-size:17px; }

.web-titulo h1 span{ padding:10px 14px 10px 14px;
                     font-size: 12px;}

/*infooooooooooooooooooooo*/
.web-info{grid-gap: 30px;
           grid-template-columns: repeat(1,1fr);}






/*beneficiosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

/*imagennnnn mascotaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.beneficios-img{ width: 400px;}





/*soporteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
/*tituloooooooooooooooooo*/
.soporte-titulo h1{ font-size: 18px}



/*imagennnnnn*/
.soporte-info-img img{ width: 100%;
                       max-width: 280px }

	






/*contactooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
.contacto-datos-titulo{ text-align: center;}




/* firmasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */
/*firmaaaa ejemploooooooooooooooooooooo*/

.firma{ width: 320px;
        height: 180px;}

/*logoooooooo*/
.firma-logo{ width:120px;}

/*lineaaaaaaaa*/
.firma-linea{ width: 5px; }

/*datossssssssss*/
.firma-datos{ width: 161px;
              float: left;
              padding: 0px 0px 0px 10px}

.firma-datos h5{ font-size: 20px;}


.firma-datos h6{ font-family:Raleway;
                 font-size: 8px;
                 color: #fff;
                 margin: 0 }

.firma-datos p{ font-size: 10px;
                line-height: 20px}

.firma-datos p span{color: #CEFF00}

}

















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





/*beneficiosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

/*imagennnnn mascotaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.beneficios-img{ width: 350px;}

/* infooooooooooooooooooooooooooooooooooooooooooo */
.beneficios-info{ grid-template-columns: repeat(1,1fr)}

	
}