
.chavon{
  display: none;
  }

.txslogan {

  max-width: 90%;

}
logo_mo {
  display: block;
}
logo {
display:none; 
}


  body {
    background-image: url("img/bg_mo.jpg");
    background-position: top center;
    align-items: right;
    padding-left: 10%;
    }
 
  slogan {
    grid-area: my-slogan;
    
    padding-top: 10px;
    padding-bottom: 10px;
 
    align-self: center;
  
  }



  main {
  display: grid; 
  color: gainsboro;
  width: 100%;
  margin: 0 auto;
  max-width: 600px;
  /* min-height: 100vh;  */
  grid-template-columns: 90%;
  grid-template-rows:
   auto 
   80px
   auto
   auto
   auto
   auto
  600px
   160px
   160px;
   
   grid-template-areas:
    "my-logo_mo"
    "my-subtitulo"
    "my-vacio"
    "my-item1"
    "my-item2"
    "my-item3"
    "my-form"
    "my-wasap"
    "my-footer"
  }
 
  @media screen and (min-width: 800px)  {
    body {
      background-image: url("img/bg.jpg");
      background-position: top center;
     
    }
    logo_mo {
      display: none;
  }
  logo {
    display:block; 
}

  main {
   
    color: gainsboro;
    margin: 0 auto;
    max-width: 1250px;
    min-height: 100vh;
    display: grid;
   
    grid-template-columns: 30% 10% 20% 20% 20% ;
    grid-template-rows:  200px 60px 1fr 100px 30px ;
      grid-template-areas:
      "my-logo my-logo my-logo my-logo my-logo"
      "my-subtitulo my-subtitulo my-subtitulo my-subtitulo my-subtitulo"
      "my-form my-vacio my-item1 my-item2 my-item3"
      "my-wasap my-marcas my-marcas my-marcas my-marcas"
      "my-footer my-footer my-footer my-footer my-footer"

  } 
  
}


    
  mfm {
    grid-area: my-form;
    padding: 30px 25px;
  
  } 
  vacio {
    grid-area: my-vacio;
    padding-bottom: 10px;
  }
  item1 {
   
    padding-top: 50px;
    grid-area: my-item1;
    padding-bottom: 10px;
    align-content:flex-start;
  
  }
  item2 {
    grid-area: my-item2;
    padding-top: 50px;
    padding-bottom: 10px;
    align-content:flex-start;
  }
  item3 {
    padding-top: 50px;
    grid-area: my-item3;
    padding-bottom: 10px;
    align-content:flex-start;
  }
   
  logo {
    padding-top: 30px;
    grid-area: my-logo;
   }
   logo_mo {
    padding-top: 30px;
    grid-area: my-logo_mo;
  
  
  }
  subtitulo {
    padding: 15px 25px;
    grid-area: my-subtitulo;
  
  }
  slogan {
    grid-area: my-slogan;
    padding-top: 30px;
    justify-self: center;
   
  
  }
   
  footer {
    grid-area: my-footer;
    background-color: #616263;
  }
  wasap {
    grid-area: my-wasap;
    padding: 5px;
    justify-self: center;
    align-content:flex-end;
    

  }
 marcas {
    grid-area: my-marcas;
    padding: 20px;
    align-content:flex-end;

  }
   
/*  --------------  */
input[type="text"], textarea {

  background-color : #095578;
  color: rgb(255, 255, 255); 
  font-style:bold;

}
input[type="email"], textarea {

  background-color : #095578;
  color: rgb(255, 255, 255); 
  font-style:bold; 

}
textarea[type="text"], textarea {

  background-color : #095578; 
  color: rgb(255, 255, 255); 
  font-style:bold;

}

::placeholder { 
  color: white !important;
  opacity: 1; 

}


/*--------------------------------------------------------------
# list
--------------------------------------------------------------*/   
li, p {
  line-height: 1.5;
  list-style-type:none;
  font-weight: 700;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #0d182d;
  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%; */
}
