*, html{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
@font-face{
  font-family:'Roboto';
  src:url('../fonts/Roboto-Regular.woff2') format('woff2'),url('../fonts/Roboto-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
    font-family: 'RobotoBlack';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body{
  background: #f2f2f2;
  font-family:'Roboto';
  box-sizing:border-box;
  margin:0;
  padding:0;
  position:relative;
}
ul{
  background-color: ;
  display: inline-flex;
  height: auto;
  list-style: none;
  margin:0 auto;
  margin-top:30px;
  padding:0;
  text-align: center;
  width: 100%:
}
ul li{
  background-color: ;
  height: auto;
  margin:0 auto;
  text-align: center;
  width: 100%:
}
ul li#left{
  background:;
  text-align: center;
  width: 30%;
}
ul li#left h1{
  color:crimson;
  display: block;
  font-family: 'RobotoBlack';
  font-size:50px;
  font-weight: 1200;
  letter-spacing: 2px;
  padding-top:20px;
  text-align: left;
  text-transform:;
}
ul li#left div.line{
  background: crimson;
  height: 08px;
  margin-bottom:40px;
  margin-top:20px;
  width: 200px;
}
ul li#left p{
  color:#171717;
  font-size:20px;
  letter-spacing: 1px;
  margin-top:10px;
  text-align: left;
}
ul li#right{
  background:;
  text-align: left;
  width: 60%;
}
ul li#right form{
  background: ;
  height: auto;
  width: 100%;
}
ul li#right form input,
ul li#right form select,
ul li#right form textarea,
ul li#right form button{
  border:none;
  border:1px solid rgba(0,0,0,.22);
  display: ;
  font-size:20px;
  margin-bottom:10px;
  padding:10px;
  width: 40%;
}
ul li#right form input#correo{
  display: ;
}
ul li#right form input#telefono{
  display: ;
}
ul li#right form input::placeholder,
ul li#right form select::placeholder,
ul li#right form textarea::placeholder{
  color:rgba(0,0,0,.22);
}
ul li#right form select{
  color:rgba(0,0,0,.52);
}
ul li#right form select{
  display:block ;
  font-family: 'Roboto';
  height:50px;
  width: 80%;
}
ul li#right form textarea{
  display:block ;
  font-family: 'Roboto';
  height:150px;
  width: 80%;
}
ul li#right form button.submit{
  background: crimson;
  color:white;
  cursor: pointer;
}
ul li#right form div.msjSuccess{
  background: #5cb85c;
  color:#171717;
  font-size:22px;
  height: auto;
  margin-top:20px;
  padding:10px;
  width: 80%;
}
img#circleWhatsApi{
  border-radius:50%;
  bottom:10px;
  cursor: pointer;
  left:10px;
  position: fixed;
  width: 50px;
}
img#circlePhoneApi{
  background: white;
  border-radius:50%;
  bottom:10px;
  cursor: pointer;
  right:10px;
  padding:5px;
  position: fixed;
  width: 50px;
}
div.textWhatsContacto{
  background: #1cd743;
  border-radius:20px;
  bottom: 10px;
  color:white;
  font-size:18px;
  height: auto;
  left:80px;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 250px;
}
div.textTelContacto{
  background: crimson;
  border-radius:20px;
  bottom: 10px;
  color:white;
  font-size:18px;
  height: auto;
  right: 80px;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 210px;
}
@media screen and (min-width: 0px) and (max-width: 767px){
  ul{background-color:;display: block;margin-top:30px;width: 100%:}
  ul li{background-color: ;width: 100%:}
  ul li#left{background:;text-align: center;width: 100%;}
  ul li#right{background:;text-align: left;width: 100%;}
  ul li#right form{background: ;height: auto;margin-top:30px;width: 100%;}
  ul li#right form input,
  ul li#right form select,
  ul li#right form textarea,
  ul li#right form button{border:none;border:1px solid rgba(0,0,0,.22);display: ;font-size:20px;margin-bottom:10px;padding:10px;width: 95%;}
  ul li#right form div.msjSuccess{background: #5cb85c;color:#171717;font-size:22px;height: auto;margin-top:20px;padding:10px;width: 100%;}


}