@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Abel:400);
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700,300);
@import url(https://fonts.googleapis.com/css?family=ABeeZee:400);
@font-face {
  font-family: "e-aditivos";
  src: url("/assets/fonts/e-aditivos.eot?55765067");
  src: url("/assets/fonts/e-aditivos.eot?55765067#iefix") format("embedded-opentype"), url("/assets/fonts/e-aditivos.woff?55765067") format("woff"), url("/assets/fonts/e-aditivos.ttf?55765067") format("truetype"), url("/assets/fonts/e-aditivos.svg?55765067#e-aditivos") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'e-aditivos';
    src: url('/assets/fonts/e-aditivos.svg?55765067#e-aditivos') format('svg');
  }
}
*/
[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "e-aditivos";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-veggi:before, .icon-vegetal:before {
  content: "\e800";
} /* '' */
.icon-chemistry:before, .icon-quimico:before {
  content: "\e801";
} /* '' */
.icon-unknown:before, .icon-indeterminado:before {
  content: "\e802";
} /* '' */
.icon-bookmark:before {
  content: "\e803";
} /* '' */
.icon-mail-alt:before {
  content: "\e804";
} /* '' */
.icon-animal:before {
  content: "\e805";
} /* '' */
.icon-killer:before, .icon-peligroso:before, section.content .legend .icon.icon-peligroso:before {
  content: "\e806";
} /* '' */
.icon-suspicious:before, .icon-sospechoso:before {
  content: "\e807";
} /* '' */
.icon-smile:before, .icon-nonocivo:before {
  content: "\e808";
} /* '' */
.icon-search:before {
  content: "\e809";
} /* '' */
[class^=icon-], [class*=" icon-"] {
  font-family: "e-aditivos";
  font-style: normal;
  font-weight: normal;
  /* fix buttons height */
  line-height: 1em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
}

.icon-veggi, .icon-vegetal {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-chemistry, .icon-quimico {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-unknown, .icon-indeterminado {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-bookmark {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-mail-alt {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-animal {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-killer, .icon-peligroso, section.content .legend .icon.icon-peligroso {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-suspicious, .icon-sospechoso {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-smile, .icon-nonocivo {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

.icon-search {
  *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " ");
}

/* -------------------------------------------------------------
 * *  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
 * *  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets
 * *
 * *  List of CSS3 Sass Mixins File to be @imported and @included as you need
 * *
 * *  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
 * *  ENDING css files
 * *
 * *  note: All CSS3 Properties are being supported by Safari 5
 * *  more info: http://www.findmebyip.com/litmus/#css3-properties
 * *
 * *------------------------------------------------------------- */
.border-box, section.content #searchbox input, section.content .legend div, header #menu a, body, .full, section.content #chems, .center, #references, #legal, footer, article.aditive .content, article.aditive header, section.content .legend, section.content .container, header #main {
  -khtml-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.full, section.content #chems, .center, #references, #legal, footer, article.aditive .content, article.aditive header, section.content .legend, section.content .container, header #main {
  width: 100%;
  max-width: 960px;
}

.center, #references, #legal, footer, article.aditive .content, article.aditive header, section.content #chems, section.content .legend, section.content .container, header #main {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.section, footer, header #main {
  margin-top: 54px;
  margin-bottom: 72px;
}
@media (min-width: 960px) {
  .section, footer, header #main {
    margin-top: 108px;
    margin-bottom: 144px;
  }
}

.base-font, body, .title-font, section.content .legend div, th {
  font-family: "Merriweather Sans", Arial, sans-serif;
}

body {
  color: #46226D;
  font-size: 16px;
  background: #90E1D8 url(/assets/images/espigas.png) center bottom no-repeat;
  line-height: 1.5;
  margin: 0;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #46226D;
  color: #FFF;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

.sticky:before, .sticky:after {
  content: "";
  display: table;
}

.no-match, .hidden, .searchterm {
  display: none;
}

h1 a, h2 a, h3 a {
  text-decoration: none;
}

p {
  letter-spacing: -0.02em;
}

textarea:focus, input:focus, input[type]:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45) inset, 0 0 8px rgba(130, 225, 214, 0.6);
  outline: 0 none;
}

header {
  text-align: center;
  padding-bottom: 18px;
}
header #title {
  background: #90E1D8;
  background: linear-gradient(to bottom, #90E1D8 0%, rgba(144, 225, 216, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#000000",GradientType=0 );
  padding-top: 36px;
  padding-bottom: 18px;
  font-family: "Abel", Trebuchet, sans-serif;
  font-size: 66px;
  text-transform: lowercase;
}
header #title a {
  text-decoration: none;
}
header #title img {
  width: 280px;
  max-width: 80%;
  height: auto;
  max-height: 30vh;
}
header #fb-root, header #twitter-button {
  display: inline-block;
}
header #menu {
  display: flex;
  justify-content: center;
  border-top: 5px solid #46226D;
  font-weight: bold;
  z-index: 1000;
}
header #menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
header #menu li {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-right: 5px solid #46226D;
  border-bottom: 5px solid #46226D;
  background-color: #F5EFE2;
}
header #menu li.active {
  background-color: #2CB5A4;
}
header #menu li:first-child {
  border-left: 5px solid #46226D;
}
header #menu a {
  display: block;
  flex: 1;
  padding: 6px 9px;
  text-decoration: none;
}
@media (min-width: 960px) {
  header #menu a {
    padding: 9px 36px;
  }
}
header #menu a:hover, header #menu a:active {
  background: #2CB5A4;
}
header #main {
  max-width: 640px;
  font-weight: bold;
}
header #main h1, header #main h2 {
  font-size: 24px;
  margin: 18px 18px 36px;
  line-height: 1.2em;
}
header #main p {
  font-size: 14px;
  margin: 12px;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 5px solid #46226D;
}
table [class^=icon-], table [class*=" icon-"] {
  font-size: 24px;
}

th {
  font-weight: normal;
  background-color: #F5EFE2;
  border: 5px solid #46226D;
}

.icon-peligroso:before, section.content .legend .icon.icon-peligroso:before {
  line-height: 19.2px;
  font-size: 31.2px;
  position: relative;
  top: 2.4px;
}

.icon-animal:before {
  width: 31.2px;
}

section.content .legend {
  background-color: #F5EFE2;
  border: 5px solid #46226D;
}
section.content .legend div {
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
}
@media (min-width: 960px) {
  section.content .legend div {
    font-size: 20px;
  }
}
section.content .legend .icon {
  vertical-align: top;
  display: inline-block;
  -khtml-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  padding: 2px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
section.content .legend .icon:before {
  font-size: 24px;
  display: block;
  text-align: center;
  margin: 0 auto 9px;
}
section.content .legend .icon span {
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-weight: bold;
}
section.content .legend .icon.icon-peligroso:before {
  line-height: 24px;
}
section.content .legend .title {
  display: inline-block;
  width: 20%;
  padding: 12px;
  font-weight: bold;
}
@media (min-width: 960px) {
  section.content .legend .title {
    width: 30%;
  }
}
section.content .legend .icons {
  text-transform: lowercase;
  display: inline-block;
  background-color: #90E1D8;
  width: 80%;
  border-left: 5px solid #46226D;
  padding: 12px;
  white-space: nowrap;
}
@media (min-width: 960px) {
  section.content .legend .icons {
    width: 70%;
  }
}
section.content .legend.tipo {
  border-bottom: none;
  margin-top: 36px;
}
section.content .legend.tipo span {
  width: 30%;
}
section.content .legend.origen {
  border-top: none;
  margin-bottom: 36px;
}
section.content .legend.origen span {
  width: 24%;
}
section.content .pattern {
  border-top: 5px solid #46226D;
  border-bottom: 5px solid #46226D;
  margin-bottom: 144px;
  background: #90E1D8 url(/assets/images/pattern.png) top center;
  background-attachment: fixed;
}
section.content h1 {
  text-align: center;
  padding: 9px;
  margin: 0;
  border: 5px solid #46226D;
  border-bottom: none;
  font-size: 16px;
  background-color: #90E1D8;
  font-weight: normal;
}
section.content h1 a:hover, section.content h1 a:active {
  text-decoration: underline;
}
section.content h1 a:last-child {
  font-weight: bold;
}
section.content h1 a:last-child:hover, section.content h1 a:last-child:active {
  text-decoration: none;
}
section.content .table {
  position: relative;
  top: 72px;
  background: #90E1D8;
}
section.content #searchbox {
  border: 5px solid #46226D;
  border-bottom: none;
  position: relative;
}
section.content #searchbox input {
  border: none;
  padding: 12px;
  width: 100%;
  font-size: 16px;
  background: #F5EFE2;
}
section.content #searchbox .icon {
  position: absolute;
  right: 11px;
  top: 11px;
  font-size: 20px;
  pointer-events: none;
  cursor: text;
}
section.content #chems {
  overflow: auto;
  hyphens: auto;
  text-overflow: ellipsis;
}
section.content #chems td, section.content #chems th {
  padding: 9px;
}
@media (min-width: 960px) {
  section.content #chems td, section.content #chems th {
    padding: 18px;
  }
}
section.content #chems th {
  background-color: #F48361;
  font-weight: bold;
}
section.content #chems .icon {
  display: inline-block;
  white-space: nowrap;
}
section.content #chems tr:nth-child(even) td, section.content #chems tr.even td {
  background-color: #87DAD3;
}
section.content #chems tr.odd td {
  background-color: #90E1D8;
}
section.content #chems .tablesorter th {
  cursor: pointer;
  background-position: center right;
  background-repeat: no-repeat;
}
section.content #chems .tablesorter-headerAsc {
  background-image: url(/assets/images/asc.gif);
}
section.content #chems .tablesorter-headerDesc {
  background-image: url(/assets/images/desc.gif);
}
section.content #chems .tablesorter-headerAsc, section.content #chems .tablesorter-headerDesc {
  padding-right: 20px;
  font-weight: bold;
  outline: 0 none;
}
section.content #chems a {
  text-decoration: none;
}
section.content #chems a:hover, section.content #chems a:active {
  text-decoration: underline;
}
section.content #chems .e-level, section.content #chems .e-type, section.content #chems .e-source {
  text-align: center;
}
section.content #chems .e-type {
  display: block;
  display: table-cell;
}
@media (max-width: 768px) {
  section.content #chems .e-type {
    display: none;
  }
}

.e-id, article.aditive h1 {
  white-space: nowrap;
  font-family: "ABeeZee", Arial, sans-serif;
  font-size: 18px;
}

article.aditive header {
  text-align: left;
  padding-bottom: 0;
}
article.aditive h1, article.aditive h2, article.aditive h3 {
  margin: 0;
}
article.aditive h1 {
  font-weight: normal;
  font-size: 22px;
  line-height: 22px;
  padding: 18px 36px;
  border: 5px solid #46226D;
  border-bottom: none;
  background-color: #F48361;
  display: inline-block;
}
article.aditive h2 {
  text-align: center;
  padding: 9px;
  font-size: 20px;
  font-weight: normal;
  border: 5px solid #46226D;
  border-bottom: none;
  background-color: #F5EFE2;
}
article.aditive .pattern {
  padding-bottom: 108px;
  margin-bottom: 36px;
}
article.aditive .content {
  border: 5px solid #46226D;
  border-top: none;
  background-color: #90E1D8;
  padding: 36px 0 54px;
  text-align: center;
}
article.aditive .icons {
  display: inline-block;
  font-size: 40px;
  border: 5px solid #46226D;
  padding: 9px 18px;
  letter-spacing: 18px;
}
article.aditive .icons .icon-animal:before {
  text-indent: -19.2px;
}
article.aditive .icons .icon-peligroso:before, article.aditive .icons section.content .legend .icon.icon-peligroso:before, section.content .legend article.aditive .icons .icon.icon-peligroso:before {
  line-height: 32px;
  font-size: 52px;
  position: relative;
  top: 4px;
}
article.aditive .label {
  font-weight: normal;
  font-size: 16px;
  padding-top: 36px;
}
article.aditive .description {
  text-align: left;
  margin: 36px;
}
article.aditive .label-peligroso {
  text-decoration: underline;
}

footer {
  font-size: 14px;
  max-width: width;
}
footer p, footer .pp {
  margin: 36px 0;
  font-weight: 300;
}
@media (min-width: 768px) and (max-width: 959px) {
  footer p, footer .pp {
    margin-left: 18px;
    margin-right: 18px;
  }
}
@media (max-width: 768px) {
  footer p, footer .pp {
    margin-left: 18px;
    margin-right: 18px;
  }
}
footer p strong, footer .pp strong {
  font-weight: 700;
}
footer p.pp {
  margin-bottom: 0;
}
footer div.pp {
  margin-top: 0;
}
footer .icon {
  font-size: 24px;
  padding-right: 9px;
}
footer .has-icon {
  font-weight: 700;
}
footer .legal {
  font-size: 12px;
}

#contact {
  font-size: 16px;
}
#contact label, #contact button, #contact textarea {
  display: block;
}
#contact input, #contact button, #contact textarea {
  padding: 5px;
  font-size: 16px;
}

#references, #legal {
  word-break: break-word;
}
#references li, #legal li {
  margin-bottom: 1em;
}
#references li ul > li, #legal li ul > li {
  margin-bottom: 0.5em;
}

.apps-banner p {
  margin-bottom: 0.5em !important;
}
.apps-banner ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}
.apps-banner ul li {
  margin-left: 0;
  margin-bottom: 1em;
}
.apps-banner .telegram-logo {
  display: inline-block;
  width: 32px;
  vertical-align: middle;
}
.apps-banner .playstore-logo {
  display: inline-block;
  vertical-align: middle;
  height: 64px;
}
.apps-banner .new {
  display: inline-block;
  color: #F48361;
  background: #46226D;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5pt 12pt;
}

header .apps-banner {
  margin-top: 2em;
}
header .apps-banner a {
  text-decoration: none;
}
header .apps-banner a:hover, header .apps-banner a:active {
  text-decoration: underline;
}
header .apps-banner p {
  font-weight: normal;
}