html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.3;
  min-height: 100vh;
}
/* scroll to top ---------------------------------*/
.to-top {
  position: fixed;
  width: 35px;
  height: 35px;
  background: #133a83;
  bottom: 40px;
  right: 37px;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 22px;
  z-index: 100;
  border-radius: 5px;
}
.to-top:hover {
  color: rgb(18, 26, 27);
}

/*antes del -navbar-------------------------------------*/

/* boton floatnte whatsapp */
.awhatsapp {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 85px;
  right: 32px;
  background-color: #1e9600;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
  align-items: center;
  justify-content: center;
}
#awhatsapp:hover {
  color: black;
}
#icon-whats {
  margin-top: 10px;
}
/* prenavbar  */

#pre {
  padding-top: 30px;
  background: #f79d00;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  color: white;
  height: 650px;
  padding-bottom: 10px;
}

#span5 {
  font-size: 60px;
  color: white;

  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#span1 {
  font-size: 45px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#span2 {
  font-size: 40px;
  font-weight: bold;
  color: #ee4c0c;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#span3 {
  font-size: 40px;
  font-weight: bold;
  color: #56ccf2;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#span6 {
  font-size: 40px;
  font-weight: bold;
  color: #56ccf2;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#span4 {
  font-size: 48px;
  font-weight: bold;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

/*fin del prenavbar--------------------------*/
/* NAVBARRRRRRRRRRRRRRRRRRRRRR---------------- */

.navbar {
  /* nombre del color: under the lake */

  font-family: "Montserrat", sans-serif;
}

.navbar-brand {
  color: white !important;
  font-family: "Montserrat", sans-serif;
}

.nav-link {
  color: white !important;
}
.nav-link:hover {
  color: #000 !important;
}

/* color a los navbarDropdownMenuLink*/
.dropdown:hover > .dropdown-menu {
  display: block;
  background: #3b404d;
  border-radius: 25px;
}

.dropdown > .dropdown-toggle:active {
  pointer-events: none;
}
/*color del hover negro*/
#navbarNavDropdown a:hover {
  background-color: #b8c1db;
  border-radius: 25px;
  color: black;
}

/*letra blanca del navbarDropdownMenuLink*/
.dropdown-menu a {
  color: white;
}
/* FIN NAVBAR ----------------------------*/

/*para hacer la foto con el display y letras blancas--------------------*/
.Content {
  background-image: url(img/camion.JPG);
  width: 100%;
  height: 700px;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-position: center right;
}
.Content:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(97, 207, 64);
  position: absolute;
  opacity: 0.4;
}
#titu {
  position: relative;
  color: white;
  font-size: 45px;
  text-align: center;
  margin-top: 50px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#titu1 {
  position: relative;
  color: #07a4d8;
  font-size: 40px;
  font-family: "Noto Serif", serif;
  text-align: center;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#cont-li {
  position: relative;
  font-size: 28px;
  color: yellow;
  text-decoration: none;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#tit3 {
  position: relative;
  color: #f14806;
  font-size: 45px;
  font-weight: bold;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#tit4 {
  position: relative;
  color: yellow;
  font-size: 45px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#imagentarjeta {
  width: 200px;
}

#btnpresu {
  position: relative;
  background: #1e9600;
  color: white;
}
#btnpresu:hover {
  background-color: #22700e;
  border-color: none;
}

/*fin display*/
/* FIN INDEX --------------------------*/
/* cards nuevos materiales  y servicios*/
.contenedortotal {
  background: #f79d00;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  text-align: center;
}

#subtit {
  font-size: 30px;
  color: white;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#titserv {
  position: relative;
  color: yellow;
  font-size: 45px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#tiserv {
  position: relative;
  color: #f14806;
  font-size: 45px;
  font-weight: bold;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
.contenedortotal h2 {
  padding-top: 20px;
  color: white;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
.contenedortotal h3 {
  color: white;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
  font-size: 60px;
}
#contboton {
  margin-top: 30px;
}
#btn-produ {
  margin-bottom: 15px;
  background: #1e9600;
}
#btn-produ:hover {
  background: #22700e;
}
#cardbody {
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  color: white;
}
#cardbody h4 {
  text-shadow: 2px 2px 2px #09130d;
}
.card-text {
  color: #000;
  text-shadow: black 0px 1px 0px;
}

/*footer*/

#footer {
  font-family: "Lora", serif;
}
#telefonos {
  color: #f79d00;
}

.page-footer {
  background: #04163f;
}
.divredes {
  background: #5b6672;
}
/*boton Compartir*/
#botoncompartir {
  width: 200px;
  font-size: 15px;
  padding: 10px 20px;
  text-align: center;
  margin: auto;
  letter-spacing: 2px;
  border-radius: 5px;
  border-color: #233d75 !important;
  transition: all 300ms;
  background-color: #5680db !important;
}
.fb-xfbml-parse-ignore {
  color: white !important;
  text-decoration: none !important;
}

#botoncompartir:hover {
  background-color: #152e63 !important;
}
.hrcolor {
  background: #05f048;
}

/* DESAGOTES */

/* desagoteeeeeeeeeeeeeeee */
/* prenavbar de desagote */

#predesagote {
  padding-top: 30px;
  background: #f79d00;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  color: white;
  height: 350px;

  padding-bottom: 10px;
}

#span5des {
  font-size: 60px;
  color: white;
  font-family: "Noto Serif", serif;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#span1des {
  font-size: 45px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#span2des {
  font-size: 40px;
  font-weight: bold;
  color: #fc4a1a;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#span4des {
  font-size: 30px;

  font-weight: bold;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

/*fin del prenavbar--------------------------*/

#Contenedor-desagote {
  font-family: "Open Sans", sans-serif;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  width: 100%;
  padding: 50px;
  color: white;
}
/* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */

/* titulo */
.titulo-marketing {
  text-align: center;
  font-size: 50px;
  margin-bottom: 40px;
  font-weight: 100;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#imgdesagote {
  width: 320px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  /* para que se vea sobre el fondo...: */
  box-shadow: 2px 5px 3px #26292c;
}

#Contenedor-desagote p1 {
  font-size: 29px;
  font-weight: bold;
  margin-top: 20px;
  color: #fc4a1a;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Contenedor-desagote p2 {
  font-size: 25px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Contenedor-desagote p3 {
  font-size: 25px;
  font-weight: bold;
  color: rgb(83, 72, 72);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.desagotes {
  text-align: center;
  margin-top: 10px;
}
#spandes {
  font-size: 35px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#imagentarjetaserv {
  box-shadow: 2px 5px 3px #26292c;
}

/* FIN DESAGOTES ------------------------*/

/* DESTRANQUES-------------------- */
#Contenedor-destranque {
  font-family: "Open Sans", sans-serif;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  width: 100%;
  padding: 50px;
  color: white;
}

.img-destranque {
  width: 450px;
  height: 240px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  /* para que se vea sobre el fondo...: */
  box-shadow: 2px 5px 3px #26292c;
}

#Contenedor-destranque p1 {
  font-size: 29px;
  font-weight: bold;
  margin-top: 20px;
  color: #fc4a1a;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Contenedor-destranque p2 {
  font-size: 25px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Contenedor-destranque p3 {
  font-size: 25px;
  font-weight: bold;
  color: rgb(83, 72, 72);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.destranque {
  text-align: center;
}
#spandes {
  font-size: 35px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
/* POZOS ---------------------- */
#Contenedor-pozo {
  font-family: "Open Sans", sans-serif;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  width: 100%;
  padding: 50px;
  color: white;
  text-align: center;
}

#imgpozo {
  width: 350px;
  height: 300px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  /* para que se vea sobre el fondo...: */
  box-shadow: 2px 5px 3px #26292c;
}

#Contenedor-pozo p4 {
  font-size: 40px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Contenedor-pozo p5 {
  font-size: 30px;

  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#Contenedor-pozo p1 {
  font-size: 29px;
  font-weight: bold;
  margin-top: 20px;
  color: #fc4a1a;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#parrafopozo {
  font-size: 25px;

  color: rgb(17, 5, 5);
}

/* quienes somos ------------------- */
.acerca-de {
  background: #f79d00;
  background: -webkit-linear-gradient(to bottom, #51f17e, #f79d00);
  background: linear-gradient(to bottom, #4eec7b, #f79d00);
  color: white;
  font-family: "Open Sans", sans-serif;
  text-align: center;
}
.h2q {
  font-size: 45px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}

#logo1 {
  height: 350px;
  float: left;
  margin: 30px;
  border-radius: 5px;
  box-shadow: -10px -10px 0 0 #2c5ce0;
}
#parrafq {
  color: #2c5ce0;
  font-weight: bold;
  font-size: 30px;
  font-family: "Open Sans", sans-serif;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#parrafoq {
  color: #000;
  font-size: 25px;
}
#ofertaq {
  font-size: 30px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#ofertaq ul {
  font-size: 30px;
  text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
    2px -2px 1px #000;
}
#ofertaqs {
  font-size: 25px;
  color: #2c5ce0;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.enlaceatras {
  color: #000;
}
/* medias querys----------------------- */
@media screen and (max-width: 300px) {
  #pre {
    height: 720px;
  }
  #span5 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  #span1 {
    font-size: 23px;
    margin-bottom: 12px;
  }

  #span2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #span3 {
    font-size: 26px;
    margin-bottom: 8px;
  }
  #span6 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  #span4 {
    font-size: 29px;
  }

  /*fin del prenavbar--------------------------*/
  #titu {
    font-size: 28px;
    margin-top: 50px;
  }
  #titu1 {
    font-size: 21px;
    text-shadow: 0 0 0.2em rgb(14, 8, 51), 0 0 0.2em rgb(18, 9, 56),
      0 0 0.2em rgb(14, 9, 54);
  }
  #cont-li {
    font-size: 18px;
    /* nueva somra luz  */
    text-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }
  #tit3 {
    font-size: 25px;
  }
  #tit4 {
    font-size: 25px;
    text-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }
  #imagentarjeta {
    width: 140px;
    box-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }
  .Content {
    height: 850px;
  }
  /* prenavbar  */

  /* servicios --------------------- */
  #subtit {
    font-size: 20px;
  }
  .contenedortotal h3 {
    font-size: 40px;
  }
  #titserv {
    font-size: 30px;
  }
  /*desagote ------*/

  #predesagote {
    height: 550px;
  }

  #span5des {
    font-size: 35px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }


  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  .navbar-brand {
    font-size: 1.1rem !important;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
  /* DESTRANQUE  */
  .img-destranque {
    width: 250px;
    height: 140px;
  }
  .otromark {
    font-size: 30px !important;
  }

  /* POZOS   */
  .mark-pozo {
    font-size: 28px !important;
  }
  #Contenedor-pozo {
    padding: 15px;
  }
}

@media screen and (min-width: 301px) and (max-width: 376px) {
  .navbar-brand {
    font-size: 1.1rem !important;
  }

  #pre {
    height: 750px;
  }
  #span5 {
    font-size: 35px;
    margin-bottom: 10px;
  }

  #span1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  #span2 {
    font-size: 27px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #span3 {
    font-size: 29px;
    margin-bottom: 8px;
  }
  #span6 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  #span4 {
    font-size: 32px;
  }
  #titu {
    font-size: 28px;
    margin-top: 50px;
  }
  #titu1 {
    font-size: 21px;
    text-shadow: 0 0 0.2em rgb(14, 8, 51), 0 0 0.2em rgb(18, 9, 56),
      0 0 0.2em rgb(14, 9, 54);
  }
  #cont-li {
    font-size: 18px;
    /* nueva somra luz  */
    text-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }
  #tit3 {
    font-size: 25px;
  }
  #tit4 {
    font-size: 25px;
    text-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }
  #imagentarjeta {
    width: 140px;
    box-shadow: 0 0 0.2em rgb(22, 17, 59), 0 0 0.2em rgb(24, 18, 58),
      0 0 0.2em rgb(20, 15, 56);
  }

  /* servicios --------------------- */
  #subtit {
    font-size: 20px;
  }
  .contenedortotal h3 {
    font-size: 40px;
  }
  #titserv {
    font-size: 30px;
  }
  /*desagote ------*/

  #predesagote {
    height: 500px;
  }

  #span5des {
    font-size: 38px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }


  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
  /* DESTRANQUES  */
  .otromark {
    font-size: 36px !important;
  }
  .img-destranque {
    width: 250px;
    height: 140px;
  }
  /* POZOS  */
  #Contenedor-pozo {
    padding: 15px;
  }
}

@media screen and (min-width: 377px) and (max-width: 480px) {
  #span5 {
    font-size: 40px;
    margin-bottom: 10px;
  }

  #span1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  #span2 {
    font-size: 27px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #span3 {
    font-size: 29px;
    margin-bottom: 8px;
  }
  #span6 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  #span4 {
    font-size: 32px;
  }
  #titu1 {
    font-size: 20px;
  }
  #cont-li {
    font-size: 18px;
  }
  #tit3 {
    font-size: 25px;
  }
  #tit4 {
    font-size: 25px;
  }
  #imagentarjeta {
    width: 140px;
  }
  #pre {
    height: 750px;
  }
  /*desagote ------*/

  #predesagote {
    height: 420px;
  }

  #span5des {
    font-size: 35px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }

  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
  /* DESTRANQUES  */
  .img-destranque {
    width: 300px;
    height: 150px;
  }
}
@media screen and (min-width: 481px) and (max-width: 500px) {
  #pre {
    height: 760px;
  }
  #span5 {
    font-size: 45px;
    margin-bottom: 10px;
  }

  #span1 {
    font-size: 30px;
    margin-bottom: 12px;
  }

  #span2 {
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #span3 {
    font-size: 31px;
    margin-bottom: 8px;
  }
  #span6 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  #span4 {
    font-size: 32px;
  }

  #titu1 {
    font-size: 30px;
  }
  #cont-li {
    font-size: 22px;
  }
  #tit3 {
    font-size: 25px;
  }
  #tit4 {
    font-size: 25px;
  }
  #imagentarjeta {
    width: 140px;
  }
  .Content {
    height: 900px;
  }
  /*desagote ------*/

  #predesagote {
    height: 400px;
  }

  #span5des {
    font-size: 40px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }


  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
}
@media screen and (min-width: 501px) and (max-width: 576px) {
  #span5 {
    font-size: 55px;
    margin-bottom: 10px;
  }

  #span1 {
    font-size: 34px;
    margin-bottom: 12px;
  }

  #span2 {
    font-size: 33px;
  }
  #span3 {
    font-size: 34px;
  }
  #span6 {
    font-size: 30px;
  }
  #span4 {
    font-size: 32px;
  }
  #pre {
    height: 800px;
  }
  #titu1 {
    font-size: 30px;
  }
  #cont-li {
    font-size: 22px;
  }
  #tit3 {
    font-size: 25px;
  }
  #tit4 {
    font-size: 25px;
  }
  #imagentarjeta {
    width: 140px;
  }
  .Content {
    height: 780px;
  }
  #pre {
    height: 760px;
  }
  /*desagote ------*/

  #predesagote {
    height: 400px;
  }

  #span5des {
    font-size: 40px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }

 

  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
}
@media screen and (min-width: 576px) and (max-width: 768px) {
  #span5 {
    font-size: 55px;
    margin-bottom: 10px;
  }
  #span6 {
    font-size: 30px;
  }

  #span1 {
    font-size: 34px;
    margin-bottom: 12px;
  }
  #span4 {
    font-size: 42px;
  }
  #span3 {
    font-size: 33px;
  }
  #pre {
    height: 700px;
  }
  #titu {
    font-size: 35px;
  }
  .Content {
    height: 900px;
  }
  #tit4 {
    font-size: 35px;
  }
  /*desagote ------*/

  #predesagote {
    height: 350px;
  }

  #span5des {
    font-size: 40px;
  }

  #span1des {
    font-size: 30px;
  }

  #span2des {
    font-size: 20px;
  }
  #span4des {
    font-size: 25px;
  }

  .titulo-marketing {
    font-size: 35px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
}
@media screen and (min-width: 769px) and (max-width: 850px) {
  #pre {
    height: 950px;
  }
  .Content {
    height: 990px;
  }
  /*desagote ------*/

  #predesagote {
    height: 350px;
  }

  #span5des {
    font-size: 45px;
  }

  #span1des {
    font-size: 35px;
  }

  #span2des {
    font-size: 29px;
  }
  #span4des {
    font-size: 28px;
  }


  .titulo-marketing {
    font-size: 40px;
  }

  #spandes {
    font-size: 33px;
  }
  #imagentarjetaserv {
    width: 200px;
    height: 100px;
  }
  #Contenedor-desagote {
    padding: 18px;
  }
  #imgdesagote {
    width: 200px;
  }

  /* FIN DESAGOTES ------------------------*/
}
@media screen and (min-width: 851px) and (max-width: 950px) {
  #pre {
    height: 850px;
  }
  .Content {
    height: 990px;
  }
  #predesagote {
    height: 450px;
  }
}
@media screen and (min-width: 951px) and (max-width: 985px) {
  #pre {
    height: 850px;
  }
  .Content {
    height: 950px;
  }
}
@media screen and (min-width: 986px) and (max-width: 1149px) {
  #pre {
    height: 700px;
  }
  .Content {
    height: 850px;
  }
}
@media screen and (min-width: 1150px) and (max-width: 1200px) {
  #pre {
    height: 700px;
  }
  .Content {
    height: 850px;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1300px) {
  #pre {
    height: 750px;
  }
  .Content {
    height: 850px;
  }
}