body {
  background-image: url("img/hero-bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #7b9999;
 
}
@media only screen and (max-width: 750px) {

  body {
  
  background-image: url("img/Artboard\ 7-100.jpg");
  background-repeat: no-repeat;
  
  }
  slogan {
    grid-area: my-slogan;
    
    padding-top: 10px;
    padding-bottom: 10px;
 
    align-self: center;
  
  }
}
.txslogan {

  max-width: 90%;
  

}

  main {
  display: grid; 
  color: gainsboro;
  width: 100%;
  margin: 0 auto;
  max-width: 600px;
  /* min-height: 100vh;  */
  grid-template-columns: 95%;
  grid-template-rows:
   120px 
   180px
   60px
   300px
   1fr 
   auto
   150px
   150px
   60px
   60px;
   
   grid-template-areas:
    "my-logo"
    "my-slogan"
    "my-subtitulo"
    "my-vacio"
    "my-form"
    "my-productos"
    "my-wasap"
    "my-texto"
    "my-footer"
  }

  @media only screen and (min-width: 700px) {
  main {
   
    color: gainsboro;
    margin: 0 auto;
    max-width: 1250px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 30% 1fr 25%  ;
    grid-template-rows:  200px 60px 1fr 110px 30px ;
      grid-template-areas:
 
      "my-logo my-logo my-slogan"
      "my-subtitulo my-subtitulo my-subtitulo"
      "my-form my-productos my-wasap"
      "my-texto my-texto my-texto"
      "my-footer my-footer my-footer"

  } 
  
}


    
  mfm {
    grid-area: my-form;
    padding: 30px 25px;
  
  } 
  products {
    grid-area: my-productos;
    padding-bottom: 10px;
  
  }
   
  logo {
    padding-top: 30px;
    grid-area: my-logo;
  
  
  }
  subtitulo {
    padding: 15px 25px;
    grid-area: my-subtitulo;
  
  }
  slogan {
    grid-area: my-slogan;
    padding-top: 30px;
    justify-self: center;
   
  
  }
   
  eltexto {
    grid-area: my-texto;
    background-color: #838383;
  }
  footer {
    grid-area: my-footer;
    background-color: #616263;
  }
  wasap {
    grid-area: my-wasap;
    padding: 20px;
    justify-self: center;
    align-content:flex-end;

  }
  vacio {
    grid-area: my-vacio;

  }
   
/*  --------------  */
input[type="text"], textarea {

  background-color : #12aade;
  color: rgb(255, 255, 255); 
  font-style:bold;

}
input[type="email"], textarea {

  background-color : #12aade;
  color: rgb(255, 255, 255); 
  font-style:bold; 

}
textarea[type="text"], textarea {

  background-color : #12aade; 
  color: rgb(255, 255, 255); 
  font-style:bold;

}

::placeholder { 
  color: white !important;
  opacity: 1; 
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #3d3e3f;
  padding: 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

#footer .credits a {
  color: #72a8bf;
}

.centrado {
  display: block;
  margin-left: auto;
  margin-right: auto;
/*   width: 50%; */
}