@font-face {
  font-family: "WebSymbolsRegular";
  src: url("fonts/websymbols-regular-webfont.eot");
  src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/websymbols-regular-webfont.woff") format("woff"), url("fonts/websymbols-regular-webfont.ttf") format("truetype"), url("fonts/websymbols-regular-webfont.svg?#WebSymbolsRegular") format("uvg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NexaRegular";
  src: url("fonts/NexaRegular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NexaLight";
  src: url("fonts/NexaLight.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NexaBold";
  src: url("fonts/NexaBold.otf");
  font-weight: bold;
  font-style: normal;
}

* {
  --color-bg: white;
  margin: 0px;
  padding: 0px;
  font-family: NexaRegular;
}

/* SIRVE PARA LIMPIAR EL FLOTADO*/
.clearfix {
  float: none;
  clear: both;
}

.fnt-icon {
  font-family: "WebSymbolsRegular";
  display: block;
  float: left;
  font-size: 30px;
  margin-top: 0px;
  margin-left: 0px;
}

.border-1 {
  border: 1px solid red;
}

.border-2 {
  border: 1px solid orange;
  background: var(--color-bg);
}

header #header-section {
  display: float;
  height: auto;
  width: auto;
  background: var(--color-bg);
  overflow: hidden;
}
header #header-section #logotipo {
  display: block;
  float: left;
  min-width: 410px;
  width: 25%;
}
header #header-section #logotipo #main-logo {
  width: 400px;
  margin: 0px auto;
  overflow: hidden;
}
header #header-section #social-media {
  display: block;
  float: left;
  height: 73px;
  min-width: 250px;
  width: 20%;
  padding-right: 80px;
  padding-top: 15px;
}
header #header-section #social-media .sm-ico {
  display: block;
  float: right;
}
header #header-section #social-media .sm-ico a {
  margin: 10px;
  color: orange;
  transition: all 100ms;
  font-size: 30px;
  text-decoration: none;
}
header #header-section #social-media .sm-ico a:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
header #header-section #menu {
  display: block;
  float: right;
  justify-content: center;
  align-self: center;
  padding-right: 50px;
  padding-top: 35px;
  min-with: 600px;
  height: auto;
}
header #header-section #menu #main-menu {
  height: 25px;
}
header #header-section #menu #main-menu li {
  list-style: none;
  float: left;
}
header #header-section #menu #main-menu li a {
  display: block;
  float: left;
  margin: 5px;
  color: black;
  align-items: right;
  text-align: right;
  transition: all 100ms;
  font-size: 15px;
  text-decoration: none;
}
header #header-section #menu #main-menu li a:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

#card{
    height: 10%;
    width: 10%;
}

.producto{
    margin-top: 30px;
}

.msg{
    margin: 200px;
}

#qrafip{
    width: 3%;
    height: 3º%;
    border: black 2px solid;
}

footer {
  display: block;
  float: left;
  background: darkslategrey;
  height: 60px;
  width: 100%;
}
footer p {
  line-height: 30px;
  margin: 0px auto;
  margin-top: 20px;
  border: 0px solid white;
  color: white;
  text-align: center;
}

sourceMappingURL=styles.css.map