[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"env\"],\n  \"plugins\": [\"add-module-exports\"]\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# http://editorconfig.org\n\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\nindent_size = 4\ntrim_trailing_whitespace = false\n\n[node_modules/**.js]\ncodepaint = false\n"
  },
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs     diff=csharp\n\n# Standard to msysgit\n*.doc\t diff=astextplain\n*.DOC\t diff=astextplain\n*.docx diff=astextplain\n*.DOCX diff=astextplain\n*.dot  diff=astextplain\n*.DOT  diff=astextplain\n*.pdf  diff=astextplain\n*.PDF\t diff=astextplain\n*.rtf\t diff=astextplain\n*.RTF\t diff=astextplain\n"
  },
  {
    "path": ".gitignore",
    "content": "# Windows image file caches\nThumbs.db\nehthumbs.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows Installer files\n*.cab\n*.msi\n*.msm\n*.msp\n\n# Windows shortcuts\n*.lnk\n\n# =========================\n# Operating System Files\n# =========================\n\n# OSX\n# =========================\n\n.DS_Store\n.AppleDouble\n.LSOverride\n\n# Thumbnails\n._*\n\n# Files that might appear on external disk\n.Spotlight-V100\n.Trashes\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\nprepros.cfg\n.idea\n.vscode\n\nnode_modules/\nnpm-debug.log\ntest/styles.css\njs/ed-grid.js.map\njs/babel/.tern-port\npublic\n\n"
  },
  {
    "path": ".npmignore",
    "content": "node_modules\nnpm-debug.log\n.DS_Store\n.idea\n.gitignore\n.gitattributes\n"
  },
  {
    "path": "LICENSE",
    "content": "                    GNU GENERAL PUBLIC LICENSE\n                       Version 2, June 1991\n\n Copyright (C) 1989, 1991 Free Software Foundation, Inc., <http://fsf.org/>\n 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA\n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n                            Preamble\n\n  The licenses for most software are designed to take away your\nfreedom to share and change it.  By contrast, the GNU General Public\nLicense is intended to guarantee your freedom to share and change free\nsoftware--to make sure the software is free for all its users.  This\nGeneral Public License applies to most of the Free Software\nFoundation's software and to any other program whose authors commit to\nusing it.  (Some other Free Software Foundation software is covered by\nthe GNU Lesser General Public License instead.)  You can apply it to\nyour programs, too.\n\n  When we speak of free software, we are referring to freedom, not\nprice.  Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthis service if you wish), that you receive source code or can get it\nif you want it, that you can change the software or use pieces of it\nin new free programs; and that you know you can do these things.\n\n  To protect your rights, we need to make restrictions that forbid\nanyone to deny you these rights or to ask you to surrender the rights.\nThese restrictions translate to certain responsibilities for you if you\ndistribute copies of the software, or if you modify it.\n\n  For example, if you distribute copies of such a program, whether\ngratis or for a fee, you must give the recipients all the rights that\nyou have.  You must make sure that they, too, receive or can get the\nsource code.  And you must show them these terms so they know their\nrights.\n\n  We protect your rights with two steps: (1) copyright the software, and\n(2) offer you this license which gives you legal permission to copy,\ndistribute and/or modify the software.\n\n  Also, for each author's protection and ours, we want to make certain\nthat everyone understands that there is no warranty for this free\nsoftware.  If the software is modified by someone else and passed on, we\nwant its recipients to know that what they have is not the original, so\nthat any problems introduced by others will not reflect on the original\nauthors' reputations.\n\n  Finally, any free program is threatened constantly by software\npatents.  We wish to avoid the danger that redistributors of a free\nprogram will individually obtain patent licenses, in effect making the\nprogram proprietary.  To prevent this, we have made it clear that any\npatent must be licensed for everyone's free use or not licensed at all.\n\n  The precise terms and conditions for copying, distribution and\nmodification follow.\n\n                    GNU GENERAL PUBLIC LICENSE\n   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n\n  0. This License applies to any program or other work which contains\na notice placed by the copyright holder saying it may be distributed\nunder the terms of this General Public License.  The \"Program\", below,\nrefers to any such program or work, and a \"work based on the Program\"\nmeans either the Program or any derivative work under copyright law:\nthat is to say, a work containing the Program or a portion of it,\neither verbatim or with modifications and/or translated into another\nlanguage.  (Hereinafter, translation is included without limitation in\nthe term \"modification\".)  Each licensee is addressed as \"you\".\n\nActivities other than copying, distribution and modification are not\ncovered by this License; they are outside its scope.  The act of\nrunning the Program is not restricted, and the output from the Program\nis covered only if its contents constitute a work based on the\nProgram (independent of having been made by running the Program).\nWhether that is true depends on what the Program does.\n\n  1. You may copy and distribute verbatim copies of the Program's\nsource code as you receive it, in any medium, provided that you\nconspicuously and appropriately publish on each copy an appropriate\ncopyright notice and disclaimer of warranty; keep intact all the\nnotices that refer to this License and to the absence of any warranty;\nand give any other recipients of the Program a copy of this License\nalong with the Program.\n\nYou may charge a fee for the physical act of transferring a copy, and\nyou may at your option offer warranty protection in exchange for a fee.\n\n  2. You may modify your copy or copies of the Program or any portion\nof it, thus forming a work based on the Program, and copy and\ndistribute such modifications or work under the terms of Section 1\nabove, provided that you also meet all of these conditions:\n\n    a) You must cause the modified files to carry prominent notices\n    stating that you changed the files and the date of any change.\n\n    b) You must cause any work that you distribute or publish, that in\n    whole or in part contains or is derived from the Program or any\n    part thereof, to be licensed as a whole at no charge to all third\n    parties under the terms of this License.\n\n    c) If the modified program normally reads commands interactively\n    when run, you must cause it, when started running for such\n    interactive use in the most ordinary way, to print or display an\n    announcement including an appropriate copyright notice and a\n    notice that there is no warranty (or else, saying that you provide\n    a warranty) and that users may redistribute the program under\n    these conditions, and telling the user how to view a copy of this\n    License.  (Exception: if the Program itself is interactive but\n    does not normally print such an announcement, your work based on\n    the Program is not required to print an announcement.)\n\nThese requirements apply to the modified work as a whole.  If\nidentifiable sections of that work are not derived from the Program,\nand can be reasonably considered independent and separate works in\nthemselves, then this License, and its terms, do not apply to those\nsections when you distribute them as separate works.  But when you\ndistribute the same sections as part of a whole which is a work based\non the Program, the distribution of the whole must be on the terms of\nthis License, whose permissions for other licensees extend to the\nentire whole, and thus to each and every part regardless of who wrote it.\n\nThus, it is not the intent of this section to claim rights or contest\nyour rights to work written entirely by you; rather, the intent is to\nexercise the right to control the distribution of derivative or\ncollective works based on the Program.\n\nIn addition, mere aggregation of another work not based on the Program\nwith the Program (or with a work based on the Program) on a volume of\na storage or distribution medium does not bring the other work under\nthe scope of this License.\n\n  3. You may copy and distribute the Program (or a work based on it,\nunder Section 2) in object code or executable form under the terms of\nSections 1 and 2 above provided that you also do one of the following:\n\n    a) Accompany it with the complete corresponding machine-readable\n    source code, which must be distributed under the terms of Sections\n    1 and 2 above on a medium customarily used for software interchange; or,\n\n    b) Accompany it with a written offer, valid for at least three\n    years, to give any third party, for a charge no more than your\n    cost of physically performing source distribution, a complete\n    machine-readable copy of the corresponding source code, to be\n    distributed under the terms of Sections 1 and 2 above on a medium\n    customarily used for software interchange; or,\n\n    c) Accompany it with the information you received as to the offer\n    to distribute corresponding source code.  (This alternative is\n    allowed only for noncommercial distribution and only if you\n    received the program in object code or executable form with such\n    an offer, in accord with Subsection b above.)\n\nThe source code for a work means the preferred form of the work for\nmaking modifications to it.  For an executable work, complete source\ncode means all the source code for all modules it contains, plus any\nassociated interface definition files, plus the scripts used to\ncontrol compilation and installation of the executable.  However, as a\nspecial exception, the source code distributed need not include\nanything that is normally distributed (in either source or binary\nform) with the major components (compiler, kernel, and so on) of the\noperating system on which the executable runs, unless that component\nitself accompanies the executable.\n\nIf distribution of executable or object code is made by offering\naccess to copy from a designated place, then offering equivalent\naccess to copy the source code from the same place counts as\ndistribution of the source code, even though third parties are not\ncompelled to copy the source along with the object code.\n\n  4. You may not copy, modify, sublicense, or distribute the Program\nexcept as expressly provided under this License.  Any attempt\notherwise to copy, modify, sublicense or distribute the Program is\nvoid, and will automatically terminate your rights under this License.\nHowever, parties who have received copies, or rights, from you under\nthis License will not have their licenses terminated so long as such\nparties remain in full compliance.\n\n  5. You are not required to accept this License, since you have not\nsigned it.  However, nothing else grants you permission to modify or\ndistribute the Program or its derivative works.  These actions are\nprohibited by law if you do not accept this License.  Therefore, by\nmodifying or distributing the Program (or any work based on the\nProgram), you indicate your acceptance of this License to do so, and\nall its terms and conditions for copying, distributing or modifying\nthe Program or works based on it.\n\n  6. Each time you redistribute the Program (or any work based on the\nProgram), the recipient automatically receives a license from the\noriginal licensor to copy, distribute or modify the Program subject to\nthese terms and conditions.  You may not impose any further\nrestrictions on the recipients' exercise of the rights granted herein.\nYou are not responsible for enforcing compliance by third parties to\nthis License.\n\n  7. If, as a consequence of a court judgment or allegation of patent\ninfringement or for any other reason (not limited to patent issues),\nconditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License.  If you cannot\ndistribute so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you\nmay not distribute the Program at all.  For example, if a patent\nlicense would not permit royalty-free redistribution of the Program by\nall those who receive copies directly or indirectly through you, then\nthe only way you could satisfy both it and this License would be to\nrefrain entirely from distribution of the Program.\n\nIf any portion of this section is held invalid or unenforceable under\nany particular circumstance, the balance of the section is intended to\napply and the section as a whole is intended to apply in other\ncircumstances.\n\nIt is not the purpose of this section to induce you to infringe any\npatents or other property right claims or to contest validity of any\nsuch claims; this section has the sole purpose of protecting the\nintegrity of the free software distribution system, which is\nimplemented by public license practices.  Many people have made\ngenerous contributions to the wide range of software distributed\nthrough that system in reliance on consistent application of that\nsystem; it is up to the author/donor to decide if he or she is willing\nto distribute software through any other system and a licensee cannot\nimpose that choice.\n\nThis section is intended to make thoroughly clear what is believed to\nbe a consequence of the rest of this License.\n\n  8. If the distribution and/or use of the Program is restricted in\ncertain countries either by patents or by copyrighted interfaces, the\noriginal copyright holder who places the Program under this License\nmay add an explicit geographical distribution limitation excluding\nthose countries, so that distribution is permitted only in or among\ncountries not thus excluded.  In such case, this License incorporates\nthe limitation as if written in the body of this License.\n\n  9. The Free Software Foundation may publish revised and/or new versions\nof the General Public License from time to time.  Such new versions will\nbe similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\nEach version is given a distinguishing version number.  If the Program\nspecifies a version number of this License which applies to it and \"any\nlater version\", you have the option of following the terms and conditions\neither of that version or of any later version published by the Free\nSoftware Foundation.  If the Program does not specify a version number of\nthis License, you may choose any version ever published by the Free Software\nFoundation.\n\n  10. If you wish to incorporate parts of the Program into other free\nprograms whose distribution conditions are different, write to the author\nto ask for permission.  For software which is copyrighted by the Free\nSoftware Foundation, write to the Free Software Foundation; we sometimes\nmake exceptions for this.  Our decision will be guided by the two goals\nof preserving the free status of all derivatives of our free software and\nof promoting the sharing and reuse of software generally.\n\n                            NO WARRANTY\n\n  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY\nFOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN\nOTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES\nPROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED\nOR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS\nTO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE\nPROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,\nREPAIR OR CORRECTION.\n\n  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR\nREDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,\nINCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING\nOUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED\nTO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY\nYOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER\nPROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE\nPOSSIBILITY OF SUCH DAMAGES.\n\n                     END OF TERMS AND CONDITIONS\n\n            How to Apply These Terms to Your New Programs\n\n  If you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\n  To do so, attach the following notices to the program.  It is safest\nto attach them to the start of each source file to most effectively\nconvey the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n    {description}\n    Copyright (C) {year}  {fullname}\n\n    This program is free software; you can redistribute it and/or modify\n    it under the terms of the GNU General Public License as published by\n    the Free Software Foundation; either version 2 of the License, or\n    (at your option) any later version.\n\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU General Public License for more details.\n\n    You should have received a copy of the GNU General Public License along\n    with this program; if not, write to the Free Software Foundation, Inc.,\n    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.\n\nAlso add information on how to contact you by electronic and paper mail.\n\nIf the program is interactive, make it output a short notice like this\nwhen it starts in an interactive mode:\n\n    Gnomovision version 69, Copyright (C) year name of author\n    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.\n    This is free software, and you are welcome to redistribute it\n    under certain conditions; type `show c' for details.\n\nThe hypothetical commands `show w' and `show c' should show the appropriate\nparts of the General Public License.  Of course, the commands you use may\nbe called something other than `show w' and `show c'; they could even be\nmouse-clicks or menu items--whatever suits your program.\n\nYou should also get your employer (if you work as a programmer) or your\nschool, if any, to sign a \"copyright disclaimer\" for the program, if\nnecessary.  Here is a sample; alter the names:\n\n  Yoyodyne, Inc., hereby disclaims all copyright interest in the program\n  `Gnomovision' (which makes passes at compilers) written by James Hacker.\n\n  {signature of Ty Coon}, 1 April 1989\n  Ty Coon, President of Vice\n\nThis General Public License does not permit incorporating your program into\nproprietary programs.  If your program is a subroutine library, you may\nconsider it more useful to permit linking proprietary applications with the\nlibrary.  If this is what you want to do, use the GNU Lesser General\nPublic License instead of this License.\n"
  },
  {
    "path": "README.md",
    "content": "# EDgrid\n![Logo de EDgrid](https://ed-grid.com/assets/img/logo/EDgrid-logo.svg)\n\nEDgrid implementa un sistema de diseño flexible y personalizable para construir layouts y componentes responsive a la velocidad de la luz ⚡\n\nDocumentación oficial: https://ed-grid.com/documentacion/instalacion.html\n\nColaboradores: https://ed-grid.com/creditos/\n"
  },
  {
    "path": "docs/CNAME",
    "content": "ed-grid.com"
  },
  {
    "path": "docs/assets/img/edgrid-poster_tmp23195",
    "content": ""
  },
  {
    "path": "docs/casos-de-exito/index.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>Casos de éxito</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Casos de éxito que se encuentran actualmente en producción y que utilizan la librería de EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"Casos de éxito\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Casos de éxito que se encuentran actualmente en producción y que utilizan la librería de EDgrid.\"><meta property=\"og:url\" content=\"/casos-exito.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"Casos de éxito\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Casos de éxito que se encuentran actualmente en producción y que utilizan la librería de EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><div class=\"main-banner background s-py-4 grey-700 l-block img-container grey-700\"><div class=\"ed-grid lg-grid-6\"><div class=\"lg-cols-4 lg-x-2 s-center\"><div class=\"main-banner__data\"><div class=\"t1 s-mb-2\"><span class=\"color white-color\">Casos de éxito</span></div><p class=\"color white-color s-opacity-8 s-mb-0\">¿Tienes un sitio en producción que use EDgrid?</p><div class=\"s-pt-2\"><a class=\"button blue-500\" href=\"https://form.asana.com?hash=31f9f176c441c66d609b556604bcdedd200b3712c944519a869686a6fb11ca4c&amp;id=1189924623721081\" target=\"_blank\">⚡ Envíanos tu caso</a></div></div></div></div></div><!-- Main--><div class=\"l-block\"></div><div class=\"main-section l-big-section\"><main class=\"main-section\"><div class=\"ed-grid lg-grid-3 rows-gap l-section\"><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/ed-team-web.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">EDteam</h2><p class=\"color color-text-light\">Web oficial de EDteam</p><div class=\"card__body\"><p>Plataforma dedicada a la enseñanza de programación, diseño web y todo lo referente al mundo de desarrollo web.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"https://ed.team/\" title=\"EDteam\">Ver página</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/la-canasta.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Las Canastas</h2><p class=\"color color-text-light\">Restaurant</p><div class=\"card__body\"><p>Restaurant de parrilldas y pollos ubicada en Perú con diversas sucursales al rededor de todo el país.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"https://lascanastas.com/\" title=\"Las Canastas\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/jose-alvarado.png\"/></div></div><a target=\"_blank\" href=\"https://twitter.com/josealvaradoo\">Jose Álvarado</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/caexco.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Caexco</h2><p class=\"color color-text-light\">Tienda en línea</p><div class=\"card__body\"><p>Empresa dedicada a la comercialización de equipo agrícola, repuestos y accesorios. </p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://www.caexcobolivia.com/\" title=\"Caexco\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/beto-quiroga.jpg\"/></div></div><a target=\"_blank\" href=\"https://www.facebook.com/diterterrones\">Beto Quiroga</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/importmecardo.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Importmercado</h2><p class=\"color color-text-light\">Venta de maquinaría metalmecánica</p><div class=\"card__body\"><p>Empresa dedicada a la importación y comercialización de maquinaria metalmecánica y accesorios.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://importmercado.com/\" title=\"Importmercado\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/beto-quiroga.jpg\"/></div></div><a target=\"_blank\" href=\"https://www.facebook.com/diterterrones\">Beto Quiroga</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/capilla-cocha.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Capilla de Cochabamba</h2><p class=\"color color-text-light\">Centro educativo cristiano bilingüe</p><div class=\"card__body\"><p>Unidad Educativa fundamentada en sólidos principios bíblicos con una alta calidad en la formación académica bilingüe.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://colegiocapillacbba.edu.bo/\" title=\"Capilla de Cochabamba\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/beto-quiroga.jpg\"/></div></div><a target=\"_blank\" href=\"https://www.facebook.com/diterterrones\">Beto Quiroga</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/aremisse.jpg\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Aremisse Lima</h2><p class=\"color color-text-light\">Transporte corporativo, turístico y personal</p><div class=\"card__body\"><p>Empresa peruana dedicada al transporte de personal, transporte ejecutivo o corporativo y transporte turístico.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"https://aremisse.com/\" title=\"Aremisse Lima\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/diter-terrones.jpeg\"/></div></div><a target=\"_blank\" href=\"https://www.facebook.com/diterterrones\">Diter Terrones</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/wizardgva-web.png\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Wizardgva</h2><p class=\"color color-text-light\">Agencia de soluciones TI</p><div class=\"card__body\"><p>Wizardgva nace del sueño de un joven por brindar soluciones de hardware rápidas y accesibles</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"https://wizardgva.com/\" title=\"Wizardgva\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/wizardgva-user.png\"/></div></div><a target=\"_blank\" href=\"https://www.linkedin.com/in/restrepodanny/\">Danny Restrepo</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/alkila-web.png\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Alkila</h2><p class=\"color color-text-light\">Empresa de reta de autos</p><div class=\"card__body\"><p>Alkila es una empresa Peruana dedicada al rubro de alquiler de vehículos.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://alkilarentacar.com\" title=\"Alkila\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/alkila-user.png\"/></div></div><a target=\"_blank\" href=\"https://www.linkedin.com/in/edwingromero/\">Edwing Romero</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/gema-web.png\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Agencia Gema</h2><p class=\"color color-text-light\">Agencia de eventos</p><div class=\"card__body\"><p>En Gema, son especialistas en el servicio de banquetes y renta de equipo para todo tipo de eventos</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://agenciagema.com/\" title=\"Agencia Gema\">Ver página</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/robert-web.png\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Portafolio - Robert</h2><p class=\"color color-text-light\">Portafolio</p><div class=\"card__body\"><p>Esta web es el portfolio de Robert Huamán Cáceres, estudiante en Ingeniería informática y sistemas de la Universidad Nacional Micaela Bastidas de Apurímac - Perú</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"https://pepobj.github.io/dist/\" title=\"Portafolio - Robert\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/robert-user.png\"/></div></div><a target=\"_blank\" href=\"https://www.linkedin.com/in/robert-bj-huaman/\">Robert BJ Huamán</a></div></footer></div></div><div class=\"testimony-card s-column s-border s-radius s-bg-white s-shadow-bottom\"><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-tl s-radius-tr\" src=\"/assets/img/militaria-web.png\"/></div><div class=\"content s-pxy-2 s-column\"><h2 class=\"t3 s-mb-1\">Militaria</h2><p class=\"color color-text-light\">Empresa</p><div class=\"card__body\"><p>Empresa peruana dedicada a la exportación de indumentaria y accesorios para uso militar.</p></div><footer class=\"card__footer s-cross-center nowrap\"><div class=\"card__btn small s-mr-1\"><a class=\"button small ghost\" target=\"_blank\" href=\"http://militaria.com.pe/\" title=\"Militaria\">Ver página</a></div><div class=\"s-to-right s-cross-center user-avatar\"><div class=\"photo s-mr-1\"><div class=\"img-container circle\"><img src=\"/assets/img/alkila-user.png\"/></div></div><a target=\"_blank\" href=\"https://www.linkedin.com/in/robert-bj-huaman/\">Edwing Romero</a></div></footer></div></div></div><div class=\"ed-grid s-center\"><h3>¿Quieres que tu sitio sea parte de esta página?</h3><div><a class=\"button blue-500\" href=\"https://form.asana.com?hash=31f9f176c441c66d609b556604bcdedd200b3712c944519a869686a6fb11ca4c&amp;id=1189924623721081\" target=\"_blank\">⚡ Envíanos tu caso</a></div></div></main></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/changelog/index.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Changelog</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Registro de cambios que ha tenido la librería EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Changelog\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Registro de cambios que ha tenido la librería EDgrid.\"><meta property=\"og:url\" content=\"/funciones.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Changelog\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Registro de cambios que ha tenido la librería EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><div class=\"main-banner background s-py-4 grey-700 l-block img-container grey-700\"><div class=\"ed-grid lg-grid-6\"><div class=\"lg-cols-4 lg-x-2 s-center\"><div class=\"main-banner__data\"><div class=\"t1 s-mb-2\"><span class=\"color white-color\">Changelog</span></div><p class=\"color white-color s-opacity-8 s-mb-0\">Lanzamientos importantes de EDgrid</p></div></div></div></div><!-- Main--><div class=\"l-block\"></div><div class=\"main-section l-big-section\"><div class=\"ed-grid lg-grid-6\"><div class=\"lg-cols-4 lg-x-2\"><ul class=\"data-list\"><li class=\"s-column s-cross-start\"><div class=\"container s-column\"><div class=\"s-main-justify\"><span class=\"s-mb-1 strong\">Actual (v 3.0)</span><a class=\"button small icon-download space\" href=\"https://github.com/escueladigital/EDgrid/archive/master.zip\" itemprop=\"url\" target=\"_blank\">Descargar versión</a></div><ul class=\"small s-pl-0\"><li>- CSS Grid para crear layouts</li><li>- Versión desarrollo para CSS grid</li><li>- Modo dev en hover para CSS grid y flexbox</li><li>- Correcciones en clases de alineación</li><li>- Se eliminó el componente Menu (pasó a ser legacy)</li><li>- Corrige error en los .ed-container con la clase .full</li><li>- Prototipado y prototipado avanzado</li><li>- Sección de componentes creados con EDgrid</li><li>- CDN para a versión CSS</li><li>- Modifica estructura de archivos del core principal</li><li>- Mejoras en código en general</li></ul></div></li><li><p><span class=\"strong\">v2.1.6 (Mayo 2017)</span><br><span class=\"small\">Agrega CSS grid y resuelve varios bugs menores.</span></p><a class=\"button small icon-download space\" href=\"https://github.com/escueladigital/EDgrid/archive/v2.0.2.zip\" itemprop=\"url\" target=\"_blank\">Descargar versión</a></li><li><p><span class=\"strong\">v2.0 (3 dic 2016)</span><br><span class=\"small\">Cambia su enfoque al de librería (pretendía ser un framework) en versión Sass y CSS. Permite usar mixins que compilano solo el código necesario, además de activar y desactivar componentes.</span></p><a class=\"button small icon-download space\" href=\"https://github.com/escueladigital/EDgrid/releases/tag/v2.0.0\" itemprop=\"url\" target=\"_blank\">Descargar versión</a></li><li><p><span class=\"strong\">v1.2 (26 sep 2015)</span><br><span class=\"small\">Se cambia floats por flexbox. Se usan las clases <code>.ed-container</code> y <code>.ed-item</code> en remplazo de <code>.grupo</code> y <code>.caja</code></span></p><a class=\"button small icon-download space\" href=\"https://github.com/escueladigital/EDgrid/releases/tag/1.2\" itemprop=\"url\" target=\"_blank\">Descargar versión</a></li><li><p><span class=\"strong\">v1.0 (19 abr 2015)</span><br><span class=\"small\">Uso de floats, clases <code>.grupo</code> y <code>.caja</code></span></p><a class=\"button small icon-download space\" href=\"https://github.com/escueladigital/EDgrid/releases/tag/v1.0\" itemprop=\"url\" target=\"_blank\">Descargar versión</a></li></ul></div></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/creditos/index.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Créditos</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Créditos de quien realizo la librería, colaboro desarrollando el portal.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Créditos\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Créditos de quien realizo la librería, colaboro desarrollando el portal.\"><meta property=\"og:url\" content=\"/creditos.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Créditos\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Créditos de quien realizo la librería, colaboro desarrollando el portal.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><div class=\"main-banner background s-py-4 grey-700 l-block img-container dark-color\"><div class=\"ed-grid lg-grid-6\"><div class=\"lg-cols-4 lg-x-2 s-center\"><div class=\"main-banner__data\"><div class=\"t1 s-mb-2\"><span class=\"color white-color\">Créditos</span></div><p class=\"color white-color s-opacity-8 s-mb-0\">Gente que ha ayudado a construir la librería.</p><p class=\"s-opacity-8 s-mb-0\">¿Quieres ser uno de ellos?</p><div class=\"s-pt-2\"><a class=\"button blue-500\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\">😼 Colabora en EDgrid</a></div></div></div></div></div><!-- Main--><div class=\"l-block\"></div><div class=\"main-section l-big-section\"><div class=\"ed-grid\"><div class=\"s-to-center s-65\"><main class=\"ed-grid m-grid-2 lg-grid-3 row-gap l-section\"><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://www.linkedin.com/in/alvarofelipe/\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/alvaro-felipe.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Álvaro Felipe</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">CEO de EDteam</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://twitter.com/Jopzik\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/alexis-mora.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Alexis Mora Angulo</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">UX Designer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/carloscuatin\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/carlos-cuatin.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Carlos Cuatin</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Frontend Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/aeroxmotion\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/camilo-rodirguez.png\"/></div></a><p class=\"t4 s-mb-1 s-center\">Camilo Rodríguez</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Web Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/danielromeroauk\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/daniel-romero.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Daniel Romero</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Backend Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/francocorreasosa\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/franco-correa.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Franco Correa</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Web Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/Revod\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/ernesto-graterol.png\"/></div></a><p class=\"t4 s-mb-1 s-center\">Ernesto Graterol</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">UI Designer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/daniel7byte\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/jose-daniel.png\"/></div></a><p class=\"t4 s-mb-1 s-center\">Jose Daniel Posso Garcia</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://www.linkedin.com/in/alex-andrei/\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/alex-andrei.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Alex Andrei</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Frontend Developer</p></article><article class=\"s-mb-0 s-column s-cross-center s-pxy-2\"><a class=\"s-70 s-to-center s-mb-2\" href=\"https://github.com/AKUmajinn\" target=\"_blank\"><div class=\"img-container circle\"><img src=\"/assets/img/people/johelyn.jpg\"/></div></a><p class=\"t4 s-mb-1 s-center\">Johelyn Cordovao</p><p class=\"color blue-500 s-mb-0 smaller font-semibold\">Web Designer</p></article></main></div></div><div class=\"ed-grid s-center\"><h3>¿Quieres ser parte de esta página?</h3><div><a class=\"button blue-500\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\">😼 Colabora en EDgrid</a></div></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/css/styles.css",
    "content": "@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@700;800&display=swap\");*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:sans-serif}img{max-width:100%;height:auto}a{text-decoration:none}a:hover{text-decoration:underline}body.dev:before,body.desarrollo:before,body.dev .ed-container:before,body.dev .ed-grid:before,body.desarrollo .ed-container:before,body.desarrollo .ed-grid:before,body.dev .ed-item:before,body.dev .ed-grid>*:before,body.desarrollo .ed-item:before,body.desarrollo .ed-grid>*:before,body.dev-hover .ed-container:hover:before,body.dev-hover .ed-grid:hover:before,body.desarrollo-hover .ed-container:hover:before,body.desarrollo-hover .ed-grid:hover:before,body.dev-hover .ed-item:hover:before,body.dev-hover .ed-grid>*:hover:before,body.desarrollo-hover .ed-item:hover:before,body.desarrollo-hover .ed-grid>*:hover:before,.dev-demo:before,.dev-demo-hover:before,.dev-demo .ed-container:before,.dev-demo .ed-grid:before,.dev-demo .ed-item:before,.dev-demo .ed-grid>*:before,.dev-demo-hover .ed-container:hover:before,.dev-demo-hover .ed-grid:hover:before,.dev-demo-hover .ed-item:hover:before,.dev-demo-hover .ed-grid>*:hover:before{content:attr(class);font-style:italic;font-size:.75rem;font-weight:normal;z-index:1;right:0;position:absolute;display:table;width:100%;padding:0 .3125em;height:1.25rem;line-height:1.25rem}body.dev,body.desarrollo{margin:0 !important;position:relative;top:66px}body.dev:before,body.desarrollo:before{position:fixed;background:steelblue;color:#FFF;font-size:.875rem;text-align:center;line-height:36px;height:36px;top:0}body.dev:before,body.desarrollo:before{content:\"ed-grid: size s, from 0 (ed-containers: red, ed-items: blue, yellow)\"}@media screen and (min-width: 640px){body.dev:before,body.desarrollo:before{content:\"ed-grid: size m, from 640px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1024px){body.dev:before,body.desarrollo:before{content:\"ed-grid: size l, from 1024px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1024px){body.dev:before,body.desarrollo:before{content:\"ed-grid: size lg, from 1024px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1440px){body.dev:before,body.desarrollo:before{content:\"ed-grid: size xl, from 1440px (ed-containers: red, ed-items: blue, yellow)\"}}body.dev .ed-container,body.dev .ed-grid,body.desarrollo .ed-container,body.desarrollo .ed-grid{padding-top:1.25rem;margin-bottom:10px;outline:1px solid tomato;position:relative}body.dev .ed-container .ed-container,body.dev .ed-container .ed-grid,body.dev .ed-grid .ed-container,body.dev .ed-grid .ed-grid,body.desarrollo .ed-container .ed-container,body.desarrollo .ed-container .ed-grid,body.desarrollo .ed-grid .ed-container,body.desarrollo .ed-grid .ed-grid{margin-bottom:0}body.dev .ed-container:before,body.dev .ed-grid:before,body.desarrollo .ed-container:before,body.desarrollo .ed-grid:before{top:0;background:rgba(255,99,71,0.3);color:tomato}body.dev .ed-item,body.dev .ed-grid>*,body.desarrollo .ed-item,body.desarrollo .ed-grid>*{position:relative;padding-bottom:1.25rem;background-color:rgba(70,130,180,0.1);outline:1px solid #4682b4;background-clip:content-box}body.dev .ed-item:before,body.dev .ed-grid>*:before,body.desarrollo .ed-item:before,body.desarrollo .ed-grid>*:before{background:rgba(70,130,180,0.8);color:#FFF;bottom:0}body.dev-hover .ed-container:hover,body.dev-hover .ed-grid:hover,body.desarrollo-hover .ed-container:hover,body.desarrollo-hover .ed-grid:hover{padding-top:1.25rem;margin-bottom:10px;outline:1px solid tomato;position:relative}body.dev-hover .ed-container:hover .ed-container,body.dev-hover .ed-container:hover .ed-grid,body.dev-hover .ed-grid:hover .ed-container,body.dev-hover .ed-grid:hover .ed-grid,body.desarrollo-hover .ed-container:hover .ed-container,body.desarrollo-hover .ed-container:hover .ed-grid,body.desarrollo-hover .ed-grid:hover .ed-container,body.desarrollo-hover .ed-grid:hover .ed-grid{margin-bottom:0}body.dev-hover .ed-container:hover:before,body.dev-hover .ed-grid:hover:before,body.desarrollo-hover .ed-container:hover:before,body.desarrollo-hover .ed-grid:hover:before{top:0;background:rgba(255,99,71,0.3);color:tomato}body.dev-hover .ed-item:hover,body.dev-hover .ed-grid>*:hover,body.desarrollo-hover .ed-item:hover,body.desarrollo-hover .ed-grid>*:hover{position:relative;padding-bottom:1.25rem;background-color:rgba(70,130,180,0.1);outline:1px solid #4682b4;background-clip:content-box}body.dev-hover .ed-item:hover:before,body.dev-hover .ed-grid>*:hover:before,body.desarrollo-hover .ed-item:hover:before,body.desarrollo-hover .ed-grid>*:hover:before{background:rgba(70,130,180,0.8);color:#FFF;bottom:0}.ed-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:var(--max-width);margin-left:auto;margin-right:auto;width:100%}.ed-item{margin:0;padding-left:1rem;padding-right:1rem}.ed-container.full{max-width:100%}.ed-item{width:100%}.ed-item.ed-container{padding-left:0;padding-right:0}.s-5,.ed-item.s-5{width:5%}.s-10,.ed-item.s-10{width:10%}.s-15,.ed-item.s-15{width:15%}.s-20,.ed-item.s-20{width:20%}.s-25,.ed-item.s-25{width:25%}.s-30,.ed-item.s-30{width:30%}.s-35,.ed-item.s-35{width:35%}.s-40,.ed-item.s-40{width:40%}.s-45,.ed-item.s-45{width:45%}.s-50,.ed-item.s-50{width:50%}.s-55,.ed-item.s-55{width:55%}.s-60,.ed-item.s-60{width:60%}.s-65,.ed-item.s-65{width:65%}.s-70,.ed-item.s-70{width:70%}.s-75,.ed-item.s-75{width:75%}.s-80,.ed-item.s-80{width:80%}.s-85,.ed-item.s-85{width:85%}.s-90,.ed-item.s-90{width:90%}.s-95,.ed-item.s-95{width:95%}.s-100,.ed-item.s-100{width:100%}.s-1-3,.ed-item.s-1-3{width:33.33333%}.s-2-3,.ed-item.s-2-3{width:66.66667%}.s-3-3,.ed-item.s-3-3{width:100%}.s-1-6,.ed-item.s-1-6{width:16.66667%}.s-2-6,.ed-item.s-2-6{width:33.33333%}.s-3-6,.ed-item.s-3-6{width:50%}.s-4-6,.ed-item.s-4-6{width:66.66667%}.s-5-6,.ed-item.s-5-6{width:83.33333%}.s-6-6,.ed-item.s-6-6{width:100%}@media screen and (min-width: 640px){.m-5,.ed-item.m-5{width:5%}.m-10,.ed-item.m-10{width:10%}.m-15,.ed-item.m-15{width:15%}.m-20,.ed-item.m-20{width:20%}.m-25,.ed-item.m-25{width:25%}.m-30,.ed-item.m-30{width:30%}.m-35,.ed-item.m-35{width:35%}.m-40,.ed-item.m-40{width:40%}.m-45,.ed-item.m-45{width:45%}.m-50,.ed-item.m-50{width:50%}.m-55,.ed-item.m-55{width:55%}.m-60,.ed-item.m-60{width:60%}.m-65,.ed-item.m-65{width:65%}.m-70,.ed-item.m-70{width:70%}.m-75,.ed-item.m-75{width:75%}.m-80,.ed-item.m-80{width:80%}.m-85,.ed-item.m-85{width:85%}.m-90,.ed-item.m-90{width:90%}.m-95,.ed-item.m-95{width:95%}.m-100,.ed-item.m-100{width:100%}.m-1-3,.ed-item.m-1-3{width:33.33333%}.m-2-3,.ed-item.m-2-3{width:66.66667%}.m-3-3,.ed-item.m-3-3{width:100%}.m-1-6,.ed-item.m-1-6{width:16.66667%}.m-2-6,.ed-item.m-2-6{width:33.33333%}.m-3-6,.ed-item.m-3-6{width:50%}.m-4-6,.ed-item.m-4-6{width:66.66667%}.m-5-6,.ed-item.m-5-6{width:83.33333%}.m-6-6,.ed-item.m-6-6{width:100%}}@media screen and (min-width: 1024px){.l-5,.ed-item.l-5{width:5%}.l-10,.ed-item.l-10{width:10%}.l-15,.ed-item.l-15{width:15%}.l-20,.ed-item.l-20{width:20%}.l-25,.ed-item.l-25{width:25%}.l-30,.ed-item.l-30{width:30%}.l-35,.ed-item.l-35{width:35%}.l-40,.ed-item.l-40{width:40%}.l-45,.ed-item.l-45{width:45%}.l-50,.ed-item.l-50{width:50%}.l-55,.ed-item.l-55{width:55%}.l-60,.ed-item.l-60{width:60%}.l-65,.ed-item.l-65{width:65%}.l-70,.ed-item.l-70{width:70%}.l-75,.ed-item.l-75{width:75%}.l-80,.ed-item.l-80{width:80%}.l-85,.ed-item.l-85{width:85%}.l-90,.ed-item.l-90{width:90%}.l-95,.ed-item.l-95{width:95%}.l-100,.ed-item.l-100{width:100%}.l-1-3,.ed-item.l-1-3{width:33.33333%}.l-2-3,.ed-item.l-2-3{width:66.66667%}.l-3-3,.ed-item.l-3-3{width:100%}.l-1-6,.ed-item.l-1-6{width:16.66667%}.l-2-6,.ed-item.l-2-6{width:33.33333%}.l-3-6,.ed-item.l-3-6{width:50%}.l-4-6,.ed-item.l-4-6{width:66.66667%}.l-5-6,.ed-item.l-5-6{width:83.33333%}.l-6-6,.ed-item.l-6-6{width:100%}}@media screen and (min-width: 1024px){.lg-5,.ed-item.lg-5{width:5%}.lg-10,.ed-item.lg-10{width:10%}.lg-15,.ed-item.lg-15{width:15%}.lg-20,.ed-item.lg-20{width:20%}.lg-25,.ed-item.lg-25{width:25%}.lg-30,.ed-item.lg-30{width:30%}.lg-35,.ed-item.lg-35{width:35%}.lg-40,.ed-item.lg-40{width:40%}.lg-45,.ed-item.lg-45{width:45%}.lg-50,.ed-item.lg-50{width:50%}.lg-55,.ed-item.lg-55{width:55%}.lg-60,.ed-item.lg-60{width:60%}.lg-65,.ed-item.lg-65{width:65%}.lg-70,.ed-item.lg-70{width:70%}.lg-75,.ed-item.lg-75{width:75%}.lg-80,.ed-item.lg-80{width:80%}.lg-85,.ed-item.lg-85{width:85%}.lg-90,.ed-item.lg-90{width:90%}.lg-95,.ed-item.lg-95{width:95%}.lg-100,.ed-item.lg-100{width:100%}.lg-1-3,.ed-item.lg-1-3{width:33.33333%}.lg-2-3,.ed-item.lg-2-3{width:66.66667%}.lg-3-3,.ed-item.lg-3-3{width:100%}.lg-1-6,.ed-item.lg-1-6{width:16.66667%}.lg-2-6,.ed-item.lg-2-6{width:33.33333%}.lg-3-6,.ed-item.lg-3-6{width:50%}.lg-4-6,.ed-item.lg-4-6{width:66.66667%}.lg-5-6,.ed-item.lg-5-6{width:83.33333%}.lg-6-6,.ed-item.lg-6-6{width:100%}}@media screen and (min-width: 1440px){.xl-5,.ed-item.xl-5{width:5%}.xl-10,.ed-item.xl-10{width:10%}.xl-15,.ed-item.xl-15{width:15%}.xl-20,.ed-item.xl-20{width:20%}.xl-25,.ed-item.xl-25{width:25%}.xl-30,.ed-item.xl-30{width:30%}.xl-35,.ed-item.xl-35{width:35%}.xl-40,.ed-item.xl-40{width:40%}.xl-45,.ed-item.xl-45{width:45%}.xl-50,.ed-item.xl-50{width:50%}.xl-55,.ed-item.xl-55{width:55%}.xl-60,.ed-item.xl-60{width:60%}.xl-65,.ed-item.xl-65{width:65%}.xl-70,.ed-item.xl-70{width:70%}.xl-75,.ed-item.xl-75{width:75%}.xl-80,.ed-item.xl-80{width:80%}.xl-85,.ed-item.xl-85{width:85%}.xl-90,.ed-item.xl-90{width:90%}.xl-95,.ed-item.xl-95{width:95%}.xl-100,.ed-item.xl-100{width:100%}.xl-1-3,.ed-item.xl-1-3{width:33.33333%}.xl-2-3,.ed-item.xl-2-3{width:66.66667%}.xl-3-3,.ed-item.xl-3-3{width:100%}.xl-1-6,.ed-item.xl-1-6{width:16.66667%}.xl-2-6,.ed-item.xl-2-6{width:33.33333%}.xl-3-6,.ed-item.xl-3-6{width:50%}.xl-4-6,.ed-item.xl-4-6{width:66.66667%}.xl-5-6,.ed-item.xl-5-6{width:83.33333%}.xl-6-6,.ed-item.xl-6-6{width:100%}}.ed-grid.s-gap-0{--gap:0rem}@media screen and (min-width: 640px){.ed-grid.m-gap-0{--gap:0rem}}@media screen and (min-width: 1024px){.ed-grid.l-gap-0{--gap:0rem}}@media screen and (min-width: 1024px){.ed-grid.lg-gap-0{--gap:0rem}}@media screen and (min-width: 1440px){.ed-grid.xl-gap-0{--gap:0rem}}.ed-grid.s-gap-1{--gap:.5rem}@media screen and (min-width: 640px){.ed-grid.m-gap-1{--gap:.5rem}}@media screen and (min-width: 1024px){.ed-grid.l-gap-1{--gap:.5rem}}@media screen and (min-width: 1024px){.ed-grid.lg-gap-1{--gap:.5rem}}@media screen and (min-width: 1440px){.ed-grid.xl-gap-1{--gap:.5rem}}.ed-grid.s-gap-2{--gap:1rem}@media screen and (min-width: 640px){.ed-grid.m-gap-2{--gap:1rem}}@media screen and (min-width: 1024px){.ed-grid.l-gap-2{--gap:1rem}}@media screen and (min-width: 1024px){.ed-grid.lg-gap-2{--gap:1rem}}@media screen and (min-width: 1440px){.ed-grid.xl-gap-2{--gap:1rem}}.ed-grid.s-gap-3{--gap:1.5rem}@media screen and (min-width: 640px){.ed-grid.m-gap-3{--gap:1.5rem}}@media screen and (min-width: 1024px){.ed-grid.l-gap-3{--gap:1.5rem}}@media screen and (min-width: 1024px){.ed-grid.lg-gap-3{--gap:1.5rem}}@media screen and (min-width: 1440px){.ed-grid.xl-gap-3{--gap:1.5rem}}.ed-grid.s-gap-4{--gap:2rem}@media screen and (min-width: 640px){.ed-grid.m-gap-4{--gap:2rem}}@media screen and (min-width: 1024px){.ed-grid.l-gap-4{--gap:2rem}}@media screen and (min-width: 1024px){.ed-grid.lg-gap-4{--gap:2rem}}@media screen and (min-width: 1440px){.ed-grid.xl-gap-4{--gap:2rem}}.ed-grid{display:-ms-grid;display:grid;-ms-grid-columns:100%;grid-template-columns:100%;column-gap:var(--gap);width:calc(100% - 2rem);margin-left:1rem;margin-right:1rem;max-width:var(--max-width)}.ed-grid.gap-0{--gap: 0rem}.ed-grid.gap-1{--gap: .5rem}.ed-grid.gap-2{--gap: 1rem}.ed-grid.gap-3{--gap: 1.5rem}.ed-grid.gap-4{--gap: 2rem}@media screen and (min-width: 1200px){.ed-grid{width:100%;margin-left:auto;margin-right:auto}}.ed-grid.row-gap,.ed-grid.rows-gap{row-gap:var(--gap)}.ed-grid .ed-grid,.ed-grid.full{width:100%;max-width:100%;margin-right:0;margin-left:0}.ed-grid .ed-grid.s-5,.ed-grid .ed-grid .ed-grid.s-5{width:5%}.ed-grid .ed-grid.s-10,.ed-grid .ed-grid .ed-grid.s-10{width:10%}.ed-grid .ed-grid.s-15,.ed-grid .ed-grid .ed-grid.s-15{width:15%}.ed-grid .ed-grid.s-20,.ed-grid .ed-grid .ed-grid.s-20{width:20%}.ed-grid .ed-grid.s-25,.ed-grid .ed-grid .ed-grid.s-25{width:25%}.ed-grid .ed-grid.s-30,.ed-grid .ed-grid .ed-grid.s-30{width:30%}.ed-grid .ed-grid.s-35,.ed-grid .ed-grid .ed-grid.s-35{width:35%}.ed-grid .ed-grid.s-40,.ed-grid .ed-grid .ed-grid.s-40{width:40%}.ed-grid .ed-grid.s-45,.ed-grid .ed-grid .ed-grid.s-45{width:45%}.ed-grid .ed-grid.s-50,.ed-grid .ed-grid .ed-grid.s-50{width:50%}.ed-grid .ed-grid.s-55,.ed-grid .ed-grid .ed-grid.s-55{width:55%}.ed-grid .ed-grid.s-60,.ed-grid .ed-grid .ed-grid.s-60{width:60%}.ed-grid .ed-grid.s-65,.ed-grid .ed-grid .ed-grid.s-65{width:65%}.ed-grid .ed-grid.s-70,.ed-grid .ed-grid .ed-grid.s-70{width:70%}.ed-grid .ed-grid.s-75,.ed-grid .ed-grid .ed-grid.s-75{width:75%}.ed-grid .ed-grid.s-80,.ed-grid .ed-grid .ed-grid.s-80{width:80%}.ed-grid .ed-grid.s-85,.ed-grid .ed-grid .ed-grid.s-85{width:85%}.ed-grid .ed-grid.s-90,.ed-grid .ed-grid .ed-grid.s-90{width:90%}.ed-grid .ed-grid.s-95,.ed-grid .ed-grid .ed-grid.s-95{width:95%}.ed-grid .ed-grid.s-100,.ed-grid .ed-grid .ed-grid.s-100{width:100%}.ed-grid .ed-grid.s-to-center,.ed-grid .ed-grid .ed-grid.s-to-center{margin-left:auto;margin-right:auto}.ed-grid .ed-grid.s-to-right,.ed-grid .ed-grid .ed-grid.s-to-right{margin-left:auto;margin-right:0}.ed-grid .ed-grid.s-to-left,.ed-grid .ed-grid .ed-grid.s-to-left{margin-left:0;margin-right:auto}@media screen and (min-width: 640px){.ed-grid .ed-grid.m-5,.ed-grid .ed-grid .ed-grid.m-5{width:5%}.ed-grid .ed-grid.m-10,.ed-grid .ed-grid .ed-grid.m-10{width:10%}.ed-grid .ed-grid.m-15,.ed-grid .ed-grid .ed-grid.m-15{width:15%}.ed-grid .ed-grid.m-20,.ed-grid .ed-grid .ed-grid.m-20{width:20%}.ed-grid .ed-grid.m-25,.ed-grid .ed-grid .ed-grid.m-25{width:25%}.ed-grid .ed-grid.m-30,.ed-grid .ed-grid .ed-grid.m-30{width:30%}.ed-grid .ed-grid.m-35,.ed-grid .ed-grid .ed-grid.m-35{width:35%}.ed-grid .ed-grid.m-40,.ed-grid .ed-grid .ed-grid.m-40{width:40%}.ed-grid .ed-grid.m-45,.ed-grid .ed-grid .ed-grid.m-45{width:45%}.ed-grid .ed-grid.m-50,.ed-grid .ed-grid .ed-grid.m-50{width:50%}.ed-grid .ed-grid.m-55,.ed-grid .ed-grid .ed-grid.m-55{width:55%}.ed-grid .ed-grid.m-60,.ed-grid .ed-grid .ed-grid.m-60{width:60%}.ed-grid .ed-grid.m-65,.ed-grid .ed-grid .ed-grid.m-65{width:65%}.ed-grid .ed-grid.m-70,.ed-grid .ed-grid .ed-grid.m-70{width:70%}.ed-grid .ed-grid.m-75,.ed-grid .ed-grid .ed-grid.m-75{width:75%}.ed-grid .ed-grid.m-80,.ed-grid .ed-grid .ed-grid.m-80{width:80%}.ed-grid .ed-grid.m-85,.ed-grid .ed-grid .ed-grid.m-85{width:85%}.ed-grid .ed-grid.m-90,.ed-grid .ed-grid .ed-grid.m-90{width:90%}.ed-grid .ed-grid.m-95,.ed-grid .ed-grid .ed-grid.m-95{width:95%}.ed-grid .ed-grid.m-100,.ed-grid .ed-grid .ed-grid.m-100{width:100%}.ed-grid .ed-grid.m-to-center,.ed-grid .ed-grid .ed-grid.m-to-center{margin-left:auto;margin-right:auto}.ed-grid .ed-grid.m-to-right,.ed-grid .ed-grid .ed-grid.m-to-right{margin-left:auto;margin-right:0}.ed-grid .ed-grid.m-to-left,.ed-grid .ed-grid .ed-grid.m-to-left{margin-left:0;margin-right:auto}}@media screen and (min-width: 1024px){.ed-grid .ed-grid.l-5,.ed-grid .ed-grid .ed-grid.l-5{width:5%}.ed-grid .ed-grid.l-10,.ed-grid .ed-grid .ed-grid.l-10{width:10%}.ed-grid .ed-grid.l-15,.ed-grid .ed-grid .ed-grid.l-15{width:15%}.ed-grid .ed-grid.l-20,.ed-grid .ed-grid .ed-grid.l-20{width:20%}.ed-grid .ed-grid.l-25,.ed-grid .ed-grid .ed-grid.l-25{width:25%}.ed-grid .ed-grid.l-30,.ed-grid .ed-grid .ed-grid.l-30{width:30%}.ed-grid .ed-grid.l-35,.ed-grid .ed-grid .ed-grid.l-35{width:35%}.ed-grid .ed-grid.l-40,.ed-grid .ed-grid .ed-grid.l-40{width:40%}.ed-grid .ed-grid.l-45,.ed-grid .ed-grid .ed-grid.l-45{width:45%}.ed-grid .ed-grid.l-50,.ed-grid .ed-grid .ed-grid.l-50{width:50%}.ed-grid .ed-grid.l-55,.ed-grid .ed-grid .ed-grid.l-55{width:55%}.ed-grid .ed-grid.l-60,.ed-grid .ed-grid .ed-grid.l-60{width:60%}.ed-grid .ed-grid.l-65,.ed-grid .ed-grid .ed-grid.l-65{width:65%}.ed-grid .ed-grid.l-70,.ed-grid .ed-grid .ed-grid.l-70{width:70%}.ed-grid .ed-grid.l-75,.ed-grid .ed-grid .ed-grid.l-75{width:75%}.ed-grid .ed-grid.l-80,.ed-grid .ed-grid .ed-grid.l-80{width:80%}.ed-grid .ed-grid.l-85,.ed-grid .ed-grid .ed-grid.l-85{width:85%}.ed-grid .ed-grid.l-90,.ed-grid .ed-grid .ed-grid.l-90{width:90%}.ed-grid .ed-grid.l-95,.ed-grid .ed-grid .ed-grid.l-95{width:95%}.ed-grid .ed-grid.l-100,.ed-grid .ed-grid .ed-grid.l-100{width:100%}.ed-grid .ed-grid.l-to-center,.ed-grid .ed-grid .ed-grid.l-to-center{margin-left:auto;margin-right:auto}.ed-grid .ed-grid.l-to-right,.ed-grid .ed-grid .ed-grid.l-to-right{margin-left:auto;margin-right:0}.ed-grid .ed-grid.l-to-left,.ed-grid .ed-grid .ed-grid.l-to-left{margin-left:0;margin-right:auto}}@media screen and (min-width: 1024px){.ed-grid .ed-grid.lg-5,.ed-grid .ed-grid .ed-grid.lg-5{width:5%}.ed-grid .ed-grid.lg-10,.ed-grid .ed-grid .ed-grid.lg-10{width:10%}.ed-grid .ed-grid.lg-15,.ed-grid .ed-grid .ed-grid.lg-15{width:15%}.ed-grid .ed-grid.lg-20,.ed-grid .ed-grid .ed-grid.lg-20{width:20%}.ed-grid .ed-grid.lg-25,.ed-grid .ed-grid .ed-grid.lg-25{width:25%}.ed-grid .ed-grid.lg-30,.ed-grid .ed-grid .ed-grid.lg-30{width:30%}.ed-grid .ed-grid.lg-35,.ed-grid .ed-grid .ed-grid.lg-35{width:35%}.ed-grid .ed-grid.lg-40,.ed-grid .ed-grid .ed-grid.lg-40{width:40%}.ed-grid .ed-grid.lg-45,.ed-grid .ed-grid .ed-grid.lg-45{width:45%}.ed-grid .ed-grid.lg-50,.ed-grid .ed-grid .ed-grid.lg-50{width:50%}.ed-grid .ed-grid.lg-55,.ed-grid .ed-grid .ed-grid.lg-55{width:55%}.ed-grid .ed-grid.lg-60,.ed-grid .ed-grid .ed-grid.lg-60{width:60%}.ed-grid .ed-grid.lg-65,.ed-grid .ed-grid .ed-grid.lg-65{width:65%}.ed-grid .ed-grid.lg-70,.ed-grid .ed-grid .ed-grid.lg-70{width:70%}.ed-grid .ed-grid.lg-75,.ed-grid .ed-grid .ed-grid.lg-75{width:75%}.ed-grid .ed-grid.lg-80,.ed-grid .ed-grid .ed-grid.lg-80{width:80%}.ed-grid .ed-grid.lg-85,.ed-grid .ed-grid .ed-grid.lg-85{width:85%}.ed-grid .ed-grid.lg-90,.ed-grid .ed-grid .ed-grid.lg-90{width:90%}.ed-grid .ed-grid.lg-95,.ed-grid .ed-grid .ed-grid.lg-95{width:95%}.ed-grid .ed-grid.lg-100,.ed-grid .ed-grid .ed-grid.lg-100{width:100%}.ed-grid .ed-grid.lg-to-center,.ed-grid .ed-grid .ed-grid.lg-to-center{margin-left:auto;margin-right:auto}.ed-grid .ed-grid.lg-to-right,.ed-grid .ed-grid .ed-grid.lg-to-right{margin-left:auto;margin-right:0}.ed-grid .ed-grid.lg-to-left,.ed-grid .ed-grid .ed-grid.lg-to-left{margin-left:0;margin-right:auto}}@media screen and (min-width: 1440px){.ed-grid .ed-grid.xl-5,.ed-grid .ed-grid .ed-grid.xl-5{width:5%}.ed-grid .ed-grid.xl-10,.ed-grid .ed-grid .ed-grid.xl-10{width:10%}.ed-grid .ed-grid.xl-15,.ed-grid .ed-grid .ed-grid.xl-15{width:15%}.ed-grid .ed-grid.xl-20,.ed-grid .ed-grid .ed-grid.xl-20{width:20%}.ed-grid .ed-grid.xl-25,.ed-grid .ed-grid .ed-grid.xl-25{width:25%}.ed-grid .ed-grid.xl-30,.ed-grid .ed-grid .ed-grid.xl-30{width:30%}.ed-grid .ed-grid.xl-35,.ed-grid .ed-grid .ed-grid.xl-35{width:35%}.ed-grid .ed-grid.xl-40,.ed-grid .ed-grid .ed-grid.xl-40{width:40%}.ed-grid .ed-grid.xl-45,.ed-grid .ed-grid .ed-grid.xl-45{width:45%}.ed-grid .ed-grid.xl-50,.ed-grid .ed-grid .ed-grid.xl-50{width:50%}.ed-grid .ed-grid.xl-55,.ed-grid .ed-grid .ed-grid.xl-55{width:55%}.ed-grid .ed-grid.xl-60,.ed-grid .ed-grid .ed-grid.xl-60{width:60%}.ed-grid .ed-grid.xl-65,.ed-grid .ed-grid .ed-grid.xl-65{width:65%}.ed-grid .ed-grid.xl-70,.ed-grid .ed-grid .ed-grid.xl-70{width:70%}.ed-grid .ed-grid.xl-75,.ed-grid .ed-grid .ed-grid.xl-75{width:75%}.ed-grid .ed-grid.xl-80,.ed-grid .ed-grid .ed-grid.xl-80{width:80%}.ed-grid .ed-grid.xl-85,.ed-grid .ed-grid .ed-grid.xl-85{width:85%}.ed-grid .ed-grid.xl-90,.ed-grid .ed-grid .ed-grid.xl-90{width:90%}.ed-grid .ed-grid.xl-95,.ed-grid .ed-grid .ed-grid.xl-95{width:95%}.ed-grid .ed-grid.xl-100,.ed-grid .ed-grid .ed-grid.xl-100{width:100%}.ed-grid .ed-grid.xl-to-center,.ed-grid .ed-grid .ed-grid.xl-to-center{margin-left:auto;margin-right:auto}.ed-grid .ed-grid.xl-to-right,.ed-grid .ed-grid .ed-grid.xl-to-right{margin-left:auto;margin-right:0}.ed-grid .ed-grid.xl-to-left,.ed-grid .ed-grid .ed-grid.xl-to-left{margin-left:0;margin-right:auto}}.ed-grid.cols-s-1,.ed-grid.s-grid-1{-ms-grid-columns:100%;grid-template-columns:100%}.ed-grid>.span-s-1,.ed-grid>.s-cols-1{-ms-grid-column-span:1;grid-column-end:span 1}.ed-grid>.s-rows-1{-ms-grid-row-span:1;grid-row-end:span 1}.ed-grid>.s-x-1{-ms-grid-column:1;grid-column-start:1}.ed-grid>.s-y-1{-ms-grid-row:1;grid-row-start:1}.ed-grid.cols-s-2,.ed-grid.s-grid-2{-ms-grid-columns:(calc((100% - var(--gap) * 1) / 2))[2];grid-template-columns:repeat(2, calc((100% - var(--gap) * 1) / 2))}.ed-grid>.span-s-2,.ed-grid>.s-cols-2{-ms-grid-column-span:2;grid-column-end:span 2}.ed-grid>.s-rows-2{-ms-grid-row-span:2;grid-row-end:span 2}.ed-grid>.s-x-2{-ms-grid-column:2;grid-column-start:2}.ed-grid>.s-y-2{-ms-grid-row:2;grid-row-start:2}.ed-grid.cols-s-3,.ed-grid.s-grid-3{-ms-grid-columns:(calc((100% - var(--gap) * 2) / 3))[3];grid-template-columns:repeat(3, calc((100% - var(--gap) * 2) / 3))}.ed-grid>.span-s-3,.ed-grid>.s-cols-3{-ms-grid-column-span:3;grid-column-end:span 3}.ed-grid>.s-rows-3{-ms-grid-row-span:3;grid-row-end:span 3}.ed-grid>.s-x-3{-ms-grid-column:3;grid-column-start:3}.ed-grid>.s-y-3{-ms-grid-row:3;grid-row-start:3}.ed-grid.cols-s-4,.ed-grid.s-grid-4{-ms-grid-columns:(calc((100% - var(--gap) * 3) / 4))[4];grid-template-columns:repeat(4, calc((100% - var(--gap) * 3) / 4))}.ed-grid>.span-s-4,.ed-grid>.s-cols-4{-ms-grid-column-span:4;grid-column-end:span 4}.ed-grid>.s-rows-4{-ms-grid-row-span:4;grid-row-end:span 4}.ed-grid>.s-x-4{-ms-grid-column:4;grid-column-start:4}.ed-grid>.s-y-4{-ms-grid-row:4;grid-row-start:4}.ed-grid.cols-s-5,.ed-grid.s-grid-5{-ms-grid-columns:(calc((100% - var(--gap) * 4) / 5))[5];grid-template-columns:repeat(5, calc((100% - var(--gap) * 4) / 5))}.ed-grid>.span-s-5,.ed-grid>.s-cols-5{-ms-grid-column-span:5;grid-column-end:span 5}.ed-grid>.s-rows-5{-ms-grid-row-span:5;grid-row-end:span 5}.ed-grid>.s-x-5{-ms-grid-column:5;grid-column-start:5}.ed-grid>.s-y-5{-ms-grid-row:5;grid-row-start:5}.ed-grid.cols-s-6,.ed-grid.s-grid-6{-ms-grid-columns:(calc((100% - var(--gap) * 5) / 6))[6];grid-template-columns:repeat(6, calc((100% - var(--gap) * 5) / 6))}.ed-grid>.span-s-6,.ed-grid>.s-cols-6{-ms-grid-column-span:6;grid-column-end:span 6}.ed-grid>.s-rows-6{-ms-grid-row-span:6;grid-row-end:span 6}.ed-grid>.s-x-6{-ms-grid-column:6;grid-column-start:6}.ed-grid>.s-y-6{-ms-grid-row:6;grid-row-start:6}.ed-grid.cols-s-7,.ed-grid.s-grid-7{-ms-grid-columns:(calc((100% - var(--gap) * 6) / 7))[7];grid-template-columns:repeat(7, calc((100% - var(--gap) * 6) / 7))}.ed-grid>.span-s-7,.ed-grid>.s-cols-7{-ms-grid-column-span:7;grid-column-end:span 7}.ed-grid>.s-rows-7{-ms-grid-row-span:7;grid-row-end:span 7}.ed-grid>.s-x-7{-ms-grid-column:7;grid-column-start:7}.ed-grid>.s-y-7{-ms-grid-row:7;grid-row-start:7}.ed-grid.cols-s-8,.ed-grid.s-grid-8{-ms-grid-columns:(calc((100% - var(--gap) * 7) / 8))[8];grid-template-columns:repeat(8, calc((100% - var(--gap) * 7) / 8))}.ed-grid>.span-s-8,.ed-grid>.s-cols-8{-ms-grid-column-span:8;grid-column-end:span 8}.ed-grid>.s-rows-8{-ms-grid-row-span:8;grid-row-end:span 8}.ed-grid>.s-x-8{-ms-grid-column:8;grid-column-start:8}.ed-grid>.s-y-8{-ms-grid-row:8;grid-row-start:8}.ed-grid.cols-s-9,.ed-grid.s-grid-9{-ms-grid-columns:(calc((100% - var(--gap) * 8) / 9))[9];grid-template-columns:repeat(9, calc((100% - var(--gap) * 8) / 9))}.ed-grid>.span-s-9,.ed-grid>.s-cols-9{-ms-grid-column-span:9;grid-column-end:span 9}.ed-grid>.s-rows-9{-ms-grid-row-span:9;grid-row-end:span 9}.ed-grid>.s-x-9{-ms-grid-column:9;grid-column-start:9}.ed-grid>.s-y-9{-ms-grid-row:9;grid-row-start:9}.ed-grid.cols-s-10,.ed-grid.s-grid-10{-ms-grid-columns:(calc((100% - var(--gap) * 9) / 10))[10];grid-template-columns:repeat(10, calc((100% - var(--gap) * 9) / 10))}.ed-grid>.span-s-10,.ed-grid>.s-cols-10{-ms-grid-column-span:10;grid-column-end:span 10}.ed-grid>.s-rows-10{-ms-grid-row-span:10;grid-row-end:span 10}.ed-grid>.s-x-10{-ms-grid-column:10;grid-column-start:10}.ed-grid>.s-y-10{-ms-grid-row:10;grid-row-start:10}.ed-grid.cols-s-11,.ed-grid.s-grid-11{-ms-grid-columns:(calc((100% - var(--gap) * 10) / 11))[11];grid-template-columns:repeat(11, calc((100% - var(--gap) * 10) / 11))}.ed-grid>.span-s-11,.ed-grid>.s-cols-11{-ms-grid-column-span:11;grid-column-end:span 11}.ed-grid>.s-rows-11{-ms-grid-row-span:11;grid-row-end:span 11}.ed-grid>.s-x-11{-ms-grid-column:11;grid-column-start:11}.ed-grid>.s-y-11{-ms-grid-row:11;grid-row-start:11}.ed-grid.cols-s-12,.ed-grid.s-grid-12{-ms-grid-columns:(calc((100% - var(--gap) * 11) / 12))[12];grid-template-columns:repeat(12, calc((100% - var(--gap) * 11) / 12))}.ed-grid>.span-s-12,.ed-grid>.s-cols-12{-ms-grid-column-span:12;grid-column-end:span 12}.ed-grid>.s-rows-12{-ms-grid-row-span:12;grid-row-end:span 12}.ed-grid>.s-x-12{-ms-grid-column:12;grid-column-start:12}.ed-grid>.s-y-12{-ms-grid-row:12;grid-row-start:12}@media screen and (min-width: 640px){.ed-grid.cols-m-1,.ed-grid.m-grid-1{-ms-grid-columns:100%;grid-template-columns:100%}.ed-grid>.span-m-1,.ed-grid>.m-cols-1{-ms-grid-column-span:1;grid-column-end:span 1}.ed-grid>.m-rows-1{-ms-grid-row-span:1;grid-row-end:span 1}.ed-grid>.m-x-1{-ms-grid-column:1;grid-column-start:1}.ed-grid>.m-y-1{-ms-grid-row:1;grid-row-start:1}.ed-grid.cols-m-2,.ed-grid.m-grid-2{-ms-grid-columns:(calc((100% - var(--gap) * 1) / 2))[2];grid-template-columns:repeat(2, calc((100% - var(--gap) * 1) / 2))}.ed-grid>.span-m-2,.ed-grid>.m-cols-2{-ms-grid-column-span:2;grid-column-end:span 2}.ed-grid>.m-rows-2{-ms-grid-row-span:2;grid-row-end:span 2}.ed-grid>.m-x-2{-ms-grid-column:2;grid-column-start:2}.ed-grid>.m-y-2{-ms-grid-row:2;grid-row-start:2}.ed-grid.cols-m-3,.ed-grid.m-grid-3{-ms-grid-columns:(calc((100% - var(--gap) * 2) / 3))[3];grid-template-columns:repeat(3, calc((100% - var(--gap) * 2) / 3))}.ed-grid>.span-m-3,.ed-grid>.m-cols-3{-ms-grid-column-span:3;grid-column-end:span 3}.ed-grid>.m-rows-3{-ms-grid-row-span:3;grid-row-end:span 3}.ed-grid>.m-x-3{-ms-grid-column:3;grid-column-start:3}.ed-grid>.m-y-3{-ms-grid-row:3;grid-row-start:3}.ed-grid.cols-m-4,.ed-grid.m-grid-4{-ms-grid-columns:(calc((100% - var(--gap) * 3) / 4))[4];grid-template-columns:repeat(4, calc((100% - var(--gap) * 3) / 4))}.ed-grid>.span-m-4,.ed-grid>.m-cols-4{-ms-grid-column-span:4;grid-column-end:span 4}.ed-grid>.m-rows-4{-ms-grid-row-span:4;grid-row-end:span 4}.ed-grid>.m-x-4{-ms-grid-column:4;grid-column-start:4}.ed-grid>.m-y-4{-ms-grid-row:4;grid-row-start:4}.ed-grid.cols-m-5,.ed-grid.m-grid-5{-ms-grid-columns:(calc((100% - var(--gap) * 4) / 5))[5];grid-template-columns:repeat(5, calc((100% - var(--gap) * 4) / 5))}.ed-grid>.span-m-5,.ed-grid>.m-cols-5{-ms-grid-column-span:5;grid-column-end:span 5}.ed-grid>.m-rows-5{-ms-grid-row-span:5;grid-row-end:span 5}.ed-grid>.m-x-5{-ms-grid-column:5;grid-column-start:5}.ed-grid>.m-y-5{-ms-grid-row:5;grid-row-start:5}.ed-grid.cols-m-6,.ed-grid.m-grid-6{-ms-grid-columns:(calc((100% - var(--gap) * 5) / 6))[6];grid-template-columns:repeat(6, calc((100% - var(--gap) * 5) / 6))}.ed-grid>.span-m-6,.ed-grid>.m-cols-6{-ms-grid-column-span:6;grid-column-end:span 6}.ed-grid>.m-rows-6{-ms-grid-row-span:6;grid-row-end:span 6}.ed-grid>.m-x-6{-ms-grid-column:6;grid-column-start:6}.ed-grid>.m-y-6{-ms-grid-row:6;grid-row-start:6}.ed-grid.cols-m-7,.ed-grid.m-grid-7{-ms-grid-columns:(calc((100% - var(--gap) * 6) / 7))[7];grid-template-columns:repeat(7, calc((100% - var(--gap) * 6) / 7))}.ed-grid>.span-m-7,.ed-grid>.m-cols-7{-ms-grid-column-span:7;grid-column-end:span 7}.ed-grid>.m-rows-7{-ms-grid-row-span:7;grid-row-end:span 7}.ed-grid>.m-x-7{-ms-grid-column:7;grid-column-start:7}.ed-grid>.m-y-7{-ms-grid-row:7;grid-row-start:7}.ed-grid.cols-m-8,.ed-grid.m-grid-8{-ms-grid-columns:(calc((100% - var(--gap) * 7) / 8))[8];grid-template-columns:repeat(8, calc((100% - var(--gap) * 7) / 8))}.ed-grid>.span-m-8,.ed-grid>.m-cols-8{-ms-grid-column-span:8;grid-column-end:span 8}.ed-grid>.m-rows-8{-ms-grid-row-span:8;grid-row-end:span 8}.ed-grid>.m-x-8{-ms-grid-column:8;grid-column-start:8}.ed-grid>.m-y-8{-ms-grid-row:8;grid-row-start:8}.ed-grid.cols-m-9,.ed-grid.m-grid-9{-ms-grid-columns:(calc((100% - var(--gap) * 8) / 9))[9];grid-template-columns:repeat(9, calc((100% - var(--gap) * 8) / 9))}.ed-grid>.span-m-9,.ed-grid>.m-cols-9{-ms-grid-column-span:9;grid-column-end:span 9}.ed-grid>.m-rows-9{-ms-grid-row-span:9;grid-row-end:span 9}.ed-grid>.m-x-9{-ms-grid-column:9;grid-column-start:9}.ed-grid>.m-y-9{-ms-grid-row:9;grid-row-start:9}.ed-grid.cols-m-10,.ed-grid.m-grid-10{-ms-grid-columns:(calc((100% - var(--gap) * 9) / 10))[10];grid-template-columns:repeat(10, calc((100% - var(--gap) * 9) / 10))}.ed-grid>.span-m-10,.ed-grid>.m-cols-10{-ms-grid-column-span:10;grid-column-end:span 10}.ed-grid>.m-rows-10{-ms-grid-row-span:10;grid-row-end:span 10}.ed-grid>.m-x-10{-ms-grid-column:10;grid-column-start:10}.ed-grid>.m-y-10{-ms-grid-row:10;grid-row-start:10}.ed-grid.cols-m-11,.ed-grid.m-grid-11{-ms-grid-columns:(calc((100% - var(--gap) * 10) / 11))[11];grid-template-columns:repeat(11, calc((100% - var(--gap) * 10) / 11))}.ed-grid>.span-m-11,.ed-grid>.m-cols-11{-ms-grid-column-span:11;grid-column-end:span 11}.ed-grid>.m-rows-11{-ms-grid-row-span:11;grid-row-end:span 11}.ed-grid>.m-x-11{-ms-grid-column:11;grid-column-start:11}.ed-grid>.m-y-11{-ms-grid-row:11;grid-row-start:11}.ed-grid.cols-m-12,.ed-grid.m-grid-12{-ms-grid-columns:(calc((100% - var(--gap) * 11) / 12))[12];grid-template-columns:repeat(12, calc((100% - var(--gap) * 11) / 12))}.ed-grid>.span-m-12,.ed-grid>.m-cols-12{-ms-grid-column-span:12;grid-column-end:span 12}.ed-grid>.m-rows-12{-ms-grid-row-span:12;grid-row-end:span 12}.ed-grid>.m-x-12{-ms-grid-column:12;grid-column-start:12}.ed-grid>.m-y-12{-ms-grid-row:12;grid-row-start:12}}@media screen and (min-width: 1024px){.ed-grid.cols-l-1,.ed-grid.l-grid-1{-ms-grid-columns:100%;grid-template-columns:100%}.ed-grid>.span-l-1,.ed-grid>.l-cols-1{-ms-grid-column-span:1;grid-column-end:span 1}.ed-grid>.l-rows-1{-ms-grid-row-span:1;grid-row-end:span 1}.ed-grid>.l-x-1{-ms-grid-column:1;grid-column-start:1}.ed-grid>.l-y-1{-ms-grid-row:1;grid-row-start:1}.ed-grid.cols-l-2,.ed-grid.l-grid-2{-ms-grid-columns:(calc((100% - var(--gap) * 1) / 2))[2];grid-template-columns:repeat(2, calc((100% - var(--gap) * 1) / 2))}.ed-grid>.span-l-2,.ed-grid>.l-cols-2{-ms-grid-column-span:2;grid-column-end:span 2}.ed-grid>.l-rows-2{-ms-grid-row-span:2;grid-row-end:span 2}.ed-grid>.l-x-2{-ms-grid-column:2;grid-column-start:2}.ed-grid>.l-y-2{-ms-grid-row:2;grid-row-start:2}.ed-grid.cols-l-3,.ed-grid.l-grid-3{-ms-grid-columns:(calc((100% - var(--gap) * 2) / 3))[3];grid-template-columns:repeat(3, calc((100% - var(--gap) * 2) / 3))}.ed-grid>.span-l-3,.ed-grid>.l-cols-3{-ms-grid-column-span:3;grid-column-end:span 3}.ed-grid>.l-rows-3{-ms-grid-row-span:3;grid-row-end:span 3}.ed-grid>.l-x-3{-ms-grid-column:3;grid-column-start:3}.ed-grid>.l-y-3{-ms-grid-row:3;grid-row-start:3}.ed-grid.cols-l-4,.ed-grid.l-grid-4{-ms-grid-columns:(calc((100% - var(--gap) * 3) / 4))[4];grid-template-columns:repeat(4, calc((100% - var(--gap) * 3) / 4))}.ed-grid>.span-l-4,.ed-grid>.l-cols-4{-ms-grid-column-span:4;grid-column-end:span 4}.ed-grid>.l-rows-4{-ms-grid-row-span:4;grid-row-end:span 4}.ed-grid>.l-x-4{-ms-grid-column:4;grid-column-start:4}.ed-grid>.l-y-4{-ms-grid-row:4;grid-row-start:4}.ed-grid.cols-l-5,.ed-grid.l-grid-5{-ms-grid-columns:(calc((100% - var(--gap) * 4) / 5))[5];grid-template-columns:repeat(5, calc((100% - var(--gap) * 4) / 5))}.ed-grid>.span-l-5,.ed-grid>.l-cols-5{-ms-grid-column-span:5;grid-column-end:span 5}.ed-grid>.l-rows-5{-ms-grid-row-span:5;grid-row-end:span 5}.ed-grid>.l-x-5{-ms-grid-column:5;grid-column-start:5}.ed-grid>.l-y-5{-ms-grid-row:5;grid-row-start:5}.ed-grid.cols-l-6,.ed-grid.l-grid-6{-ms-grid-columns:(calc((100% - var(--gap) * 5) / 6))[6];grid-template-columns:repeat(6, calc((100% - var(--gap) * 5) / 6))}.ed-grid>.span-l-6,.ed-grid>.l-cols-6{-ms-grid-column-span:6;grid-column-end:span 6}.ed-grid>.l-rows-6{-ms-grid-row-span:6;grid-row-end:span 6}.ed-grid>.l-x-6{-ms-grid-column:6;grid-column-start:6}.ed-grid>.l-y-6{-ms-grid-row:6;grid-row-start:6}.ed-grid.cols-l-7,.ed-grid.l-grid-7{-ms-grid-columns:(calc((100% - var(--gap) * 6) / 7))[7];grid-template-columns:repeat(7, calc((100% - var(--gap) * 6) / 7))}.ed-grid>.span-l-7,.ed-grid>.l-cols-7{-ms-grid-column-span:7;grid-column-end:span 7}.ed-grid>.l-rows-7{-ms-grid-row-span:7;grid-row-end:span 7}.ed-grid>.l-x-7{-ms-grid-column:7;grid-column-start:7}.ed-grid>.l-y-7{-ms-grid-row:7;grid-row-start:7}.ed-grid.cols-l-8,.ed-grid.l-grid-8{-ms-grid-columns:(calc((100% - var(--gap) * 7) / 8))[8];grid-template-columns:repeat(8, calc((100% - var(--gap) * 7) / 8))}.ed-grid>.span-l-8,.ed-grid>.l-cols-8{-ms-grid-column-span:8;grid-column-end:span 8}.ed-grid>.l-rows-8{-ms-grid-row-span:8;grid-row-end:span 8}.ed-grid>.l-x-8{-ms-grid-column:8;grid-column-start:8}.ed-grid>.l-y-8{-ms-grid-row:8;grid-row-start:8}.ed-grid.cols-l-9,.ed-grid.l-grid-9{-ms-grid-columns:(calc((100% - var(--gap) * 8) / 9))[9];grid-template-columns:repeat(9, calc((100% - var(--gap) * 8) / 9))}.ed-grid>.span-l-9,.ed-grid>.l-cols-9{-ms-grid-column-span:9;grid-column-end:span 9}.ed-grid>.l-rows-9{-ms-grid-row-span:9;grid-row-end:span 9}.ed-grid>.l-x-9{-ms-grid-column:9;grid-column-start:9}.ed-grid>.l-y-9{-ms-grid-row:9;grid-row-start:9}.ed-grid.cols-l-10,.ed-grid.l-grid-10{-ms-grid-columns:(calc((100% - var(--gap) * 9) / 10))[10];grid-template-columns:repeat(10, calc((100% - var(--gap) * 9) / 10))}.ed-grid>.span-l-10,.ed-grid>.l-cols-10{-ms-grid-column-span:10;grid-column-end:span 10}.ed-grid>.l-rows-10{-ms-grid-row-span:10;grid-row-end:span 10}.ed-grid>.l-x-10{-ms-grid-column:10;grid-column-start:10}.ed-grid>.l-y-10{-ms-grid-row:10;grid-row-start:10}.ed-grid.cols-l-11,.ed-grid.l-grid-11{-ms-grid-columns:(calc((100% - var(--gap) * 10) / 11))[11];grid-template-columns:repeat(11, calc((100% - var(--gap) * 10) / 11))}.ed-grid>.span-l-11,.ed-grid>.l-cols-11{-ms-grid-column-span:11;grid-column-end:span 11}.ed-grid>.l-rows-11{-ms-grid-row-span:11;grid-row-end:span 11}.ed-grid>.l-x-11{-ms-grid-column:11;grid-column-start:11}.ed-grid>.l-y-11{-ms-grid-row:11;grid-row-start:11}.ed-grid.cols-l-12,.ed-grid.l-grid-12{-ms-grid-columns:(calc((100% - var(--gap) * 11) / 12))[12];grid-template-columns:repeat(12, calc((100% - var(--gap) * 11) / 12))}.ed-grid>.span-l-12,.ed-grid>.l-cols-12{-ms-grid-column-span:12;grid-column-end:span 12}.ed-grid>.l-rows-12{-ms-grid-row-span:12;grid-row-end:span 12}.ed-grid>.l-x-12{-ms-grid-column:12;grid-column-start:12}.ed-grid>.l-y-12{-ms-grid-row:12;grid-row-start:12}}@media screen and (min-width: 1024px){.ed-grid.cols-lg-1,.ed-grid.lg-grid-1{-ms-grid-columns:100%;grid-template-columns:100%}.ed-grid>.span-lg-1,.ed-grid>.lg-cols-1{-ms-grid-column-span:1;grid-column-end:span 1}.ed-grid>.lg-rows-1{-ms-grid-row-span:1;grid-row-end:span 1}.ed-grid>.lg-x-1{-ms-grid-column:1;grid-column-start:1}.ed-grid>.lg-y-1{-ms-grid-row:1;grid-row-start:1}.ed-grid.cols-lg-2,.ed-grid.lg-grid-2{-ms-grid-columns:(calc((100% - var(--gap) * 1) / 2))[2];grid-template-columns:repeat(2, calc((100% - var(--gap) * 1) / 2))}.ed-grid>.span-lg-2,.ed-grid>.lg-cols-2{-ms-grid-column-span:2;grid-column-end:span 2}.ed-grid>.lg-rows-2{-ms-grid-row-span:2;grid-row-end:span 2}.ed-grid>.lg-x-2{-ms-grid-column:2;grid-column-start:2}.ed-grid>.lg-y-2{-ms-grid-row:2;grid-row-start:2}.ed-grid.cols-lg-3,.ed-grid.lg-grid-3{-ms-grid-columns:(calc((100% - var(--gap) * 2) / 3))[3];grid-template-columns:repeat(3, calc((100% - var(--gap) * 2) / 3))}.ed-grid>.span-lg-3,.ed-grid>.lg-cols-3{-ms-grid-column-span:3;grid-column-end:span 3}.ed-grid>.lg-rows-3{-ms-grid-row-span:3;grid-row-end:span 3}.ed-grid>.lg-x-3{-ms-grid-column:3;grid-column-start:3}.ed-grid>.lg-y-3{-ms-grid-row:3;grid-row-start:3}.ed-grid.cols-lg-4,.ed-grid.lg-grid-4{-ms-grid-columns:(calc((100% - var(--gap) * 3) / 4))[4];grid-template-columns:repeat(4, calc((100% - var(--gap) * 3) / 4))}.ed-grid>.span-lg-4,.ed-grid>.lg-cols-4{-ms-grid-column-span:4;grid-column-end:span 4}.ed-grid>.lg-rows-4{-ms-grid-row-span:4;grid-row-end:span 4}.ed-grid>.lg-x-4{-ms-grid-column:4;grid-column-start:4}.ed-grid>.lg-y-4{-ms-grid-row:4;grid-row-start:4}.ed-grid.cols-lg-5,.ed-grid.lg-grid-5{-ms-grid-columns:(calc((100% - var(--gap) * 4) / 5))[5];grid-template-columns:repeat(5, calc((100% - var(--gap) * 4) / 5))}.ed-grid>.span-lg-5,.ed-grid>.lg-cols-5{-ms-grid-column-span:5;grid-column-end:span 5}.ed-grid>.lg-rows-5{-ms-grid-row-span:5;grid-row-end:span 5}.ed-grid>.lg-x-5{-ms-grid-column:5;grid-column-start:5}.ed-grid>.lg-y-5{-ms-grid-row:5;grid-row-start:5}.ed-grid.cols-lg-6,.ed-grid.lg-grid-6{-ms-grid-columns:(calc((100% - var(--gap) * 5) / 6))[6];grid-template-columns:repeat(6, calc((100% - var(--gap) * 5) / 6))}.ed-grid>.span-lg-6,.ed-grid>.lg-cols-6{-ms-grid-column-span:6;grid-column-end:span 6}.ed-grid>.lg-rows-6{-ms-grid-row-span:6;grid-row-end:span 6}.ed-grid>.lg-x-6{-ms-grid-column:6;grid-column-start:6}.ed-grid>.lg-y-6{-ms-grid-row:6;grid-row-start:6}.ed-grid.cols-lg-7,.ed-grid.lg-grid-7{-ms-grid-columns:(calc((100% - var(--gap) * 6) / 7))[7];grid-template-columns:repeat(7, calc((100% - var(--gap) * 6) / 7))}.ed-grid>.span-lg-7,.ed-grid>.lg-cols-7{-ms-grid-column-span:7;grid-column-end:span 7}.ed-grid>.lg-rows-7{-ms-grid-row-span:7;grid-row-end:span 7}.ed-grid>.lg-x-7{-ms-grid-column:7;grid-column-start:7}.ed-grid>.lg-y-7{-ms-grid-row:7;grid-row-start:7}.ed-grid.cols-lg-8,.ed-grid.lg-grid-8{-ms-grid-columns:(calc((100% - var(--gap) * 7) / 8))[8];grid-template-columns:repeat(8, calc((100% - var(--gap) * 7) / 8))}.ed-grid>.span-lg-8,.ed-grid>.lg-cols-8{-ms-grid-column-span:8;grid-column-end:span 8}.ed-grid>.lg-rows-8{-ms-grid-row-span:8;grid-row-end:span 8}.ed-grid>.lg-x-8{-ms-grid-column:8;grid-column-start:8}.ed-grid>.lg-y-8{-ms-grid-row:8;grid-row-start:8}.ed-grid.cols-lg-9,.ed-grid.lg-grid-9{-ms-grid-columns:(calc((100% - var(--gap) * 8) / 9))[9];grid-template-columns:repeat(9, calc((100% - var(--gap) * 8) / 9))}.ed-grid>.span-lg-9,.ed-grid>.lg-cols-9{-ms-grid-column-span:9;grid-column-end:span 9}.ed-grid>.lg-rows-9{-ms-grid-row-span:9;grid-row-end:span 9}.ed-grid>.lg-x-9{-ms-grid-column:9;grid-column-start:9}.ed-grid>.lg-y-9{-ms-grid-row:9;grid-row-start:9}.ed-grid.cols-lg-10,.ed-grid.lg-grid-10{-ms-grid-columns:(calc((100% - var(--gap) * 9) / 10))[10];grid-template-columns:repeat(10, calc((100% - var(--gap) * 9) / 10))}.ed-grid>.span-lg-10,.ed-grid>.lg-cols-10{-ms-grid-column-span:10;grid-column-end:span 10}.ed-grid>.lg-rows-10{-ms-grid-row-span:10;grid-row-end:span 10}.ed-grid>.lg-x-10{-ms-grid-column:10;grid-column-start:10}.ed-grid>.lg-y-10{-ms-grid-row:10;grid-row-start:10}.ed-grid.cols-lg-11,.ed-grid.lg-grid-11{-ms-grid-columns:(calc((100% - var(--gap) * 10) / 11))[11];grid-template-columns:repeat(11, calc((100% - var(--gap) * 10) / 11))}.ed-grid>.span-lg-11,.ed-grid>.lg-cols-11{-ms-grid-column-span:11;grid-column-end:span 11}.ed-grid>.lg-rows-11{-ms-grid-row-span:11;grid-row-end:span 11}.ed-grid>.lg-x-11{-ms-grid-column:11;grid-column-start:11}.ed-grid>.lg-y-11{-ms-grid-row:11;grid-row-start:11}.ed-grid.cols-lg-12,.ed-grid.lg-grid-12{-ms-grid-columns:(calc((100% - var(--gap) * 11) / 12))[12];grid-template-columns:repeat(12, calc((100% - var(--gap) * 11) / 12))}.ed-grid>.span-lg-12,.ed-grid>.lg-cols-12{-ms-grid-column-span:12;grid-column-end:span 12}.ed-grid>.lg-rows-12{-ms-grid-row-span:12;grid-row-end:span 12}.ed-grid>.lg-x-12{-ms-grid-column:12;grid-column-start:12}.ed-grid>.lg-y-12{-ms-grid-row:12;grid-row-start:12}}@media screen and (min-width: 1440px){.ed-grid.cols-xl-1,.ed-grid.xl-grid-1{-ms-grid-columns:100%;grid-template-columns:100%}.ed-grid>.span-xl-1,.ed-grid>.xl-cols-1{-ms-grid-column-span:1;grid-column-end:span 1}.ed-grid>.xl-rows-1{-ms-grid-row-span:1;grid-row-end:span 1}.ed-grid>.xl-x-1{-ms-grid-column:1;grid-column-start:1}.ed-grid>.xl-y-1{-ms-grid-row:1;grid-row-start:1}.ed-grid.cols-xl-2,.ed-grid.xl-grid-2{-ms-grid-columns:(calc((100% - var(--gap) * 1) / 2))[2];grid-template-columns:repeat(2, calc((100% - var(--gap) * 1) / 2))}.ed-grid>.span-xl-2,.ed-grid>.xl-cols-2{-ms-grid-column-span:2;grid-column-end:span 2}.ed-grid>.xl-rows-2{-ms-grid-row-span:2;grid-row-end:span 2}.ed-grid>.xl-x-2{-ms-grid-column:2;grid-column-start:2}.ed-grid>.xl-y-2{-ms-grid-row:2;grid-row-start:2}.ed-grid.cols-xl-3,.ed-grid.xl-grid-3{-ms-grid-columns:(calc((100% - var(--gap) * 2) / 3))[3];grid-template-columns:repeat(3, calc((100% - var(--gap) * 2) / 3))}.ed-grid>.span-xl-3,.ed-grid>.xl-cols-3{-ms-grid-column-span:3;grid-column-end:span 3}.ed-grid>.xl-rows-3{-ms-grid-row-span:3;grid-row-end:span 3}.ed-grid>.xl-x-3{-ms-grid-column:3;grid-column-start:3}.ed-grid>.xl-y-3{-ms-grid-row:3;grid-row-start:3}.ed-grid.cols-xl-4,.ed-grid.xl-grid-4{-ms-grid-columns:(calc((100% - var(--gap) * 3) / 4))[4];grid-template-columns:repeat(4, calc((100% - var(--gap) * 3) / 4))}.ed-grid>.span-xl-4,.ed-grid>.xl-cols-4{-ms-grid-column-span:4;grid-column-end:span 4}.ed-grid>.xl-rows-4{-ms-grid-row-span:4;grid-row-end:span 4}.ed-grid>.xl-x-4{-ms-grid-column:4;grid-column-start:4}.ed-grid>.xl-y-4{-ms-grid-row:4;grid-row-start:4}.ed-grid.cols-xl-5,.ed-grid.xl-grid-5{-ms-grid-columns:(calc((100% - var(--gap) * 4) / 5))[5];grid-template-columns:repeat(5, calc((100% - var(--gap) * 4) / 5))}.ed-grid>.span-xl-5,.ed-grid>.xl-cols-5{-ms-grid-column-span:5;grid-column-end:span 5}.ed-grid>.xl-rows-5{-ms-grid-row-span:5;grid-row-end:span 5}.ed-grid>.xl-x-5{-ms-grid-column:5;grid-column-start:5}.ed-grid>.xl-y-5{-ms-grid-row:5;grid-row-start:5}.ed-grid.cols-xl-6,.ed-grid.xl-grid-6{-ms-grid-columns:(calc((100% - var(--gap) * 5) / 6))[6];grid-template-columns:repeat(6, calc((100% - var(--gap) * 5) / 6))}.ed-grid>.span-xl-6,.ed-grid>.xl-cols-6{-ms-grid-column-span:6;grid-column-end:span 6}.ed-grid>.xl-rows-6{-ms-grid-row-span:6;grid-row-end:span 6}.ed-grid>.xl-x-6{-ms-grid-column:6;grid-column-start:6}.ed-grid>.xl-y-6{-ms-grid-row:6;grid-row-start:6}.ed-grid.cols-xl-7,.ed-grid.xl-grid-7{-ms-grid-columns:(calc((100% - var(--gap) * 6) / 7))[7];grid-template-columns:repeat(7, calc((100% - var(--gap) * 6) / 7))}.ed-grid>.span-xl-7,.ed-grid>.xl-cols-7{-ms-grid-column-span:7;grid-column-end:span 7}.ed-grid>.xl-rows-7{-ms-grid-row-span:7;grid-row-end:span 7}.ed-grid>.xl-x-7{-ms-grid-column:7;grid-column-start:7}.ed-grid>.xl-y-7{-ms-grid-row:7;grid-row-start:7}.ed-grid.cols-xl-8,.ed-grid.xl-grid-8{-ms-grid-columns:(calc((100% - var(--gap) * 7) / 8))[8];grid-template-columns:repeat(8, calc((100% - var(--gap) * 7) / 8))}.ed-grid>.span-xl-8,.ed-grid>.xl-cols-8{-ms-grid-column-span:8;grid-column-end:span 8}.ed-grid>.xl-rows-8{-ms-grid-row-span:8;grid-row-end:span 8}.ed-grid>.xl-x-8{-ms-grid-column:8;grid-column-start:8}.ed-grid>.xl-y-8{-ms-grid-row:8;grid-row-start:8}.ed-grid.cols-xl-9,.ed-grid.xl-grid-9{-ms-grid-columns:(calc((100% - var(--gap) * 8) / 9))[9];grid-template-columns:repeat(9, calc((100% - var(--gap) * 8) / 9))}.ed-grid>.span-xl-9,.ed-grid>.xl-cols-9{-ms-grid-column-span:9;grid-column-end:span 9}.ed-grid>.xl-rows-9{-ms-grid-row-span:9;grid-row-end:span 9}.ed-grid>.xl-x-9{-ms-grid-column:9;grid-column-start:9}.ed-grid>.xl-y-9{-ms-grid-row:9;grid-row-start:9}.ed-grid.cols-xl-10,.ed-grid.xl-grid-10{-ms-grid-columns:(calc((100% - var(--gap) * 9) / 10))[10];grid-template-columns:repeat(10, calc((100% - var(--gap) * 9) / 10))}.ed-grid>.span-xl-10,.ed-grid>.xl-cols-10{-ms-grid-column-span:10;grid-column-end:span 10}.ed-grid>.xl-rows-10{-ms-grid-row-span:10;grid-row-end:span 10}.ed-grid>.xl-x-10{-ms-grid-column:10;grid-column-start:10}.ed-grid>.xl-y-10{-ms-grid-row:10;grid-row-start:10}.ed-grid.cols-xl-11,.ed-grid.xl-grid-11{-ms-grid-columns:(calc((100% - var(--gap) * 10) / 11))[11];grid-template-columns:repeat(11, calc((100% - var(--gap) * 10) / 11))}.ed-grid>.span-xl-11,.ed-grid>.xl-cols-11{-ms-grid-column-span:11;grid-column-end:span 11}.ed-grid>.xl-rows-11{-ms-grid-row-span:11;grid-row-end:span 11}.ed-grid>.xl-x-11{-ms-grid-column:11;grid-column-start:11}.ed-grid>.xl-y-11{-ms-grid-row:11;grid-row-start:11}.ed-grid.cols-xl-12,.ed-grid.xl-grid-12{-ms-grid-columns:(calc((100% - var(--gap) * 11) / 12))[12];grid-template-columns:repeat(12, calc((100% - var(--gap) * 11) / 12))}.ed-grid>.span-xl-12,.ed-grid>.xl-cols-12{-ms-grid-column-span:12;grid-column-end:span 12}.ed-grid>.xl-rows-12{-ms-grid-row-span:12;grid-row-end:span 12}.ed-grid>.xl-x-12{-ms-grid-column:12;grid-column-start:12}.ed-grid>.xl-y-12{-ms-grid-row:12;grid-row-start:12}}.ed-grid[class*=\"-main-\"],.ed-grid[class*=\"-cross-\"]{display:-ms-grid;display:grid}.l-block,.cancel-l-block,.l-section,.cancel-l-section,.l-big-section,.cancel-l-big-section{margin-top:0}.l-block{margin-bottom:var(--vertical-block-space)}.cancel-l-block{margin-top:calc(var(--vertical-block-space) * -1)}.l-section{margin-bottom:calc(var(--vertical-block-space) * 2)}.cancel-l-section{margin-top:calc(var(--vertical-block-space) * -2)}.l-big-section{margin-bottom:calc(var(--vertical-block-space) * 4)}.cancel-l-big-section{margin-top:calc(var(--vertical-block-space) * -4)}body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:100vh}.main-footer{margin-top:auto}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--vertical-content-space)}h1{margin-bottom:calc(var(--vertical-content-space) * 1.5)}p,video,blockquote,article,section,form,figure,iframe,ul,ol,pre,hr,dl,address,table{margin-top:0;margin-bottom:calc(var(--vertical-content-space) * 1.5)}p+h2,video+h2,blockquote+h2,article+h2,section+h2,form+h2,figure+h2,iframe+h2,ul+h2,ol+h2,pre+h2,hr+h2,dl+h2,address+h2,table+h2{padding-top:calc(var(--vertical-content-space) * 1.5)}p+h3,video+h3,blockquote+h3,article+h3,section+h3,form+h3,figure+h3,iframe+h3,ul+h3,ol+h3,pre+h3,hr+h3,dl+h3,address+h3,table+h3{padding-top:var(--vertical-content-space)}ul ul,ol ol,ul ol,ol ul{margin-bottom:0}.s-pt-0{padding-top:0}.s-pl-0{padding-left:0}.s-pb-0{padding-bottom:0}.s-pr-0{padding-right:0}.s-py-0{padding-top:0;padding-bottom:0}.s-px-0{padding-left:0;padding-right:0}.s-pxy-0{padding:0}.s-mr-0{margin-right:0}.s-mb-0{margin-bottom:0}.s-mt-0{margin-top:0}.s-ml-0{margin-left:0}.s-sticky-0{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 0)}.s-pt-1{padding-top:.5rem}.s-pl-1{padding-left:.5rem}.s-pb-1{padding-bottom:.5rem}.s-pr-1{padding-right:.5rem}.s-py-1{padding-top:.5rem;padding-bottom:.5rem}.s-px-1,.card__teachers span{padding-left:.5rem;padding-right:.5rem}.s-pxy-1{padding:.5rem}.s-mr-1{margin-right:.5rem}.s-mb-1{margin-bottom:.5rem}.s-mt-1{margin-top:-.5rem}.s-ml-1{margin-left:-.5rem}.s-sticky-1{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .5rem)}.s-pt-2{padding-top:1rem}.s-pl-2{padding-left:1rem}.s-pb-2{padding-bottom:1rem}.s-pr-2{padding-right:1rem}.s-py-2{padding-top:1rem;padding-bottom:1rem}.s-px-2{padding-left:1rem;padding-right:1rem}.s-pxy-2{padding:1rem}.s-mr-2{margin-right:1rem}.s-mb-2{margin-bottom:1rem}.s-mt-2{margin-top:-1rem}.s-ml-2{margin-left:-1rem}.s-sticky-2{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1rem)}.s-pt-3{padding-top:1.5rem}.s-pl-3{padding-left:1.5rem}.s-pb-3{padding-bottom:1.5rem}.s-pr-3{padding-right:1.5rem}.s-py-3{padding-top:1.5rem;padding-bottom:1.5rem}.s-px-3{padding-left:1.5rem;padding-right:1.5rem}.s-pxy-3{padding:1.5rem}.s-mr-3{margin-right:1.5rem}.s-mb-3{margin-bottom:1.5rem}.s-mt-3{margin-top:-1.5rem}.s-ml-3{margin-left:-1.5rem}.s-sticky-3{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1.5rem)}.s-pt-4{padding-top:2rem}.s-pl-4{padding-left:2rem}.s-pb-4{padding-bottom:2rem}.s-pr-4{padding-right:2rem}.s-py-4{padding-top:2rem;padding-bottom:2rem}.s-px-4{padding-left:2rem;padding-right:2rem}.s-pxy-4{padding:2rem}.s-mr-4{margin-right:2rem}.s-mb-4{margin-bottom:2rem}.s-mt-4{margin-top:-2rem}.s-ml-4{margin-left:-2rem}.s-sticky-4{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 2rem)}.s-pt-05{padding-top:.25rem}.s-pl-05{padding-left:.25rem}.s-pb-05{padding-bottom:.25rem}.s-pr-05{padding-right:.25rem}.s-py-05,.card__teachers span{padding-top:.25rem;padding-bottom:.25rem}.s-px-05{padding-left:.25rem;padding-right:.25rem}.s-pxy-05{padding:.25rem}.s-mr-05{margin-right:.25rem}.s-mb-05{margin-bottom:.25rem}.s-mt-05{margin-top:-.25rem}.s-ml-05{margin-left:-.25rem}.s-sticky-05{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .25rem)}.s-sticky-none{position:static}@media screen and (min-width: 640px){.m-pt-0{padding-top:0}.m-pl-0{padding-left:0}.m-pb-0{padding-bottom:0}.m-pr-0{padding-right:0}.m-py-0{padding-top:0;padding-bottom:0}.m-px-0{padding-left:0;padding-right:0}.m-pxy-0{padding:0}.m-mr-0{margin-right:0}.m-mb-0{margin-bottom:0}.m-mt-0{margin-top:0}.m-ml-0{margin-left:0}.m-sticky-0{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 0)}.m-pt-1{padding-top:.5rem}.m-pl-1{padding-left:.5rem}.m-pb-1{padding-bottom:.5rem}.m-pr-1{padding-right:.5rem}.m-py-1{padding-top:.5rem;padding-bottom:.5rem}.m-px-1{padding-left:.5rem;padding-right:.5rem}.m-pxy-1{padding:.5rem}.m-mr-1{margin-right:.5rem}.m-mb-1{margin-bottom:.5rem}.m-mt-1{margin-top:-.5rem}.m-ml-1{margin-left:-.5rem}.m-sticky-1{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .5rem)}.m-pt-2{padding-top:1rem}.m-pl-2{padding-left:1rem}.m-pb-2{padding-bottom:1rem}.m-pr-2{padding-right:1rem}.m-py-2{padding-top:1rem;padding-bottom:1rem}.m-px-2{padding-left:1rem;padding-right:1rem}.m-pxy-2{padding:1rem}.m-mr-2{margin-right:1rem}.m-mb-2{margin-bottom:1rem}.m-mt-2{margin-top:-1rem}.m-ml-2{margin-left:-1rem}.m-sticky-2{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1rem)}.m-pt-3{padding-top:1.5rem}.m-pl-3{padding-left:1.5rem}.m-pb-3{padding-bottom:1.5rem}.m-pr-3{padding-right:1.5rem}.m-py-3{padding-top:1.5rem;padding-bottom:1.5rem}.m-px-3{padding-left:1.5rem;padding-right:1.5rem}.m-pxy-3{padding:1.5rem}.m-mr-3{margin-right:1.5rem}.m-mb-3{margin-bottom:1.5rem}.m-mt-3{margin-top:-1.5rem}.m-ml-3{margin-left:-1.5rem}.m-sticky-3{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1.5rem)}.m-pt-4{padding-top:2rem}.m-pl-4{padding-left:2rem}.m-pb-4{padding-bottom:2rem}.m-pr-4{padding-right:2rem}.m-py-4{padding-top:2rem;padding-bottom:2rem}.m-px-4{padding-left:2rem;padding-right:2rem}.m-pxy-4{padding:2rem}.m-mr-4{margin-right:2rem}.m-mb-4{margin-bottom:2rem}.m-mt-4{margin-top:-2rem}.m-ml-4{margin-left:-2rem}.m-sticky-4{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 2rem)}.m-pt-05{padding-top:.25rem}.m-pl-05{padding-left:.25rem}.m-pb-05{padding-bottom:.25rem}.m-pr-05{padding-right:.25rem}.m-py-05{padding-top:.25rem;padding-bottom:.25rem}.m-px-05{padding-left:.25rem;padding-right:.25rem}.m-pxy-05{padding:.25rem}.m-mr-05{margin-right:.25rem}.m-mb-05{margin-bottom:.25rem}.m-mt-05{margin-top:-.25rem}.m-ml-05{margin-left:-.25rem}.m-sticky-05{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .25rem)}.m-sticky-none{position:static}}@media screen and (min-width: 1024px){.l-pt-0{padding-top:0}.l-pl-0{padding-left:0}.l-pb-0{padding-bottom:0}.l-pr-0{padding-right:0}.l-py-0{padding-top:0;padding-bottom:0}.l-px-0{padding-left:0;padding-right:0}.l-pxy-0{padding:0}.l-mr-0{margin-right:0}.l-mb-0{margin-bottom:0}.l-mt-0{margin-top:0}.l-ml-0{margin-left:0}.l-sticky-0{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 0)}.l-pt-1{padding-top:.5rem}.l-pl-1{padding-left:.5rem}.l-pb-1{padding-bottom:.5rem}.l-pr-1{padding-right:.5rem}.l-py-1{padding-top:.5rem;padding-bottom:.5rem}.l-px-1{padding-left:.5rem;padding-right:.5rem}.l-pxy-1{padding:.5rem}.l-mr-1{margin-right:.5rem}.l-mb-1{margin-bottom:.5rem}.l-mt-1{margin-top:-.5rem}.l-ml-1{margin-left:-.5rem}.l-sticky-1{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .5rem)}.l-pt-2{padding-top:1rem}.l-pl-2{padding-left:1rem}.l-pb-2{padding-bottom:1rem}.l-pr-2{padding-right:1rem}.l-py-2{padding-top:1rem;padding-bottom:1rem}.l-px-2{padding-left:1rem;padding-right:1rem}.l-pxy-2{padding:1rem}.l-mr-2{margin-right:1rem}.l-mb-2{margin-bottom:1rem}.l-mt-2{margin-top:-1rem}.l-ml-2{margin-left:-1rem}.l-sticky-2{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1rem)}.l-pt-3{padding-top:1.5rem}.l-pl-3{padding-left:1.5rem}.l-pb-3{padding-bottom:1.5rem}.l-pr-3{padding-right:1.5rem}.l-py-3{padding-top:1.5rem;padding-bottom:1.5rem}.l-px-3{padding-left:1.5rem;padding-right:1.5rem}.l-pxy-3{padding:1.5rem}.l-mr-3{margin-right:1.5rem}.l-mb-3{margin-bottom:1.5rem}.l-mt-3{margin-top:-1.5rem}.l-ml-3{margin-left:-1.5rem}.l-sticky-3{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1.5rem)}.l-pt-4{padding-top:2rem}.l-pl-4{padding-left:2rem}.l-pb-4{padding-bottom:2rem}.l-pr-4{padding-right:2rem}.l-py-4{padding-top:2rem;padding-bottom:2rem}.l-px-4{padding-left:2rem;padding-right:2rem}.l-pxy-4{padding:2rem}.l-mr-4{margin-right:2rem}.l-mb-4{margin-bottom:2rem}.l-mt-4{margin-top:-2rem}.l-ml-4{margin-left:-2rem}.l-sticky-4{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 2rem)}.l-pt-05{padding-top:.25rem}.l-pl-05{padding-left:.25rem}.l-pb-05{padding-bottom:.25rem}.l-pr-05{padding-right:.25rem}.l-py-05{padding-top:.25rem;padding-bottom:.25rem}.l-px-05{padding-left:.25rem;padding-right:.25rem}.l-pxy-05{padding:.25rem}.l-mr-05{margin-right:.25rem}.l-mb-05{margin-bottom:.25rem}.l-mt-05{margin-top:-.25rem}.l-ml-05{margin-left:-.25rem}.l-sticky-05{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .25rem)}.l-sticky-none{position:static}}@media screen and (min-width: 1024px){.lg-pt-0{padding-top:0}.lg-pl-0{padding-left:0}.lg-pb-0{padding-bottom:0}.lg-pr-0{padding-right:0}.lg-py-0{padding-top:0;padding-bottom:0}.lg-px-0{padding-left:0;padding-right:0}.lg-pxy-0{padding:0}.lg-mr-0{margin-right:0}.lg-mb-0{margin-bottom:0}.lg-mt-0{margin-top:0}.lg-ml-0{margin-left:0}.lg-sticky-0{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 0)}.lg-pt-1{padding-top:.5rem}.lg-pl-1{padding-left:.5rem}.lg-pb-1{padding-bottom:.5rem}.lg-pr-1{padding-right:.5rem}.lg-py-1{padding-top:.5rem;padding-bottom:.5rem}.lg-px-1{padding-left:.5rem;padding-right:.5rem}.lg-pxy-1{padding:.5rem}.lg-mr-1{margin-right:.5rem}.lg-mb-1{margin-bottom:.5rem}.lg-mt-1{margin-top:-.5rem}.lg-ml-1{margin-left:-.5rem}.lg-sticky-1{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .5rem)}.lg-pt-2{padding-top:1rem}.lg-pl-2{padding-left:1rem}.lg-pb-2{padding-bottom:1rem}.lg-pr-2{padding-right:1rem}.lg-py-2{padding-top:1rem;padding-bottom:1rem}.lg-px-2{padding-left:1rem;padding-right:1rem}.lg-pxy-2{padding:1rem}.lg-mr-2{margin-right:1rem}.lg-mb-2{margin-bottom:1rem}.lg-mt-2{margin-top:-1rem}.lg-ml-2{margin-left:-1rem}.lg-sticky-2{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1rem)}.lg-pt-3{padding-top:1.5rem}.lg-pl-3{padding-left:1.5rem}.lg-pb-3{padding-bottom:1.5rem}.lg-pr-3{padding-right:1.5rem}.lg-py-3{padding-top:1.5rem;padding-bottom:1.5rem}.lg-px-3{padding-left:1.5rem;padding-right:1.5rem}.lg-pxy-3{padding:1.5rem}.lg-mr-3{margin-right:1.5rem}.lg-mb-3{margin-bottom:1.5rem}.lg-mt-3{margin-top:-1.5rem}.lg-ml-3{margin-left:-1.5rem}.lg-sticky-3{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1.5rem)}.lg-pt-4{padding-top:2rem}.lg-pl-4{padding-left:2rem}.lg-pb-4{padding-bottom:2rem}.lg-pr-4{padding-right:2rem}.lg-py-4{padding-top:2rem;padding-bottom:2rem}.lg-px-4{padding-left:2rem;padding-right:2rem}.lg-pxy-4{padding:2rem}.lg-mr-4{margin-right:2rem}.lg-mb-4{margin-bottom:2rem}.lg-mt-4{margin-top:-2rem}.lg-ml-4{margin-left:-2rem}.lg-sticky-4{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 2rem)}.lg-pt-05{padding-top:.25rem}.lg-pl-05{padding-left:.25rem}.lg-pb-05{padding-bottom:.25rem}.lg-pr-05{padding-right:.25rem}.lg-py-05{padding-top:.25rem;padding-bottom:.25rem}.lg-px-05{padding-left:.25rem;padding-right:.25rem}.lg-pxy-05{padding:.25rem}.lg-mr-05{margin-right:.25rem}.lg-mb-05{margin-bottom:.25rem}.lg-mt-05{margin-top:-.25rem}.lg-ml-05{margin-left:-.25rem}.lg-sticky-05{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .25rem)}.lg-sticky-none{position:static}}@media screen and (min-width: 1440px){.xl-pt-0{padding-top:0}.xl-pl-0{padding-left:0}.xl-pb-0{padding-bottom:0}.xl-pr-0{padding-right:0}.xl-py-0{padding-top:0;padding-bottom:0}.xl-px-0{padding-left:0;padding-right:0}.xl-pxy-0{padding:0}.xl-mr-0{margin-right:0}.xl-mb-0{margin-bottom:0}.xl-mt-0{margin-top:0}.xl-ml-0{margin-left:0}.xl-sticky-0{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 0)}.xl-pt-1{padding-top:.5rem}.xl-pl-1{padding-left:.5rem}.xl-pb-1{padding-bottom:.5rem}.xl-pr-1{padding-right:.5rem}.xl-py-1{padding-top:.5rem;padding-bottom:.5rem}.xl-px-1{padding-left:.5rem;padding-right:.5rem}.xl-pxy-1{padding:.5rem}.xl-mr-1{margin-right:.5rem}.xl-mb-1{margin-bottom:.5rem}.xl-mt-1{margin-top:-.5rem}.xl-ml-1{margin-left:-.5rem}.xl-sticky-1{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .5rem)}.xl-pt-2{padding-top:1rem}.xl-pl-2{padding-left:1rem}.xl-pb-2{padding-bottom:1rem}.xl-pr-2{padding-right:1rem}.xl-py-2{padding-top:1rem;padding-bottom:1rem}.xl-px-2{padding-left:1rem;padding-right:1rem}.xl-pxy-2{padding:1rem}.xl-mr-2{margin-right:1rem}.xl-mb-2{margin-bottom:1rem}.xl-mt-2{margin-top:-1rem}.xl-ml-2{margin-left:-1rem}.xl-sticky-2{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1rem)}.xl-pt-3{padding-top:1.5rem}.xl-pl-3{padding-left:1.5rem}.xl-pb-3{padding-bottom:1.5rem}.xl-pr-3{padding-right:1.5rem}.xl-py-3{padding-top:1.5rem;padding-bottom:1.5rem}.xl-px-3{padding-left:1.5rem;padding-right:1.5rem}.xl-pxy-3{padding:1.5rem}.xl-mr-3{margin-right:1.5rem}.xl-mb-3{margin-bottom:1.5rem}.xl-mt-3{margin-top:-1.5rem}.xl-ml-3{margin-left:-1.5rem}.xl-sticky-3{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 1.5rem)}.xl-pt-4{padding-top:2rem}.xl-pl-4{padding-left:2rem}.xl-pb-4{padding-bottom:2rem}.xl-pr-4{padding-right:2rem}.xl-py-4{padding-top:2rem;padding-bottom:2rem}.xl-px-4{padding-left:2rem;padding-right:2rem}.xl-pxy-4{padding:2rem}.xl-mr-4{margin-right:2rem}.xl-mb-4{margin-bottom:2rem}.xl-mt-4{margin-top:-2rem}.xl-ml-4{margin-left:-2rem}.xl-sticky-4{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + 2rem)}.xl-pt-05{padding-top:.25rem}.xl-pl-05{padding-left:.25rem}.xl-pb-05{padding-bottom:.25rem}.xl-pr-05{padding-right:.25rem}.xl-py-05{padding-top:.25rem;padding-bottom:.25rem}.xl-px-05{padding-left:.25rem;padding-right:.25rem}.xl-pxy-05{padding:.25rem}.xl-mr-05{margin-right:.25rem}.xl-mb-05{margin-bottom:.25rem}.xl-mt-05{margin-top:-.25rem}.xl-ml-05{margin-left:-.25rem}.xl-sticky-05{position:-webkit-sticky;position:sticky;top:calc(var(--header-height) + .25rem)}.xl-sticky-none{position:static}}.s-left{text-align:left}.s-center{text-align:center}.s-right{text-align:right}.s-to-left{margin-left:0;margin-right:auto}.s-to-left[class*=button]{display:table}.s-to-center{margin-left:auto;margin-right:auto}.s-to-center[class*=button]{display:table}.s-to-right{margin-right:0;margin-left:auto}.s-to-right[class*=button]{display:table}.s-block-left{display:block;margin-left:0;margin-right:auto}.s-block-center{display:block;margin-left:auto;margin-right:auto}.s-block-right{display:block;margin-right:0;margin-left:auto}@media screen and (min-width: 640px){.m-left{text-align:left}.m-center{text-align:center}.m-right{text-align:right}.m-to-left{margin-left:0;margin-right:auto}.m-to-left[class*=button]{display:table}.m-to-center{margin-left:auto;margin-right:auto}.m-to-center[class*=button]{display:table}.m-to-right{margin-right:0;margin-left:auto}.m-to-right[class*=button]{display:table}.m-block-left{display:block;margin-left:0;margin-right:auto}.m-block-center{display:block;margin-left:auto;margin-right:auto}.m-block-right{display:block;margin-right:0;margin-left:auto}}@media screen and (min-width: 1024px){.l-left{text-align:left}.l-center{text-align:center}.l-right{text-align:right}.l-to-left{margin-left:0;margin-right:auto}.l-to-left[class*=button]{display:table}.l-to-center{margin-left:auto;margin-right:auto}.l-to-center[class*=button]{display:table}.l-to-right{margin-right:0;margin-left:auto}.l-to-right[class*=button]{display:table}.l-block-left{display:block;margin-left:0;margin-right:auto}.l-block-center{display:block;margin-left:auto;margin-right:auto}.l-block-right{display:block;margin-right:0;margin-left:auto}}@media screen and (min-width: 1024px){.lg-left{text-align:left}.lg-center{text-align:center}.lg-right{text-align:right}.lg-to-left{margin-left:0;margin-right:auto}.lg-to-left[class*=button]{display:table}.lg-to-center{margin-left:auto;margin-right:auto}.lg-to-center[class*=button]{display:table}.lg-to-right{margin-right:0;margin-left:auto}.lg-to-right[class*=button]{display:table}.lg-block-left{display:block;margin-left:0;margin-right:auto}.lg-block-center{display:block;margin-left:auto;margin-right:auto}.lg-block-right{display:block;margin-right:0;margin-left:auto}}@media screen and (min-width: 1440px){.xl-left{text-align:left}.xl-center{text-align:center}.xl-right{text-align:right}.xl-to-left{margin-left:0;margin-right:auto}.xl-to-left[class*=button]{display:table}.xl-to-center{margin-left:auto;margin-right:auto}.xl-to-center[class*=button]{display:table}.xl-to-right{margin-right:0;margin-left:auto}.xl-to-right[class*=button]{display:table}.xl-block-left{display:block;margin-left:0;margin-right:auto}.xl-block-center{display:block;margin-left:auto;margin-right:auto}.xl-block-right{display:block;margin-right:0;margin-left:auto}}.s-order-1{-ms-flex-order:1;order:1}.s-order-2{-ms-flex-order:2;order:2}.s-order-3{-ms-flex-order:3;order:3}.s-order-4{-ms-flex-order:4;order:4}.s-order-5{-ms-flex-order:5;order:5}.s-order-6{-ms-flex-order:6;order:6}.s-order-7{-ms-flex-order:7;order:7}.s-order-8{-ms-flex-order:8;order:8}.s-order-9{-ms-flex-order:9;order:9}.s-order-10{-ms-flex-order:10;order:10}.s-order-11{-ms-flex-order:11;order:11}.s-order-12{-ms-flex-order:12;order:12}@media screen and (min-width: 640px){.m-order-1{-ms-flex-order:1;order:1}.m-order-2{-ms-flex-order:2;order:2}.m-order-3{-ms-flex-order:3;order:3}.m-order-4{-ms-flex-order:4;order:4}.m-order-5{-ms-flex-order:5;order:5}.m-order-6{-ms-flex-order:6;order:6}.m-order-7{-ms-flex-order:7;order:7}.m-order-8{-ms-flex-order:8;order:8}.m-order-9{-ms-flex-order:9;order:9}.m-order-10{-ms-flex-order:10;order:10}.m-order-11{-ms-flex-order:11;order:11}.m-order-12{-ms-flex-order:12;order:12}}@media screen and (min-width: 1024px){.l-order-1{-ms-flex-order:1;order:1}.l-order-2{-ms-flex-order:2;order:2}.l-order-3{-ms-flex-order:3;order:3}.l-order-4{-ms-flex-order:4;order:4}.l-order-5{-ms-flex-order:5;order:5}.l-order-6{-ms-flex-order:6;order:6}.l-order-7{-ms-flex-order:7;order:7}.l-order-8{-ms-flex-order:8;order:8}.l-order-9{-ms-flex-order:9;order:9}.l-order-10{-ms-flex-order:10;order:10}.l-order-11{-ms-flex-order:11;order:11}.l-order-12{-ms-flex-order:12;order:12}}@media screen and (min-width: 1024px){.lg-order-1{-ms-flex-order:1;order:1}.lg-order-2{-ms-flex-order:2;order:2}.lg-order-3{-ms-flex-order:3;order:3}.lg-order-4{-ms-flex-order:4;order:4}.lg-order-5{-ms-flex-order:5;order:5}.lg-order-6{-ms-flex-order:6;order:6}.lg-order-7{-ms-flex-order:7;order:7}.lg-order-8{-ms-flex-order:8;order:8}.lg-order-9{-ms-flex-order:9;order:9}.lg-order-10{-ms-flex-order:10;order:10}.lg-order-11{-ms-flex-order:11;order:11}.lg-order-12{-ms-flex-order:12;order:12}}@media screen and (min-width: 1440px){.xl-order-1{-ms-flex-order:1;order:1}.xl-order-2{-ms-flex-order:2;order:2}.xl-order-3{-ms-flex-order:3;order:3}.xl-order-4{-ms-flex-order:4;order:4}.xl-order-5{-ms-flex-order:5;order:5}.xl-order-6{-ms-flex-order:6;order:6}.xl-order-7{-ms-flex-order:7;order:7}.xl-order-8{-ms-flex-order:8;order:8}.xl-order-9{-ms-flex-order:9;order:9}.xl-order-10{-ms-flex-order:10;order:10}.xl-order-11{-ms-flex-order:11;order:11}.xl-order-12{-ms-flex-order:12;order:12}}.flex,.s-row,.s-row-reverse,.s-column,.s-column-reverse,.s-main-start,.s-main-center,.s-main-end,.s-main-justify,.s-main-distribute,.s-cross-baseline,.s-cross-start,.s-cross-center,.s-cross-end{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 640px){.flex,.m-row,.m-row-reverse,.m-column,.m-column-reverse,.m-main-start,.m-main-center,.m-main-end,.m-main-justify,.m-main-distribute,.m-cross-baseline,.m-cross-start,.m-cross-center,.m-cross-end{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (min-width: 1024px){.flex,.l-row,.l-row-reverse,.l-column,.l-column-reverse,.l-main-start,.l-main-center,.l-main-end,.l-main-justify,.l-main-distribute,.l-cross-baseline,.l-cross-start,.l-cross-center,.l-cross-end{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (min-width: 1024px){.flex,.lg-row,.lg-row-reverse,.lg-column,.lg-column-reverse,.lg-main-start,.lg-main-center,.lg-main-end,.lg-main-justify,.lg-main-distribute,.lg-cross-baseline,.lg-cross-start,.lg-cross-center,.lg-cross-end{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (min-width: 1440px){.flex,.xl-row,.xl-row-reverse,.xl-column,.xl-column-reverse,.xl-main-start,.xl-main-center,.xl-main-end,.xl-main-justify,.xl-main-distribute,.xl-cross-baseline,.xl-cross-start,.xl-cross-center,.xl-cross-end{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.s-row{-ms-flex-direction:row;flex-direction:row}.s-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.s-column{-ms-flex-direction:column;flex-direction:column}.s-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.s-main-start{-ms-flex-pack:start;justify-content:flex-start}.s-main-center{-ms-flex-pack:center;justify-content:center}.s-main-end{-ms-flex-pack:end;justify-content:flex-end}.s-main-justify{-ms-flex-pack:justify;justify-content:space-between}.s-main-distribute{-ms-flex-pack:space-evenly;justify-content:space-evenly}.s-cross-baseline{-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:baseline;align-content:baseline}.s-cross-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.s-cross-center{-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.s-cross-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:end;align-content:flex-end}@media screen and (min-width: 640px){.m-row{-ms-flex-direction:row;flex-direction:row}.m-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.m-column{-ms-flex-direction:column;flex-direction:column}.m-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.m-main-start{-ms-flex-pack:start;justify-content:flex-start}.m-main-center{-ms-flex-pack:center;justify-content:center}.m-main-end{-ms-flex-pack:end;justify-content:flex-end}.m-main-justify{-ms-flex-pack:justify;justify-content:space-between}.m-main-distribute{-ms-flex-pack:space-evenly;justify-content:space-evenly}.m-cross-baseline{-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:baseline;align-content:baseline}.m-cross-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.m-cross-center{-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.m-cross-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:end;align-content:flex-end}}@media screen and (min-width: 1024px){.l-row{-ms-flex-direction:row;flex-direction:row}.l-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.l-column{-ms-flex-direction:column;flex-direction:column}.l-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.l-main-start{-ms-flex-pack:start;justify-content:flex-start}.l-main-center{-ms-flex-pack:center;justify-content:center}.l-main-end{-ms-flex-pack:end;justify-content:flex-end}.l-main-justify{-ms-flex-pack:justify;justify-content:space-between}.l-main-distribute{-ms-flex-pack:space-evenly;justify-content:space-evenly}.l-cross-baseline{-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:baseline;align-content:baseline}.l-cross-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.l-cross-center{-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.l-cross-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:end;align-content:flex-end}}@media screen and (min-width: 1024px){.lg-row{-ms-flex-direction:row;flex-direction:row}.lg-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.lg-column{-ms-flex-direction:column;flex-direction:column}.lg-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.lg-main-start{-ms-flex-pack:start;justify-content:flex-start}.lg-main-center{-ms-flex-pack:center;justify-content:center}.lg-main-end{-ms-flex-pack:end;justify-content:flex-end}.lg-main-justify{-ms-flex-pack:justify;justify-content:space-between}.lg-main-distribute{-ms-flex-pack:space-evenly;justify-content:space-evenly}.lg-cross-baseline{-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:baseline;align-content:baseline}.lg-cross-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.lg-cross-center{-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.lg-cross-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:end;align-content:flex-end}}@media screen and (min-width: 1440px){.xl-row{-ms-flex-direction:row;flex-direction:row}.xl-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.xl-column{-ms-flex-direction:column;flex-direction:column}.xl-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.xl-main-start{-ms-flex-pack:start;justify-content:flex-start}.xl-main-center{-ms-flex-pack:center;justify-content:center}.xl-main-end{-ms-flex-pack:end;justify-content:flex-end}.xl-main-justify{-ms-flex-pack:justify;justify-content:space-between}.xl-main-distribute{-ms-flex-pack:space-evenly;justify-content:space-evenly}.xl-cross-baseline{-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:baseline;align-content:baseline}.xl-cross-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.xl-cross-center{-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}.xl-cross-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:end;align-content:flex-end}}.from-s{display:none}.to-s{display:none}@media screen and (max-width: 639px){.from-m{display:none}}@media screen and (min-width: 640px){.to-m{display:none}}@media screen and (max-width: 1023px){.from-l{display:none}}@media screen and (min-width: 1024px){.to-l{display:none}}@media screen and (max-width: 1023px){.from-lg{display:none}}@media screen and (min-width: 1024px){.to-lg{display:none}}@media screen and (max-width: 1439px){.from-xl{display:none}}@media screen and (min-width: 1440px){.to-xl{display:none}}.button{display:inline-block;padding:.5em 1em;color:#FFF;background:var(--color);cursor:pointer;text-decoration:none;line-height:inherit;border-radius:.25rem;transition:transform .05s;border:none}.button:hover{background:var(--color-alt)}.z-back{z-index:var(--z-back)}.z-normal{z-index:var(--z-normal)}.z-tooltip{z-index:var(--z-tooltip)}.z-fixed{z-index:var(--z-fixed)}.z-modal{z-index:var(--z-modal)}.s-border,.card__teachers span{border:1px solid var(--border-color)}.s-border-none{border:none}.s-radius,.card__teachers span{border-radius:var(--border-radius)}.s-border-top{border-top:1px solid var(--border-color)}.s-border-none{border-top:none}.s-border-right{border-right:1px solid var(--border-color)}.s-border-none{border-right:none}.s-border-bottom{border-bottom:1px solid var(--border-color)}.s-border-none{border-bottom:none}.s-border-left{border-left:1px solid var(--border-color)}.s-border-none{border-left:none}.s-radius-tl{border-top-left-radius:var(--border-radius)}.s-radius-tr{border-top-right-radius:var(--border-radius)}.s-radius-bl{border-bottom-left-radius:var(--border-radius)}.s-radius-br{border-bottom-right-radius:var(--border-radius)}.s-radius-0{border-radius:0}.s-radius-1{border-radius:.5rem}.s-radius-2{border-radius:1rem}.s-radius-3{border-radius:1.5rem}.s-radius-4{border-radius:2rem}.s-radius-05{border-radius:.25rem}.s-radius-tl-0{border-top-left-radius:0}.s-radius-tl-1{border-top-left-radius:.5rem}.s-radius-tl-2{border-top-left-radius:1rem}.s-radius-tl-3{border-top-left-radius:1.5rem}.s-radius-tl-4{border-top-left-radius:2rem}.s-radius-tl-05{border-top-left-radius:.25rem}.s-radius-tr-0{border-top-right-radius:0}.s-radius-tr-1{border-top-right-radius:.5rem}.s-radius-tr-2{border-top-right-radius:1rem}.s-radius-tr-3{border-top-right-radius:1.5rem}.s-radius-tr-4{border-top-right-radius:2rem}.s-radius-tr-05{border-top-right-radius:.25rem}.s-radius-bl-0{border-bottom-left-radius:0}.s-radius-bl-1{border-bottom-left-radius:.5rem}.s-radius-bl-2{border-bottom-left-radius:1rem}.s-radius-bl-3{border-bottom-left-radius:1.5rem}.s-radius-bl-4{border-bottom-left-radius:2rem}.s-radius-bl-05{border-bottom-left-radius:.25rem}.s-radius-br-0{border-bottom-right-radius:0}.s-radius-br-1{border-bottom-right-radius:.5rem}.s-radius-br-2{border-bottom-right-radius:1rem}.s-radius-br-3{border-bottom-right-radius:1.5rem}.s-radius-br-4{border-bottom-right-radius:2rem}.s-radius-br-05{border-bottom-right-radius:.25rem}.s-radius-tl-none{border-top-left-radius:0}.s-radius-tr-none{border-top-right-radius:0}.s-radius-bl-none{border-bottom-left-radius:0}.s-radius-br-none{border-bottom-right-radius:0}.s-radius-none{border-radius:none}.s-bg-blue{background-color:var(--color)}.s-bg-white{background-color:#FFF}.s-bg-grey{background-color:var(--light-bg)}.s-bg-none{background-color:transparent}.s-ratio-1-1{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.s-ratio-1-2{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.s-ratio-1-3{width:100%;height:0;overflow:hidden;padding-bottom:300%;position:relative}.s-ratio-1-4{width:100%;height:0;overflow:hidden;padding-bottom:400%;position:relative}.s-ratio-2-1{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.s-ratio-2-2{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.s-ratio-2-3{width:100%;height:0;overflow:hidden;padding-bottom:150%;position:relative}.s-ratio-2-4{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.s-ratio-3-1{width:100%;height:0;overflow:hidden;padding-bottom:33.33333%;position:relative}.s-ratio-3-2{width:100%;height:0;overflow:hidden;padding-bottom:66.66667%;position:relative}.s-ratio-3-3{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.s-ratio-3-4{width:100%;height:0;overflow:hidden;padding-bottom:133.33333%;position:relative}.s-ratio-4-1{width:100%;height:0;overflow:hidden;padding-bottom:25%;position:relative}.s-ratio-4-2{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.s-ratio-4-3{width:100%;height:0;overflow:hidden;padding-bottom:75%;position:relative}.s-ratio-4-4{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.s-ratio-16-9{width:100%;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.s-ratio-9-16{width:100%;height:0;overflow:hidden;padding-bottom:177.77778%;position:relative}.s-ratio-21-9{width:100%;height:0;overflow:hidden;padding-bottom:42.85714%;position:relative}.s-shadow{box-shadow:0 0 1rem #CCC}.s-shadow-bottom,.card:hover{box-shadow:0 0.5rem 1rem -0.5rem #CCC}.s-shadow-top{box-shadow:0 -0.5rem 1rem -0.5rem #CCC}.s-shadow-right{box-shadow:0.5rem 0 1rem -0.5rem #CCC}.s-shadow-left{box-shadow:-0.5rem 0 1rem -0.5rem #CCC}.s-shadow-none{box-shadow:none}.s-fxn{-ms-flex:none;flex:none}.s-fxw{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fxg{-ms-flex-positive:1;flex-grow:1}.s-opacity-1{opacity:.1}.s-opacity-2{opacity:.2}.s-opacity-3{opacity:.3}.s-opacity-4{opacity:.4}.s-opacity-5{opacity:.5}.s-opacity-6{opacity:.6}.s-opacity-7{opacity:.7}.s-opacity-8{opacity:.8}.s-opacity-9{opacity:.9}.s-opacity-10{opacity:1}@media screen and (min-width: 640px){.m-border{border:1px solid var(--border-color)}.m-border-none{border:none}.m-radius{border-radius:var(--border-radius)}.m-border-top{border-top:1px solid var(--border-color)}.m-border-none{border-top:none}.m-border-right{border-right:1px solid var(--border-color)}.m-border-none{border-right:none}.m-border-bottom{border-bottom:1px solid var(--border-color)}.m-border-none{border-bottom:none}.m-border-left{border-left:1px solid var(--border-color)}.m-border-none{border-left:none}.m-radius-tl{border-top-left-radius:var(--border-radius)}.m-radius-tr{border-top-right-radius:var(--border-radius)}.m-radius-bl{border-bottom-left-radius:var(--border-radius)}.m-radius-br{border-bottom-right-radius:var(--border-radius)}.m-radius-0{border-radius:0}.m-radius-1{border-radius:.5rem}.m-radius-2{border-radius:1rem}.m-radius-3{border-radius:1.5rem}.m-radius-4{border-radius:2rem}.m-radius-05{border-radius:.25rem}.m-radius-tl-0{border-top-left-radius:0}.m-radius-tl-1{border-top-left-radius:.5rem}.m-radius-tl-2{border-top-left-radius:1rem}.m-radius-tl-3{border-top-left-radius:1.5rem}.m-radius-tl-4{border-top-left-radius:2rem}.m-radius-tl-05{border-top-left-radius:.25rem}.m-radius-tr-0{border-top-right-radius:0}.m-radius-tr-1{border-top-right-radius:.5rem}.m-radius-tr-2{border-top-right-radius:1rem}.m-radius-tr-3{border-top-right-radius:1.5rem}.m-radius-tr-4{border-top-right-radius:2rem}.m-radius-tr-05{border-top-right-radius:.25rem}.m-radius-bl-0{border-bottom-left-radius:0}.m-radius-bl-1{border-bottom-left-radius:.5rem}.m-radius-bl-2{border-bottom-left-radius:1rem}.m-radius-bl-3{border-bottom-left-radius:1.5rem}.m-radius-bl-4{border-bottom-left-radius:2rem}.m-radius-bl-05{border-bottom-left-radius:.25rem}.m-radius-br-0{border-bottom-right-radius:0}.m-radius-br-1{border-bottom-right-radius:.5rem}.m-radius-br-2{border-bottom-right-radius:1rem}.m-radius-br-3{border-bottom-right-radius:1.5rem}.m-radius-br-4{border-bottom-right-radius:2rem}.m-radius-br-05{border-bottom-right-radius:.25rem}.m-radius-tl-none{border-top-left-radius:0}.m-radius-tr-none{border-top-right-radius:0}.m-radius-bl-none{border-bottom-left-radius:0}.m-radius-br-none{border-bottom-right-radius:0}.m-radius-none{border-radius:none}.m-bg-blue{background-color:var(--color)}.m-bg-white{background-color:#FFF}.m-bg-grey{background-color:var(--light-bg)}.m-bg-none{background-color:transparent}.m-ratio-1-1{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.m-ratio-1-2{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.m-ratio-1-3{width:100%;height:0;overflow:hidden;padding-bottom:300%;position:relative}.m-ratio-1-4{width:100%;height:0;overflow:hidden;padding-bottom:400%;position:relative}.m-ratio-2-1{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.m-ratio-2-2{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.m-ratio-2-3{width:100%;height:0;overflow:hidden;padding-bottom:150%;position:relative}.m-ratio-2-4{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.m-ratio-3-1{width:100%;height:0;overflow:hidden;padding-bottom:33.33333%;position:relative}.m-ratio-3-2{width:100%;height:0;overflow:hidden;padding-bottom:66.66667%;position:relative}.m-ratio-3-3{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.m-ratio-3-4{width:100%;height:0;overflow:hidden;padding-bottom:133.33333%;position:relative}.m-ratio-4-1{width:100%;height:0;overflow:hidden;padding-bottom:25%;position:relative}.m-ratio-4-2{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.m-ratio-4-3{width:100%;height:0;overflow:hidden;padding-bottom:75%;position:relative}.m-ratio-4-4{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.m-ratio-16-9{width:100%;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.m-ratio-9-16{width:100%;height:0;overflow:hidden;padding-bottom:177.77778%;position:relative}.m-ratio-21-9{width:100%;height:0;overflow:hidden;padding-bottom:42.85714%;position:relative}.m-shadow{box-shadow:0 0 1rem #CCC}.m-shadow-bottom{box-shadow:0 0.5rem 1rem -0.5rem #CCC}.m-shadow-top{box-shadow:0 -0.5rem 1rem -0.5rem #CCC}.m-shadow-right{box-shadow:0.5rem 0 1rem -0.5rem #CCC}.m-shadow-left{box-shadow:-0.5rem 0 1rem -0.5rem #CCC}.m-shadow-none{box-shadow:none}.m-fxn{-ms-flex:none;flex:none}.m-fxw{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.m-fxg{-ms-flex-positive:1;flex-grow:1}.m-opacity-1{opacity:.1}.m-opacity-2{opacity:.2}.m-opacity-3{opacity:.3}.m-opacity-4{opacity:.4}.m-opacity-5{opacity:.5}.m-opacity-6{opacity:.6}.m-opacity-7{opacity:.7}.m-opacity-8{opacity:.8}.m-opacity-9{opacity:.9}.m-opacity-10{opacity:1}}@media screen and (min-width: 1024px){.l-border{border:1px solid var(--border-color)}.l-border-none{border:none}.l-radius{border-radius:var(--border-radius)}.l-border-top{border-top:1px solid var(--border-color)}.l-border-none{border-top:none}.l-border-right{border-right:1px solid var(--border-color)}.l-border-none{border-right:none}.l-border-bottom{border-bottom:1px solid var(--border-color)}.l-border-none{border-bottom:none}.l-border-left{border-left:1px solid var(--border-color)}.l-border-none{border-left:none}.l-radius-tl{border-top-left-radius:var(--border-radius)}.l-radius-tr{border-top-right-radius:var(--border-radius)}.l-radius-bl{border-bottom-left-radius:var(--border-radius)}.l-radius-br{border-bottom-right-radius:var(--border-radius)}.l-radius-0{border-radius:0}.l-radius-1{border-radius:.5rem}.l-radius-2{border-radius:1rem}.l-radius-3{border-radius:1.5rem}.l-radius-4{border-radius:2rem}.l-radius-05{border-radius:.25rem}.l-radius-tl-0{border-top-left-radius:0}.l-radius-tl-1{border-top-left-radius:.5rem}.l-radius-tl-2{border-top-left-radius:1rem}.l-radius-tl-3{border-top-left-radius:1.5rem}.l-radius-tl-4{border-top-left-radius:2rem}.l-radius-tl-05{border-top-left-radius:.25rem}.l-radius-tr-0{border-top-right-radius:0}.l-radius-tr-1{border-top-right-radius:.5rem}.l-radius-tr-2{border-top-right-radius:1rem}.l-radius-tr-3{border-top-right-radius:1.5rem}.l-radius-tr-4{border-top-right-radius:2rem}.l-radius-tr-05{border-top-right-radius:.25rem}.l-radius-bl-0{border-bottom-left-radius:0}.l-radius-bl-1{border-bottom-left-radius:.5rem}.l-radius-bl-2{border-bottom-left-radius:1rem}.l-radius-bl-3{border-bottom-left-radius:1.5rem}.l-radius-bl-4{border-bottom-left-radius:2rem}.l-radius-bl-05{border-bottom-left-radius:.25rem}.l-radius-br-0{border-bottom-right-radius:0}.l-radius-br-1{border-bottom-right-radius:.5rem}.l-radius-br-2{border-bottom-right-radius:1rem}.l-radius-br-3{border-bottom-right-radius:1.5rem}.l-radius-br-4{border-bottom-right-radius:2rem}.l-radius-br-05{border-bottom-right-radius:.25rem}.l-radius-tl-none{border-top-left-radius:0}.l-radius-tr-none{border-top-right-radius:0}.l-radius-bl-none{border-bottom-left-radius:0}.l-radius-br-none{border-bottom-right-radius:0}.l-radius-none{border-radius:none}.l-bg-blue{background-color:var(--color)}.l-bg-white{background-color:#FFF}.l-bg-grey{background-color:var(--light-bg)}.l-bg-none{background-color:transparent}.l-ratio-1-1{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.l-ratio-1-2{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.l-ratio-1-3{width:100%;height:0;overflow:hidden;padding-bottom:300%;position:relative}.l-ratio-1-4{width:100%;height:0;overflow:hidden;padding-bottom:400%;position:relative}.l-ratio-2-1{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.l-ratio-2-2{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.l-ratio-2-3{width:100%;height:0;overflow:hidden;padding-bottom:150%;position:relative}.l-ratio-2-4{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.l-ratio-3-1{width:100%;height:0;overflow:hidden;padding-bottom:33.33333%;position:relative}.l-ratio-3-2{width:100%;height:0;overflow:hidden;padding-bottom:66.66667%;position:relative}.l-ratio-3-3{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.l-ratio-3-4{width:100%;height:0;overflow:hidden;padding-bottom:133.33333%;position:relative}.l-ratio-4-1{width:100%;height:0;overflow:hidden;padding-bottom:25%;position:relative}.l-ratio-4-2{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.l-ratio-4-3{width:100%;height:0;overflow:hidden;padding-bottom:75%;position:relative}.l-ratio-4-4{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.l-ratio-16-9{width:100%;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.l-ratio-9-16{width:100%;height:0;overflow:hidden;padding-bottom:177.77778%;position:relative}.l-ratio-21-9{width:100%;height:0;overflow:hidden;padding-bottom:42.85714%;position:relative}.l-shadow{box-shadow:0 0 1rem #CCC}.l-shadow-bottom{box-shadow:0 0.5rem 1rem -0.5rem #CCC}.l-shadow-top{box-shadow:0 -0.5rem 1rem -0.5rem #CCC}.l-shadow-right{box-shadow:0.5rem 0 1rem -0.5rem #CCC}.l-shadow-left{box-shadow:-0.5rem 0 1rem -0.5rem #CCC}.l-shadow-none{box-shadow:none}.l-fxn{-ms-flex:none;flex:none}.l-fxw{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.l-fxg{-ms-flex-positive:1;flex-grow:1}.l-opacity-1{opacity:.1}.l-opacity-2{opacity:.2}.l-opacity-3{opacity:.3}.l-opacity-4{opacity:.4}.l-opacity-5{opacity:.5}.l-opacity-6{opacity:.6}.l-opacity-7{opacity:.7}.l-opacity-8{opacity:.8}.l-opacity-9{opacity:.9}.l-opacity-10{opacity:1}}@media screen and (min-width: 1024px){.lg-border{border:1px solid var(--border-color)}.lg-border-none{border:none}.lg-radius{border-radius:var(--border-radius)}.lg-border-top{border-top:1px solid var(--border-color)}.lg-border-none{border-top:none}.lg-border-right{border-right:1px solid var(--border-color)}.lg-border-none{border-right:none}.lg-border-bottom{border-bottom:1px solid var(--border-color)}.lg-border-none{border-bottom:none}.lg-border-left{border-left:1px solid var(--border-color)}.lg-border-none{border-left:none}.lg-radius-tl{border-top-left-radius:var(--border-radius)}.lg-radius-tr{border-top-right-radius:var(--border-radius)}.lg-radius-bl{border-bottom-left-radius:var(--border-radius)}.lg-radius-br{border-bottom-right-radius:var(--border-radius)}.lg-radius-0{border-radius:0}.lg-radius-1{border-radius:.5rem}.lg-radius-2{border-radius:1rem}.lg-radius-3{border-radius:1.5rem}.lg-radius-4{border-radius:2rem}.lg-radius-05{border-radius:.25rem}.lg-radius-tl-0{border-top-left-radius:0}.lg-radius-tl-1{border-top-left-radius:.5rem}.lg-radius-tl-2{border-top-left-radius:1rem}.lg-radius-tl-3{border-top-left-radius:1.5rem}.lg-radius-tl-4{border-top-left-radius:2rem}.lg-radius-tl-05{border-top-left-radius:.25rem}.lg-radius-tr-0{border-top-right-radius:0}.lg-radius-tr-1{border-top-right-radius:.5rem}.lg-radius-tr-2{border-top-right-radius:1rem}.lg-radius-tr-3{border-top-right-radius:1.5rem}.lg-radius-tr-4{border-top-right-radius:2rem}.lg-radius-tr-05{border-top-right-radius:.25rem}.lg-radius-bl-0{border-bottom-left-radius:0}.lg-radius-bl-1{border-bottom-left-radius:.5rem}.lg-radius-bl-2{border-bottom-left-radius:1rem}.lg-radius-bl-3{border-bottom-left-radius:1.5rem}.lg-radius-bl-4{border-bottom-left-radius:2rem}.lg-radius-bl-05{border-bottom-left-radius:.25rem}.lg-radius-br-0{border-bottom-right-radius:0}.lg-radius-br-1{border-bottom-right-radius:.5rem}.lg-radius-br-2{border-bottom-right-radius:1rem}.lg-radius-br-3{border-bottom-right-radius:1.5rem}.lg-radius-br-4{border-bottom-right-radius:2rem}.lg-radius-br-05{border-bottom-right-radius:.25rem}.lg-radius-tl-none{border-top-left-radius:0}.lg-radius-tr-none{border-top-right-radius:0}.lg-radius-bl-none{border-bottom-left-radius:0}.lg-radius-br-none{border-bottom-right-radius:0}.lg-radius-none{border-radius:none}.lg-bg-blue{background-color:var(--color)}.lg-bg-white{background-color:#FFF}.lg-bg-grey{background-color:var(--light-bg)}.lg-bg-none{background-color:transparent}.lg-ratio-1-1{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.lg-ratio-1-2{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.lg-ratio-1-3{width:100%;height:0;overflow:hidden;padding-bottom:300%;position:relative}.lg-ratio-1-4{width:100%;height:0;overflow:hidden;padding-bottom:400%;position:relative}.lg-ratio-2-1{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.lg-ratio-2-2{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.lg-ratio-2-3{width:100%;height:0;overflow:hidden;padding-bottom:150%;position:relative}.lg-ratio-2-4{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.lg-ratio-3-1{width:100%;height:0;overflow:hidden;padding-bottom:33.33333%;position:relative}.lg-ratio-3-2{width:100%;height:0;overflow:hidden;padding-bottom:66.66667%;position:relative}.lg-ratio-3-3{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.lg-ratio-3-4{width:100%;height:0;overflow:hidden;padding-bottom:133.33333%;position:relative}.lg-ratio-4-1{width:100%;height:0;overflow:hidden;padding-bottom:25%;position:relative}.lg-ratio-4-2{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.lg-ratio-4-3{width:100%;height:0;overflow:hidden;padding-bottom:75%;position:relative}.lg-ratio-4-4{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.lg-ratio-16-9{width:100%;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.lg-ratio-9-16{width:100%;height:0;overflow:hidden;padding-bottom:177.77778%;position:relative}.lg-ratio-21-9{width:100%;height:0;overflow:hidden;padding-bottom:42.85714%;position:relative}.lg-shadow{box-shadow:0 0 1rem #CCC}.lg-shadow-bottom{box-shadow:0 0.5rem 1rem -0.5rem #CCC}.lg-shadow-top{box-shadow:0 -0.5rem 1rem -0.5rem #CCC}.lg-shadow-right{box-shadow:0.5rem 0 1rem -0.5rem #CCC}.lg-shadow-left{box-shadow:-0.5rem 0 1rem -0.5rem #CCC}.lg-shadow-none{box-shadow:none}.lg-fxn{-ms-flex:none;flex:none}.lg-fxw{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.lg-fxg{-ms-flex-positive:1;flex-grow:1}.lg-opacity-1{opacity:.1}.lg-opacity-2{opacity:.2}.lg-opacity-3{opacity:.3}.lg-opacity-4{opacity:.4}.lg-opacity-5{opacity:.5}.lg-opacity-6{opacity:.6}.lg-opacity-7{opacity:.7}.lg-opacity-8{opacity:.8}.lg-opacity-9{opacity:.9}.lg-opacity-10{opacity:1}}@media screen and (min-width: 1440px){.xl-border{border:1px solid var(--border-color)}.xl-border-none{border:none}.xl-radius{border-radius:var(--border-radius)}.xl-border-top{border-top:1px solid var(--border-color)}.xl-border-none{border-top:none}.xl-border-right{border-right:1px solid var(--border-color)}.xl-border-none{border-right:none}.xl-border-bottom{border-bottom:1px solid var(--border-color)}.xl-border-none{border-bottom:none}.xl-border-left{border-left:1px solid var(--border-color)}.xl-border-none{border-left:none}.xl-radius-tl{border-top-left-radius:var(--border-radius)}.xl-radius-tr{border-top-right-radius:var(--border-radius)}.xl-radius-bl{border-bottom-left-radius:var(--border-radius)}.xl-radius-br{border-bottom-right-radius:var(--border-radius)}.xl-radius-0{border-radius:0}.xl-radius-1{border-radius:.5rem}.xl-radius-2{border-radius:1rem}.xl-radius-3{border-radius:1.5rem}.xl-radius-4{border-radius:2rem}.xl-radius-05{border-radius:.25rem}.xl-radius-tl-0{border-top-left-radius:0}.xl-radius-tl-1{border-top-left-radius:.5rem}.xl-radius-tl-2{border-top-left-radius:1rem}.xl-radius-tl-3{border-top-left-radius:1.5rem}.xl-radius-tl-4{border-top-left-radius:2rem}.xl-radius-tl-05{border-top-left-radius:.25rem}.xl-radius-tr-0{border-top-right-radius:0}.xl-radius-tr-1{border-top-right-radius:.5rem}.xl-radius-tr-2{border-top-right-radius:1rem}.xl-radius-tr-3{border-top-right-radius:1.5rem}.xl-radius-tr-4{border-top-right-radius:2rem}.xl-radius-tr-05{border-top-right-radius:.25rem}.xl-radius-bl-0{border-bottom-left-radius:0}.xl-radius-bl-1{border-bottom-left-radius:.5rem}.xl-radius-bl-2{border-bottom-left-radius:1rem}.xl-radius-bl-3{border-bottom-left-radius:1.5rem}.xl-radius-bl-4{border-bottom-left-radius:2rem}.xl-radius-bl-05{border-bottom-left-radius:.25rem}.xl-radius-br-0{border-bottom-right-radius:0}.xl-radius-br-1{border-bottom-right-radius:.5rem}.xl-radius-br-2{border-bottom-right-radius:1rem}.xl-radius-br-3{border-bottom-right-radius:1.5rem}.xl-radius-br-4{border-bottom-right-radius:2rem}.xl-radius-br-05{border-bottom-right-radius:.25rem}.xl-radius-tl-none{border-top-left-radius:0}.xl-radius-tr-none{border-top-right-radius:0}.xl-radius-bl-none{border-bottom-left-radius:0}.xl-radius-br-none{border-bottom-right-radius:0}.xl-radius-none{border-radius:none}.xl-bg-blue{background-color:var(--color)}.xl-bg-white{background-color:#FFF}.xl-bg-grey{background-color:var(--light-bg)}.xl-bg-none{background-color:transparent}.xl-ratio-1-1{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.xl-ratio-1-2{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.xl-ratio-1-3{width:100%;height:0;overflow:hidden;padding-bottom:300%;position:relative}.xl-ratio-1-4{width:100%;height:0;overflow:hidden;padding-bottom:400%;position:relative}.xl-ratio-2-1{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.xl-ratio-2-2{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.xl-ratio-2-3{width:100%;height:0;overflow:hidden;padding-bottom:150%;position:relative}.xl-ratio-2-4{width:100%;height:0;overflow:hidden;padding-bottom:200%;position:relative}.xl-ratio-3-1{width:100%;height:0;overflow:hidden;padding-bottom:33.33333%;position:relative}.xl-ratio-3-2{width:100%;height:0;overflow:hidden;padding-bottom:66.66667%;position:relative}.xl-ratio-3-3{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.xl-ratio-3-4{width:100%;height:0;overflow:hidden;padding-bottom:133.33333%;position:relative}.xl-ratio-4-1{width:100%;height:0;overflow:hidden;padding-bottom:25%;position:relative}.xl-ratio-4-2{width:100%;height:0;overflow:hidden;padding-bottom:50%;position:relative}.xl-ratio-4-3{width:100%;height:0;overflow:hidden;padding-bottom:75%;position:relative}.xl-ratio-4-4{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.xl-ratio-16-9{width:100%;height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.xl-ratio-9-16{width:100%;height:0;overflow:hidden;padding-bottom:177.77778%;position:relative}.xl-ratio-21-9{width:100%;height:0;overflow:hidden;padding-bottom:42.85714%;position:relative}.xl-shadow{box-shadow:0 0 1rem #CCC}.xl-shadow-bottom{box-shadow:0 0.5rem 1rem -0.5rem #CCC}.xl-shadow-top{box-shadow:0 -0.5rem 1rem -0.5rem #CCC}.xl-shadow-right{box-shadow:0.5rem 0 1rem -0.5rem #CCC}.xl-shadow-left{box-shadow:-0.5rem 0 1rem -0.5rem #CCC}.xl-shadow-none{box-shadow:none}.xl-fxn{-ms-flex:none;flex:none}.xl-fxw{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.xl-fxg{-ms-flex-positive:1;flex-grow:1}.xl-opacity-1{opacity:.1}.xl-opacity-2{opacity:.2}.xl-opacity-3{opacity:.3}.xl-opacity-4{opacity:.4}.xl-opacity-5{opacity:.5}.xl-opacity-6{opacity:.6}.xl-opacity-7{opacity:.7}.xl-opacity-8{opacity:.8}.xl-opacity-9{opacity:.9}.xl-opacity-10{opacity:1}}.circle,.square{width:100%;height:0;overflow:hidden;padding-bottom:100%;position:relative}.circle{border-radius:50%}.img-container{position:relative}.img-container img{width:100%;height:100%;position:absolute;top:0;left:0;-o-object-fit:cover;object-fit:cover}.ed-video{height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.ed-video>iframe,.ed-video>video,.ed-video>.video{position:absolute;top:0;left:0;width:100%;height:100%}:root{--color: #007BDF;--color-alt: #006DC6;--border-color: #DFE0E0;--light-bg: #F0F0F0;--border-radius: .25rem;--vertical-block-space: 1rem;--vertical-content-space: 1rem;--gap: 1rem;--max-width: 1200px}@media screen and (min-width: 1024px){:root{--vertical-block-space: 2rem;--gap: 2rem}}:root{--header-height: 3rem}@media screen and (min-width: 1024px){:root{--header-height: 4rem}}:root{--z-back: -10;--z-normal: 1;--z-tooltip: 10;--z-fixed: 100;--z-modal: 1000}:root{--heading-font: 'Raleway', sans-serif;--body-font: 'Open Sans', sans-serif;--bigger-font-size: 1.75rem;--h1-font-size: 1.5rem;--h2-font-size: 1.25rem;--h3-font-size: 1rem;--normal-font-size: .9375rem;--small-font-size: .8125rem;--smaller-font-size: .75rem;--heading-line-height: 1.3;--body-line-height: 1.6}@media screen and (min-width: 1024px){:root{--bigger-font-size: 2.25rem;--h1-font-size: 2rem;--h2-font-size: 1.5rem;--h3-font-size: 1.25rem;--normal-font-size: 1rem;--small-font-size: .875rem;--smaller-font-size: .8125rem}}.bigger-title{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:800;letter-spacing:0.015em;color:var(--title-color);font-size:var(--bigger-font-size)}.main-banner .bigger-title{color:var(--white-color)}h1,.t1{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:800;letter-spacing:0.015em;color:var(--title-color);font-size:var(--h1-font-size)}.main-banner h1,.main-banner .t1{color:var(--white-color)}h2,.t2{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:800;letter-spacing:0.015em;color:var(--title-color);font-size:var(--h2-font-size)}.main-banner h2,.main-banner .t2{color:var(--white-color)}h3,.t3{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--h3-font-size)}.main-banner h3,.main-banner .t3{color:var(--white-color)}h4,.t4{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--normal-font-size)}.main-banner h4,.main-banner .t4{color:var(--white-color)}h5,.t5{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--small-font-size)}.main-banner h5,.main-banner .t5{color:var(--white-color)}h6,.t6{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--smaller-font-size)}.main-banner h6,.main-banner .t6{color:var(--white-color)}.biggest{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--h1-font-size)}.bigger{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--h2-font-size)}.big{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--h3-font-size)}.normal{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--normal-font-size)}.small{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--small-font-size)}.smaller{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--smaller-font-size)}body{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--normal-font-size);color:var(--text-color)}.body-font{font-family:var(--body-font)}.heading-font{font-family:var(--heading-font)}blockquote{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--h3-font-size);font-style:italic;letter-spacing:.01em;margin-left:2rem;position:relative;opacity:.9}@media screen and (min-width: 1024px){blockquote{margin-left:4rem}}blockquote::before{content:'\\201C';font-family:Georgia, serif;font-size:3em;position:absolute;top:.5em;left:-.6em;line-height:0;letter-spacing:-0.5em}a{color:var(--second-color)}main a{text-decoration:none}main a:hover{text-decoration:underline}::-moz-selection{background:var(--second-color);color:#FFF}::selection{background:var(--second-color);color:#FFF}*,*::before,*::after{box-sizing:border-box}body{margin:0;background:var(--body-bg)}a{color:var(--blue-400)}strong{font-weight:700}body{margin:var(--header-height) 0 0 0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:calc(100vh - var(--header-height))}.foro-title{position:relative;padding-left:0.75rem}@media screen and (min-width: 1024px){.foro-title{padding-left:1rem}}.foro-title::before{content:'';position:absolute;left:0;height:100%;width:0.35rem;border-radius:0.25rem;background-color:#007BDF}@media screen and (min-width: 1024px){.foro-title::before{width:0.5rem}}.section-comments,.section-answer{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:2rem}.section-comments{-ms-grid-column:span 2;grid-column:span 2;margin-bottom:0}@media screen and (min-width: 640px){.section-comments{-ms-grid-column:2;grid-column:2}}.section-answer{padding:2rem 0 0 2rem}code[class*=\"language-\"],pre[class*=\"language-\"]{color:#F8F8F2;background:none;text-shadow:0 1px rgba(0,0,0,0.3);font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;border:none;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=\"language-\"]{padding:1em;overflow:auto;border-radius:0.3em}:not(pre)>code[class*=\"language-\"],pre[class*=\"language-\"]{background:#272822}:not(pre)>code[class*=\"language-\"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#F8F8F2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#F92672}.token.boolean,.token.number{color:#AE81FF}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#A6E22E}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#F8F8F2}.token.atrule,.token.attr-value,.token.function{color:#E6DB74}.token.keyword{color:#66D9EF}.token.regex,.token.important{color:#FD971F}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}pre.code-toolbar{position:relative}pre.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity 0.3s ease-in-out;opacity:0}pre.code-toolbar:hover>.toolbar{opacity:1}pre.code-toolbar>.toolbar .toolbar-item{display:inline-block}pre.code-toolbar>.toolbar a{cursor:pointer}pre.code-toolbar>.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}pre.code-toolbar>.toolbar a,pre.code-toolbar>.toolbar button,pre.code-toolbar>.toolbar span{color:#BBB;font-size:.8em;padding:0 .5em;background:#F5F2F0;background:rgba(224,224,224,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:.5em}pre.code-toolbar>.toolbar a:hover,pre.code-toolbar>.toolbar a:focus,pre.code-toolbar>.toolbar button:hover,pre.code-toolbar>.toolbar button:focus,pre.code-toolbar>.toolbar span:hover,pre.code-toolbar>.toolbar span:focus{color:inherit;text-decoration:none}.svg-icon{height:1em;width:1em;display:inline-block;fill:currentcolor}.svg-icon.before{margin-right:.3em}.svg-stroke{fill:none;stroke:currentColor}.button{display:inline-block;padding:0.5rem 1rem;background-color:var(--color);color:#FFF;font-weight:600;cursor:pointer;text-decoration:none;line-height:inherit;border-radius:0.25rem;transition:transform 0.05s;border:1px solid var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button:hover{background-color:var(--color-alt);text-decoration:inherit}.button:active{transform:scale(0.99)}.button--tiny{padding:.25rem .5rem;font-size:var(--small-font-size)}.button.full{margin-right:0;margin-left:0;width:100%}.button--secondary,.button--second{--color-button: var(--second-color);--color-button-alt: var(--second-color-alt)}.button--alert{--color-button: var(--third-color);--color-button-alt: var(--third-color-alt)}.button--cta{--color-button: var(--accent-color);--color-button-alt: var(--accent-color-alt)\n}.button--dark{--color-button: var(--dark-color);--color-button-alt: var(--dark-color-alt)}.button--light{--color-button: #FFF;--color-button-alt: var(--color-light);color:var(--color-text)}[class*=button--ghost]{color:var(--color-button);background:none;border:1px solid}[class*=button--ghost]:hover{background:var(--color-button);color:#FFF;border-color:transparent}.button--ghost-alert,.button--ghost--alert{--color-button: var(--third-color)}.button--ghost-secondary,.button--ghost--secondary,.button--ghost-second,.button--ghost--second,.buttton--ghost.second-color{--color-button: var(--second-color)}.button--ghost-cta,.button--ghost--cta,.button-ghost.accent-color{--color-button: var(--accent-color)}.button--ghost-dark,.button--ghost--dark,.button--ghost.dark-color{--color-button: var(--dark-color)}.button--ghost-light,.button--ghost--light{--color-button: #FFF}.button--ghost-light:hover,.button--ghost--light:hover{color:var(--text-color)}.button--cancel{color:var(--color-button);background:none;border:1px solid;--color-button: var(--text-color)}.button--cancel:hover{background:var(--color-button);color:#FFF;border-color:transparent}.button.light-color{color:var(--text-color)}.disabled,.disabled:hover{--color: var(--light-color);background:var(--color);cursor:default;color:#888}.disabled:active,.disabled:hover:active{transform:none}.ghost{color:var(--color);background:none}.ghost:hover{background:var(--color);color:#fff}.ghost.color-light,.ghost.light-color{--color: var(--body-bg);color:var(--color)}.ghost.color-light:hover,.ghost.light-color:hover{color:var(--color-text)}.button.big{font-size:var(--normal-font-size);padding:0.75rem 1.5rem}.button.tiny{font-size:var(--small-font-size);padding:.25rem .5rem}.button.micro{font-size:var(--small-font-size);padding:0 .25rem}.main-menu a:hover{text-decoration:none}@media screen and (min-width: 1024px){.main-menu .active{font-weight:400;color:var(--third-color)}.main-menu .active::before{display:none}}body{position:relative;right:0;transition:right .5s}@media screen and (max-width: 1023px){body.main-menu-visible{right:80%;overflow-y:hidden}}.main-menu-toggle{position:relative;z-index:300;width:30px;height:20px;box-shadow:0 4px var(--text-color) inset;cursor:pointer}.main-menu-toggle::after,.main-menu-toggle::before{content:\"\";position:absolute;width:100%;height:4px;background-color:var(--text-color);bottom:0}.main-menu-toggle::after{bottom:8px}.main-menu{font-size:var(--small-font-size)}@media screen and (max-width: 1023px){.main-menu{position:fixed;top:var(--header-height);background:var(--dark-color);width:80%;right:-80%;padding:1em 1em 2em;height:calc(100vh - 64px);transition:right .5s;overflow-y:auto}.main-menu.show{right:0}}.main-menu ul{list-style:none;margin-top:0;margin-bottom:0;padding-left:0;margin-left:0}@media screen and (min-width: 1024px){.main-menu ul{display:-ms-flexbox;display:flex}}.main-menu li{color:#FFF;border-bottom:1px solid rgba(255,255,255,0.2);padding:1em 0;margin:0}@media screen and (min-width: 1024px){.main-menu li{color:var(--text-color);padding:0;margin-left:2rem}}.main-menu a{color:inherit}@media screen and (max-width: 1023px){.vertical-menu{max-height:0;transition:max-height .5s;overflow:hidden}.vertical-menu.show{max-height:1000px;margin-bottom:1em}.vertical-menu .active::before{display:none}}.vertical-menu ul{list-style:none;margin-top:0;margin-bottom:0;padding-left:0;margin-left:0}.vertical-menu li{padding:.4em 0;border-bottom:none;font-size:var(--small-font-size);color:var(--text-color)}.vertical-menu a{color:inherit;display:block}.vertical-menu a.active{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;color:var(--third-color)}.vertical-menu a.active::after{content:'';display:block;width:1rem;height:1rem;background:url(https://ux.ed.team/img/icon-right.svg) center right/contain no-repeat}.vertical-menu a.active:hover{text-decoration:none}.vertical-menu .active{border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);margin-right:-1px;padding:.5em 0;border-right:1px solid var(--body-bg)}.vertical-menu .active::after{background:url(https://ux.ed.team/img/icon-right.svg) 100%/contain no-repeat !important;margin-right:1rem}.vertical-menu-toggle{--size: 3rem;width:var(--size);height:var(--size);background:var(--first-color);border-radius:50%;position:fixed;bottom:1rem;right:1rem;z-index:var(--z-fixed);transition:transform .3s;box-shadow:2px 2px 12px rgba(0,0,0,0.3)}.vertical-menu-toggle::before,.vertical-menu-toggle::after{content:\"\";width:calc(var(--size) * 0.6);height:calc(var(--size) * 0.1);background:#FFF;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:calc(var(--size) * 0.05)}.vertical-menu-toggle::after{transform:translate(-50%, -50%) rotate(90deg)}.vertical-menu-toggle.active{transform:rotate(-45deg)}.section-title{margin-top:0}.main-banner{position:relative !important}@media screen and (max-width: 1023px){.vertical-menu{position:fixed;top:4rem;background:var(--dark-color);width:calc(100vw - 2rem);border:none;padding:0 1rem;height:calc(100vh - 12rem);overflow-y:auto;border-radius:.25rem;box-shadow:0 5px 5px -2px rgba(0,0,0,0.3);z-index:var(--z-fixed)}.vertical-menu::before{content:'Documentación';display:block;font-size:var(--h2-font-size);margin-bottom:1rem}.vertical-menu li{padding:.75em 0;border-bottom:1px solid rgba(83,87,90,0.2)}.vertical-menu li:last-child{border-bottom:none}.vertical-menu a{color:var(--border-color);padding-left:.5rem}.vertical-menu .active{border:none;-ms-flex-pack:start !important;justify-content:flex-start !important}.vertical-menu .active::after{-ms-flex-order:-1;order:-1;width:.5rem}.vertical-menu.show{padding:.5rem 1rem}}.main-logo{height:2rem;width:auto;display:block}ul,ol{padding-left:2rem;margin-left:0}.data-list,.feature-list{list-style:none;margin-top:0;margin-bottom:0;padding-left:0;margin-left:0;margin-bottom:2em}.data-list li,.feature-list li{border-bottom:1px solid var(--border-color);padding-top:1rem;padding-bottom:1rem;margin:0}.data-list li{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.data-list li>:first-child{margin-bottom:.5rem;max-width:75%}@media screen and (min-width: 1024px){.data-list li>:first-child{margin-bottom:0}}@media screen and (max-width: 1023px){.data-list li [class*=\"button\"]{font-size:var(--small-font-size)}}.data-list li li div:last-child p{text-align:right}.data-list h1,.data-list h2,.data-list h3,.data-list h4,.data-list h5,.data-list h6,.data-list p,.data-list [class*=\"button\"]{margin:0}.feature-list{padding-left:0}.feature-list li{padding-left:1.5rem;list-style:none;position:relative}.feature-list li::before{content:'';width:1rem;height:1rem;display:block;position:absolute;top:1.25em;left:0;color:var(--first-color);background:url(https://ux.ed.team/img/icon-check.svg)}:not(pre) code{font-family:var(--body-font);font-weight:400;line-height:var(--body-line-height);font-size:var(--small-font-size);font-family:Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;background:var(--color-light);border:1px solid var(--color-border);color:var(--third-color);padding:0 .25em;margin:0 .1em;word-break:break-all}.center{text-align:center}.strong{font-weight:700}table{table-layout:fixed;border-collapse:collapse;font-size:var(--small-font-size);background:#FFF;min-width:100%}table th{background:#007BDF}table tr{border-bottom:1px solid rgba(0,123,223,0.3)}table tr:hover{background:rgba(0,123,223,0.1)}table.first-column td:first-child{background:rgba(0,123,223,0.75);color:#fff}table.center-content{text-align:center}table.center-content th{text-align:inherit}table th{font-family:'Open Sans', sans-serif;text-align:left;color:#FFF;font-weight:700;border-right:1px solid rgba(255,255,255,0.2)}table td{min-width:100px}table td:nth-child(even){background:rgba(238,238,243,0.2)}table td,table th{padding:1em 1.5em}.table-container{overflow-x:auto;border:1px solid var(--border-color);margin-bottom:2em;min-width:100%;position:relative;table-layout:fixed}.table--secondary th{background:#00CBFF}.table--secondary tr{border-bottom:1px solid rgba(0,203,255,0.3)}.table--secondary tr:hover{background:rgba(0,203,255,0.1)}.table--secondary.first-column td:first-child{background:rgba(0,203,255,0.75);color:#fff}.table--secondary.center-content{text-align:center}.table--secondary.center-content th{text-align:inherit}.table--tertiary th{background:#FF3C32}.table--tertiary tr{border-bottom:1px solid rgba(255,60,50,0.3)}.table--tertiary tr:hover{background:rgba(255,60,50,0.1)}.table--tertiary.first-column td:first-child{background:rgba(255,60,50,0.75);color:#fff}.table--tertiary.center-content{text-align:center}.table--tertiary.center-content th{text-align:inherit}.table--accent th{background:#FBA905}.table--accent tr{border-bottom:1px solid rgba(251,169,5,0.3)}.table--accent tr:hover{background:rgba(251,169,5,0.1)}.table--accent.first-column td:first-child{background:rgba(251,169,5,0.75);color:#fff}.table--accent.center-content{text-align:center}.table--accent.center-content th{text-align:inherit}.table--dark th{background:#282D31}.table--dark tr{border-bottom:1px solid rgba(40,45,49,0.3)}.table--dark tr:hover{background:rgba(40,45,49,0.1)}.table--dark.first-column td:first-child{background:rgba(40,45,49,0.75);color:#fff}.table--dark.center-content{text-align:center}.table--dark.center-content th{text-align:inherit}.form__item{margin-bottom:2rem}.form__item:last-child{margin-bottom:0}[type=\"text\"],[type=\"email\"],[type=\"password\"],[type=\"number\"],[type=\"date\"],[type=\"time\"],[type=\"datetime-local\"],[type=\"search\"],[type=\"tel\"],[type=\"url\"],select,textarea{display:block;border:1px solid var(--border-color);background:#fff;width:100%;line-height:1.6;font-family:\"Open Sans\",sans-serif;font-size:var(--small-font-size);color:var(--text-color);border-radius:.25rem;padding:.5rem 1rem}[type=\"text\"]:-ms-input-placeholder,[type=\"email\"]:-ms-input-placeholder,[type=\"password\"]:-ms-input-placeholder,[type=\"number\"]:-ms-input-placeholder,[type=\"date\"]:-ms-input-placeholder,[type=\"time\"]:-ms-input-placeholder,[type=\"datetime-local\"]:-ms-input-placeholder,[type=\"search\"]:-ms-input-placeholder,[type=\"tel\"]:-ms-input-placeholder,[type=\"url\"]:-ms-input-placeholder,select:-ms-input-placeholder,textarea:-ms-input-placeholder{color:rgba(83,87,90,0.75)}[type=\"text\"]::placeholder,[type=\"email\"]::placeholder,[type=\"password\"]::placeholder,[type=\"number\"]::placeholder,[type=\"date\"]::placeholder,[type=\"time\"]::placeholder,[type=\"datetime-local\"]::placeholder,[type=\"search\"]::placeholder,[type=\"tel\"]::placeholder,[type=\"url\"]::placeholder,select::placeholder,textarea::placeholder{color:rgba(83,87,90,0.75)}[type=\"text\"]:disabled,[type=\"email\"]:disabled,[type=\"password\"]:disabled,[type=\"number\"]:disabled,[type=\"date\"]:disabled,[type=\"time\"]:disabled,[type=\"datetime-local\"]:disabled,[type=\"search\"]:disabled,[type=\"tel\"]:disabled,[type=\"url\"]:disabled,select:disabled,textarea:disabled{background:var(--border-color);cursor:default}[type=\"search\"]{background:#fff url(https://ux.ed.team/img/icon-search.svg) center right 1rem/1rem no-repeat !important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff url(https://ux.ed.team/img/arrow.svg) center right 1rem/1rem no-repeat !important}textarea{min-height:6em;max-height:6em;min-width:100%;max-width:100%}label{position:relative;display:block;font-size:var(--small-font-size);margin-bottom:.2em}label+input:-ms-input-placeholder{display:none}label+input::placeholder{display:none}[type=\"submit\"]{margin:0 !important}.card__avatar{width:2rem}.card__teachers .card__teacher{position:relative}.card__teachers .card__teacher:hover span{transform:scaleY(1)}.card__teachers span{position:absolute;top:calc(100% + .5rem);left:0;background:#fff;white-space:nowrap;transform:scaleY(0);transform-origin:top;transition:transform .2s}.card__teachers span::before{content:\"\";display:block;position:absolute;border:1px solid var(--border-color);width:.5rem;height:.5rem;background:#fff;top:calc( -0.35rem + 1.5px);left:0.65rem;transform:rotate(45deg);border-color:var(--border-color) transparent transparent var(--border-color)}.post-header{position:relative;margin-bottom:2em}.post-header img{display:block}.post-header::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(40,45,49,0.8)}.post-header h1{position:absolute;top:50%;text-align:center;width:90%;left:5%;transform:translateY(-50%);color:#fff}.post .author{display:table;margin:-5em auto 2em;position:relative}.post .author img{border:4px solid #fff}.main-banner{--color: var(--first-color);--color-alt: var(--accent-color);--padding: 2rem;background:var(--color);color:#FFF;padding-top:var(--padding);padding-bottom:calc(var(--padding) * 1.25)}.main-banner.diagonal{-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 94%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 94%)}@media screen and (min-width: 1024px){.main-banner{--padding: 4rem}}.main-banner .button{--color-button: var(--color-alt)}.main-banner__img{opacity:.1}.main-banner__data{position:relative}.main-header{height:var(--header-height);border-bottom:1px solid var(--border-color);background:#FFF;position:fixed;top:0;width:100%;left:0;z-index:100}.main-header>.ed-grid{height:100%}.main-header--dark{background:var(--dark-color-alt);border-bottom:none}@media screen and (min-width: 1024px){.main-header--dark li{border-bottom:none}}.main-header--dark a{color:rgba(238,238,243,0.5)}.main-footer{background:var(--dark-color);color:#FFF;padding:2rem 0;font-size:var(--small-font-size);margin-top:auto}.topbar{background:var(--color);color:#fff;padding:.5rem 0}@media screen and (min-width: 1024px){.topbar{height:var(--header-height)}}.topbar .ed-grid{height:100%;-ms-flex-align:center;align-items:center}.topbar form{-ms-flex:auto;flex:auto}@media screen and (max-width: 1023px){.topbar form{display:none}}.topbar input{border:none}.ed-modal-container{position:fixed;width:100%;height:100%;left:0;top:0;background:rgba(252,252,254,0.9);display:-ms-flexbox;display:flex;z-index:1000}.ed-modal-container::before{content:\"\";width:3rem;height:3rem;background:url(https://ux.ed.team/img/icon-close.svg);position:absolute;top:2rem;right:2rem;cursor:pointer}.ed-modal-content{box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff;width:90%;max-width:1000px;max-height:90vh;margin:auto;padding:2rem;border-radius:.25rem;overflow-y:auto}.video{width:100%;position:relative;height:0;padding-bottom:56.25%;overflow:hidden}.video iframe{width:100%;position:absolute;top:0;left:0;height:100%}@media screen and (max-width: 1023px){.edui-tabs--class{margin-left:-1rem;margin-right:-1rem;border:none;margin-top:-2rem}}.edui-tabs .tabs{display:-ms-flexbox;display:flex;position:relative;left:1rem;top:1px}.edui-tabs .tab{border:1px solid var(--border-color);padding:1rem;border-radius:.25rem .25rem 0 0;margin-right:.5rem;background:#fff;cursor:pointer;opacity:.5}.edui-tabs .tab.active{border-bottom:1px solid #fff;opacity:1}.edui-tabs .tab img{width:2.25rem;display:block}.edui-tabs .tab .tab{border:none;padding:0;border-radius:0;margin:0;opacity:1}.edui-tabs .panel{box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff;display:none;border-radius:.25rem;padding:2rem}.edui-tabs .panel.active{display:block}.edui-tabs .tabs--class{left:0;border-radius:.25rem .25rem 0 0;overflow:hidden}.edui-tabs .tabs--class::before{content:\"\";display:block;width:25%;height:4px;background:var(--second-color);position:absolute;bottom:0;left:0;transition:transform .25s ease-in}.edui-tabs .tabs--class[data-tab=\"2\"]::before{transform:translateX(100%)}.edui-tabs .tabs--class[data-tab=\"3\"]::before{transform:translateX(200%)}.edui-tabs .tabs--class[data-tab=\"4\"]::before{transform:translateX(300%)}.edui-tabs .tab--class{width:25%;text-align:center;margin:0;border-radius:0;border:none;background:var(--dark-color);color:var(--border-color);opacity:1;height:3rem;padding:.6rem 0 0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;line-height:1.6;box-shadow:0 -4px rgba(255,255,255,0.5) inset}.edui-tabs .tab--class.active{color:var(--second-color);border:none;background:var(--dark-color-alt)}.edui-tabs .panels--class{height:calc(100vh - 10rem);overflow:auto;border:1px solid var(--border-color);background:#fff;border-radius:0 0 .25rem .25rem;box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff}.edui-tabs .panel--class{padding:2rem 1rem 1rem;background:none;border:none;box-shadow:none}.payment-method__name{padding-bottom:.5rem;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.payment-method__notes{margin-top:-1.5rem}.payment-method__account{color:var(--third-color)}.video-class{background:var(--dark-color)}@media screen and (min-aspect-ratio: 8 / 5){.video-class{height:calc(100vh - 3rem)}}.video-class--container{position:fixed;top:var(--header-height);width:100%;z-index:100}@media screen and (min-width: 960px){.video-class--container{position:static}}@media screen and (min-width: 1024px) and (min-aspect-ratio: 8 / 5){.video-class--container{height:calc(100vh - 9rem);padding:1rem}}.video-class--element{margin:auto}.video-class--element iframe{width:100%;height:100%}.video-class--footer{background:var(--dark-color-alt);color:#fff;padding:1rem 0}@media screen and (min-aspect-ratio: 8 / 5){.video-class--footer{height:6rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0}}.video-class--title{line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--h3-font-size)}.main-banner .video-class--title{color:var(--white-color)}.video-class--course{color:var(--accent-color);font-size:var(--small-font-size);margin:-.5rem 0 0 0;opacity:.75}.video-class--next,.video-class--prev{width:2rem;margin-left:1rem;cursor:pointer}.video-live{background:var(--dark-color)}@media screen and (min-width: 1024px){.video-live__container{display:-ms-grid;display:grid;padding:1rem;grid-gap:1rem;-ms-grid-columns:1fr minmax(320px, 360px);grid-template-columns:1fr minmax(320px, 360px)}}.video-live__video.video-fixed{position:fixed;z-index:var(--z-fixed);top:var(--header-height);left:0}.video-live__data{color:var(--border-color);padding:1rem 0}.video-live__data [class*=\"button\"]{margin-right:0}@media screen and (min-width: 1024px){.video-live__data{-ms-grid-column-span:2;-ms-grid-column:1;grid-column:1 / span 2;-ms-grid-row:2;grid-row:2}.video-live__data [class*=\"button\"]{margin-right:6rem}}.video-live__title-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:1rem}.video-live__title-container [class*=\"button\"]{margin-right:1rem}.video-live__title{margin:0;line-height:var(--heading-line-height);font-family:var(--heading-font);font-weight:700;letter-spacing:0.015em;color:var(--title-color);font-size:var(--h3-font-size)}.main-banner .video-live__title{color:var(--white-color)}.video-live__footer{background:var(--dark-color-alt)}.class-temary{padding-top:2rem;counter-reset:subjects}.class-subject__title{counter-increment:subjects;margin-bottom:0}.class-subject__title::before{content:counter(subjects) \".\";display:inline-block;margin-right:.25rem}.class-fragment__title{position:relative}.class-fragment__title a{color:var(--text-color);position:relative;left:1.5em}.class-fragment__title img{width:1em;height:1em;position:absolute;top:.25em}.class-fragment [class*=\"button\"]{margin-left:1em;font-size:12px}.class-fragment [class*=\"button\"]:hover{text-decoration:none}.chat{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;color:var(--border-color)}@media screen and (max-width: 1023px){.chat{padding:0 1rem;max-height:500px}}.chat__send{position:relative;margin-bottom:1rem}.chat__send-message{width:100%;display:block;padding:.75em 2.5em .75em .75em;line-height:1.6;border-radius:.25rem;border:1px solid var(--border-color)}.chat__send-submit{width:1.5em;position:absolute;right:.75em;top:50%;transform:translateY(-50%)}.chat__info{color:var(--text-color);margin-top:-.5rem;opacity:.5;font-style:italic;margin-bottom:1rem}.chat__messages{padding-top:1rem}.chat__message{display:-ms-flexbox;display:flex;border-bottom:1px solid var(--border-color);padding-bottom:.75rem;margin-bottom:1rem;color:var(--text-color)}.chat__message-avatar{width:2rem;height:2rem;margin-right:1rem}.chat__message-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:.25rem}.chat__message-user,.chat__message-date{vertical-align:super;margin-right:.5rem;opacity:.8}.chat__message-user{font-weight:bold}.chat__message-comment{margin:-.4em 0 0}@media screen and (min-width: 1024px){.video-live__chat .chat{-ms-grid-column:2;grid-column:2;-ms-grid-row:1;grid-row:1}}.video-live__chat .chat__send-message{background:var(--dark-color-alt);color:var(--border-color);border:1px solid rgba(251,169,5,0.3)}.video-live__chat .chat__messages{background:var(--dark-color-alt);padding:1rem;border-radius:.25rem;overflow-y:auto}.video-live__chat .chat__message{border-bottom:1px solid rgba(255,60,50,0.3);color:inherit}.video-live__chat .chat-user,.video-live__chat .chat-date{opacity:.5}.add-note textarea{margin-bottom:.5rem}.add-note__info{opacity:.5;font-style:italic;margin-bottom:.5rem}.notes{padding-top:2rem}.note{border:1px solid var(--border-color);font-size:var(--small-font-size);border-radius:.25rem}.note--edit{background:rgba(251,169,5,0.075)}.note--delete{position:relative}.note--delete__alert{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.95);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:1px solid rgba(251,169,5,0.5)}.note__header{background:var(--text-color);color:var(--border-color);padding:.5rem 1rem;border-radius:.25rem .25rem 0 0;font-size:12px}.note__header p{margin:0}.note__content{padding:1rem 1rem .5rem}.note__content p,.note__content blockquote,.note__content pre{margin-bottom:1rem}.note__footer{padding:0 1rem 1rem}.note__footer img{width:1rem;height:1rem;margin-right:1rem}.resources li{padding-left:.5em}.resources li::before{background:none}.resources img{width:1em;height:1em;margin-right:.5em}.resources a{color:var(--text-color)}.course-header{position:relative;margin-bottom:2rem;width:100%;overflow:hidden}.course-header::before{content:\"\";position:absolute;top:-10%;left:-10vw;width:120vw;height:120%;filter:blur(10px);background:linear-gradient(rgba(40,45,49,0.9), rgba(40,45,49,0.9)),url(https://ed.team/sites/default/files/styles/large/public/courses/images/css-animaciones-poster-1280.jpg) no-repeat center/cover}.course-data{color:#fff;position:relative;padding:2rem 0}@media screen and (min-width: 1440px){.course-data{padding:4rem 0}}.course-data__subtitle{margin-top:-1rem}.course-data__description,.course-data__stars-info,.course-data__live-or-record span{opacity:0.8}.course-data__more-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 400px){.course-data__more-info{-ms-flex-direction:row;flex-direction:row}}.course-data__calification{display:-ms-flexbox;display:flex;margin-right:2rem}.course-data__stars{margin-right:1rem}.course-data__live-or-record span{margin-left:0.25em}.course-info{border-radius:0.25rem;position:relative;margin-bottom:2rem;padding:1rem;border:1px solid var(--border-color);box-shadow:0 2px 6px rgba(0,0,0,0.1)}@media screen and (max-width: 639px){.course-info__item:nth-child(2){margin:1rem 0}}.course-info__title{border-bottom:1px solid var(--border-color);font-family:\"Raleway\",sans-serif}.course-info__list{padding:0;margin-left:0.5rem;margin-bottom:0;list-style:none}.course-info__list-item{position:relative;margin-bottom:0.5rem;padding-left:1.5rem}.course-info__list-item::before{content:\"\";display:block;position:absolute;left:0;top:0.20rem;width:1rem;height:1rem;background:url(\"https://ed.team/themes/custom/escueladigital/img/active-check.svg\") no-repeat 50%/contain}@media screen and (max-width: 1023px){.course-main .span-l-1{-ms-flex-order:1;order:1}.course-main .span-l-3{-ms-flex-order:2;order:2}.card--sidebar{margin-bottom:2rem}}.course-main{margin-bottom:2rem}@media screen and (min-width: 1024px){.course-main{margin-bottom:4rem}}.temary-accordion{margin-bottom:2rem;padding:1rem;background-color:#fff;border:1px solid var(--border-color);border-radius:0.25rem}@media screen and (min-width: 1024px){.temary-accordion:last-of-type{margin-bottom:0}}.temary-accordion__main-title{font-family:\"Raleway\",sans-serif;outline:none}.temary-accordion__list{padding:1rem 1rem 0;margin-bottom:0}.temary-accordion__item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;color:var(--text-color)}.temary-accordion__title{position:relative;margin-bottom:0.25rem;padding-left:1.5rem;color:inherit}.temary-accordion__title::before{content:\"\";display:block;position:absolute;left:0;top:0.2rem;width:12px;height:12px;opacity:0.5;background:url(\"https://ed.team/themes/custom/escueladigital/img/padlock.svg\") no-repeat 50%/contain}.temary-accordion__title.free-class{color:var(--accent-color)}.temary-accordion__title.free-class::before{opacity:1;background:url(\"https://ed.team/themes/custom/escueladigital/img/active-check.svg\") no-repeat 50%/contain}.method-payment__container{box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff;padding:0 2rem}.method-payment__row{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);grid-column-gap:1rem;padding:2rem 0}.method-payment__row:not(:last-child){border-bottom:1px solid #EEEEF3}@media screen and (max-width: 639px){.method-payment__row{-ms-grid-columns:1fr;grid-template-columns:1fr}}.method-payment__column{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media screen and (max-width: 639px){.method-payment__column{-ms-flex-pack:center;justify-content:center}.method-payment__column:not(:last-child){margin-bottom:1rem}}.method-payment__image{height:2rem}.method-payment__span{color:#FF3C32}.method-payment p{margin-bottom:0}.playlist{box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff;border-radius:0.25rem}.playlist__header{position:relative}.playlist__header-meatballs{position:absolute;top:1rem;right:1rem;width:25px;height:5px;cursor:pointer;z-index:10}.playlist__header-meatballs::before{content:'';display:block;height:5px;width:5px;background:#fff;border-radius:50%;box-shadow:10px 0 #fff,20px 0 #fff}.playlist__header-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;position:absolute;padding:1rem;width:100%;height:100%;background-image:linear-gradient(to top, rgba(40,45,49,0.9), transparent 80%);color:#fff;z-index:1}.playlist__header-fragment{margin-bottom:0.5rem;font-size:var(--h3-font-size)}.playlist__header-cover{display:block}.playlist__content{position:relative;padding:1.5rem 1rem 0}.playlist__button-add{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:absolute;top:-20px;right:1rem;width:40px;height:40px;background-color:#FBA905;border-radius:50%;color:#fff;font-size:2rem;z-index:10}.playlist__button-add:hover{text-decoration:none;background-color:#F1A000}.playlist__button-add::before{content:'+'}.playlist__search{margin-bottom:1rem}.playlist__list{height:300px;overflow-y:auto}@media screen and (min-width: 1024px){.playlist__list{margin-right:-1rem;padding-right:1rem}}.playlist__item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:0.5rem 0;border-bottom:1px solid #EEEEF3;color:#53575A;font-size:var(--small-font-size)}.playlist__item:hover{color:#FF3C32;text-decoration:none}.playlist__item-data{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline}.playlist__item-index{margin-right:0.5rem;color:#FBA905;font-family:\"Open Sans\",sans-serif}.playlist__item-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.playlist__item-fragment{font-family:\"Raleway\",sans-serif;font-weight:bold}.playlist__item-action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.playlist__item-button-delete{margin-left:0.5rem;width:1rem;height:1rem}.pricing-table{border:1px solid var(--border-color);border-radius:.25rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pricing-table__header{background:var(--color);color:#FFF;padding:1rem;border-radius:.25rem .25rem 0 0;margin:-1px -1px -1px 0}.pricing-table__title{padding-left:1.5rem;background:url(https://ux.ed.team/img/plans/plan-2.svg) no-repeat center left}.pricing-table__price{padding:1rem}.pricing-table__description{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:1rem;margin-bottom:1.5rem}.pricing-table__features{margin-bottom:0;list-style:none;padding:0 1rem}.pricing-table__feature{margin-bottom:.75rem;display:-ms-grid;display:grid;-ms-grid-columns:1rem auto;grid-template-columns:1rem auto;grid-gap:.5rem;-ms-flex-align:baseline;align-items:baseline}.pricing-table__feature svg{height:.8em}.pricing-table__footer{padding:1rem;margin-top:auto}.pricing-table [class*=button]{--color: var(--current-color);margin:0}.pricing-table.color-second .pricing-table__title{background-image:url(https://ux.ed.team/img/plans/plan-1.svg)}.pricing-table.color-accent .pricing-table__title{background-image:url(https://ux.ed.team/img/plans/plan-3.svg)}.pricing-table.color-dark .pricing-table__title{background-image:url(https://ux.ed.team/img/plans/plan-4.svg)}.alt-banner{--image: url('https://drupal.ed.team/sites/default/files/2018-10/joan-serna.jpg');--radius: 1200px;--size: 100%;padding-top:2rem;padding-bottom:2rem;background:linear-gradient(rgba(40,45,49,0.9), rgba(40,45,49,0.9)),var(--image) no-repeat center center/cover}@media screen and (max-width: 1023px){.alt-banner{-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 95%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 95%)}}@media screen and (min-width: 1024px){.alt-banner{background:radial-gradient(circle var(--radius) at 100% 100%, transparent 50%, #F6F6F6 50%),var(--image) no-repeat center right/auto var(--size);padding-bottom:6rem;padding-top:6rem;border-bottom:1px solid var(--border-color)}}@media screen and (min-width: 1200px){.alt-banner{--radius: 1300px}}@media screen and (min-width: 1440px){.alt-banner{--radius: 1600px;--size: 120%}}.alt-banner .ed-grid{position:relative}@media screen and (max-width: 1023px){.alt-banner h2{color:var(--color-second)}}.alt-banner__data{position:relative;color:#FFF;text-align:center;font-size:var(--small-font-size)}@media screen and (min-width: 1024px){.alt-banner__data{padding:1rem 1rem 1rem 2rem;text-align:left;color:var(--text-color)}.alt-banner__data::before{position:absolute;border-radius:4px;content:\"\";width:8px;height:100%;top:0;left:0;background:var(--color)}}.alt-banner__caption{position:absolute;bottom:-5rem;right:0;z-index:var(--z-tooltip);background:rgba(20,22,24,0.9);color:#FFF;padding:.5rem;font-size:var(--smaller-font-size)}@media screen and (max-width: 1023px){.alt-banner__caption{display:none}}.alt-banner__caption span{color:var(--color-second)}.landing-section{--current-color: var(--color-first);--color: var(--current-color);--color-button: var(--current-color);margin-bottom:2rem}@media screen and (min-width: 1024px){.landing-section{margin-bottom:8rem}}.landing-section article{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.landing-section article{padding-right:2rem}.landing-section article::before{content:\"\";display:block;position:absolute;width:.5rem;border-radius:.25rem;height:100%;right:0;background:var(--color)}}.landing-section img{border-radius:.25rem;margin-bottom:1rem}@media screen and (min-width: 1024px){.landing-section img{margin-bottom:0;-webkit-clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%);clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%)}}.landing-section h2{color:var(--color)}.landing-section [class*=button]{margin-bottom:0}@media screen and (min-width: 1024px){.landing-section:first-of-type{padding-top:4rem}}.landing-section:nth-of-type(even){--current-color: var(--color-third);--color: var(--current-color);--color-button: var(--current-color)}@media screen and (min-width: 1024px){.landing-section:nth-of-type(even) img{-webkit-clip-path:polygon(0 0, 90% 0, 100% 100%, 10% 100%);clip-path:polygon(0 0, 90% 0, 100% 100%, 10% 100%)}.landing-section:nth-of-type(even) article{-ms-flex-order:-1;order:-1;padding-right:0;padding-left:2rem}.landing-section:nth-of-type(even) article::before{left:0}}summary{cursor:pointer;outline:none;font-weight:bold}summary+*{margin-top:1rem}details{margin-bottom:.5rem;background:#FFF;padding:.5rem 1rem;border:1px solid #DFE0E0;border-radius:.25rem}@media screen and (min-width: 1024px){details{margin-bottom:1rem;padding:1rem}}.vote{margin-bottom:0.25rem;color:#53575A}.vote:hover{text-decoration:none}.vote:hover svg{transform:scale(1.15)}.vote--positive svg{stroke:#007BDF}.vote--positive.active svg{fill:#007BDF}.vote--negative svg{stroke:#FF3C32}.vote--negative.active svg{fill:#FF3C32}.answer{color:#53575A}.foro-sidebar{background-color:#fff}.foro-sidebar:not(:last-of-type){margin-bottom:2rem}.foro-sidebar--category .foro-sidebar__link{display:-ms-grid;display:grid;-ms-grid-columns:max-content 1fr;grid-template-columns:max-content 1fr;color:#53575A}.foro-sidebar--category .foro-sidebar__link img{width:1rem;height:1rem;-o-object-fit:contain;object-fit:contain}.foro-sidebar__list{list-style:none}.top-user{--user-size: 2.5rem;-ms-grid-columns:(var(--user-size))[10];grid-template-columns:repeat(10, var(--user-size));-ms-grid-rows:var(--user-size);grid-template-rows:var(--user-size);padding:0.25rem;overflow-x:auto}@media screen and (min-width: 640px){.top-user{--user-size: 3rem}}.top-user__item{position:relative;width:100%;height:100%;box-shadow:0 0 0 2px #FCFCFE,0 0 0 4px #007BDF}.top-user__item:hover .top-user__score{transform:scale(1)}.top-user__score{border-radius:1.5rem;position:absolute;height:100%;width:100%;background-color:rgba(0,123,223,0.5);color:#fff;font-weight:bold;line-height:initial;transform:scale(0);transition:0.25s;z-index:1}.user-foro{display:-ms-flexbox;display:flex;margin-bottom:0.5rem}.user-foro__image{border-radius:0.25rem;-ms-flex:none;flex:none;height:2rem;width:2rem;-o-object-fit:cover;object-fit:cover;margin-right:0.75rem}.user-foro__info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;line-height:initial}.user-foro__name{color:#53575A;font-weight:bold}.user-foro__date{color:#BABDBF}.featured-publication{overflow-x:scroll}.featured-publication__container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12, 1fr);grid-gap:1rem;width:1200%}@media screen and (min-width: 640px){.featured-publication__container{width:600%}}@media screen and (min-width: 1024px){.featured-publication__container{width:300%}}.featured-publication__item{background-color:#fff}.featured-publication__content{display:-ms-flexbox;display:flex}.featured-publication__user-photo{border-radius:0.25rem;-ms-flex:none;flex:none;height:2rem;width:2rem;-o-object-fit:cover;object-fit:cover}.featured-publication__title{color:#53575A}.featured-publication__footer{display:-ms-flexbox;display:flex}.featured-publication__footer .vote{margin:0 1rem 0 0}.foro-sidebar__list .featured-publication__item{padding:0 0 1rem 0;border:none;border-radius:0;font-family:\"Open Sans\",sans-serif;font-weight:normal}.scroll--dark{--thumb-color: #3f474d;--track-color: #566169;--thumb-color-hover: #333a3f}.scroll--dark-alt{--thumb-color: #2b3034;--track-color: #424950;--thumb-color-hover: #202326}.scroll.no-background{--track-color: transparent}.scroll.hidden{--display: none}.scroll.hover{--display: none}.scroll.hover:hover{--display: block}.scroll.mobile{--display: none}@media screen and (min-width: 1024px){.scroll.mobile{--display: block}}@media screen and (min-width: 1024px){[class*=scroll],.scroll,body{--thumb-color: #dfdfe8;--thumb-color-hover: #c1c1d3;--track-color: #fdfdfe;--scroll-size: 10px;--scroll-radius: calc(var(--scroll-size) / 2);--display: block}[class*=scroll]::-webkit-scrollbar,.scroll::-webkit-scrollbar,body::-webkit-scrollbar{display:var(--display);width:var(--scroll-size);height:var(--scroll-size)}[class*=scroll]::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:var(--scroll-radius)}[class*=scroll]::-webkit-scrollbar-thumb:hover,[class*=scroll]::-webkit-scrollbar-thumb:active,.scroll::-webkit-scrollbar-thumb:hover,.scroll::-webkit-scrollbar-thumb:active,body::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:active{background:var(--thumb-color-hover)}[class*=scroll]::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:var(--track-color);border-radius:var(--scroll-radius)}}.meatballs-menu{display:inline-block;position:relative}.meatballs-menu__button{--button-color: #53575A;height:1rem;width:1rem;border:none;outline:none;background:none;cursor:pointer}.meatballs-menu--white .meatballs-menu__button{--button-color: #EEEEF3}.meatballs-menu__button::before{border-radius:1.5rem;content:'';display:block;width:.25rem;height:.25rem;background:var(--button-color);box-shadow:0 .375rem var(--button-color),0 -.375rem var(--button-color)}.meatballs-menu--horizontal .meatballs-menu__button::before{box-shadow:.375rem 0 var(--button-color),-.375rem 0 var(--button-color)}.meatballs-menu__nav{box-shadow:0 2px 16px -2px rgba(0,0,0,0.15);border:none;background:#fff;border-radius:0.25rem;display:none;position:absolute;top:0;padding:0.75rem;z-index:var(--z-fixed);white-space:nowrap;right:35%}.meatballs-menu__nav.active{display:block}.meatballs-menu--right .meatballs-menu__nav{left:35%;right:auto}.meatballs-menu__list{list-style:none;margin-top:0;margin-bottom:0;padding-left:0;margin-left:0;display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:0.5rem;font-size:var(--smaller-font-size)}.meatballs-menu__link{margin:0;padding:0;background:none;border:none;outline:none;color:#53575A;cursor:pointer}.meatballs-menu__link:hover{text-decoration:none}.meatballs-menu--foro .meatballs-menu__link{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.meatballs-menu--foro .meatballs-menu__link .svg-stroke{fill:currentColor;margin-right:0.25rem}.meatballs-menu--foro .meatballs-menu__link--delete{color:#FF3C32}.pagination__menu{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;list-style:none}.pagination__item:not(:last-of-type){margin-right:0.5rem}.pagination__link{display:block;line-height:1;color:#53575A}.pagination__link:hover{color:#fff;background-color:#007BDF;border:1px solid #007BDF;text-decoration:none}.pagination__link.current,.pagination__link--right,.pagination__link--left{color:#fff;border:1px solid #007BDF;background-color:#007BDF}.pagination__link.current:hover,.pagination__link--right:hover,.pagination__link--left:hover{border:1px solid #006DC6;background-color:#006DC6}.pagination__link--right::before{content:'▶'}.pagination__link--left::before{content:'◀'}.form-editor{background-color:#fff}.form-editor__textarea{height:200px;max-height:200px;outline:none}@media screen and (min-width: 640px){.form-editor__toolbar{-ms-grid-columns:1fr max-content;grid-template-columns:1fr max-content}}.form-editor__action{display:-ms-grid;display:grid;-ms-grid-columns:(max-content)[3];grid-template-columns:repeat(3, max-content);grid-gap:1rem}.form-editor__button{border:none;outline:none;color:#53575A;background:none;cursor:pointer}.form-editor__button:hover{color:#FBA905;transform:scale(1.2)}.form-editor__icon{fill:currentColor;height:1rem;width:1rem}.form-editor__button-post{margin-bottom:0}.section-answer .form-editor:focus-within .form-editor__toolbar{display:-ms-grid;display:grid}.section-answer .form-editor:focus-within .form-editor__textarea{height:100px;max-height:100px}.section-answer .form-editor__textarea{min-height:1.35rem;height:1.35rem}.section-answer .form-editor__toolbar{display:none}.blue-100{--color: #e7f4fd;--color-alt: #b7defa}:root{--blue-100: #e7f4fd}.blue-200{--color: #b7defa;--color-alt: #88c8f7}:root{--blue-200: #b7defa}.blue-300{--color: #88c8f7;--color-alt: #58b3f3}:root{--blue-300: #88c8f7}.blue-400{--color: #58b3f3;--color-alt: #1192ee}:root{--blue-400: #58b3f3}.blue-500{--color: #1192ee;--color-alt: #1083d5}:root{--blue-500: #1192ee}.blue-600{--color: #1083d5;--color-alt: #0c66a6}:root{--blue-600: #1083d5}.blue-700{--color: #0c66a6;--color-alt: #094977}:root{--blue-700: #0c66a6}.blue-800{--color: #094977;--color-alt: #052c48}:root{--blue-800: #094977}.blue-900{--color: #052c48;--color-alt: #052c48}:root{--blue-900: #052c48}.primary-100{--color: #e7f4fd;--color-alt: #b7defa}:root{--primary-100: #e7f4fd}.primary-200{--color: #b7defa;--color-alt: #88c8f7}:root{--primary-200: #b7defa}.primary-300{--color: #88c8f7;--color-alt: #58b3f3}:root{--primary-300: #88c8f7}.primary-400{--color: #58b3f3;--color-alt: #1192ee}:root{--primary-400: #58b3f3}.primary-500{--color: #1192ee;--color-alt: #1083d5}:root{--primary-500: #1192ee}.primary-600{--color: #1083d5;--color-alt: #0c66a6}:root{--primary-600: #1083d5}.primary-700{--color: #0c66a6;--color-alt: #094977}:root{--primary-700: #0c66a6}.primary-800{--color: #094977;--color-alt: #052c48}:root{--primary-800: #094977}.primary-900{--color: #052c48;--color-alt: #052c48}:root{--primary-900: #052c48}.green-100{--color: #eafbf2;--color-alt: #c0f2d9}:root{--green-100: #eafbf2}.green-200{--color: #c0f2d9;--color-alt: #96e9bf}:root{--green-200: #c0f2d9}.green-300{--color: #96e9bf;--color-alt: #6ce0a6}:root{--green-300: #96e9bf}.green-400{--color: #6ce0a6;--color-alt: #2dd280}:root{--green-400: #6ce0a6}.green-500{--color: #2dd280;--color-alt: #28bd73}:root{--green-500: #2dd280}.green-600{--color: #28bd73;--color-alt: #1f9359}:root{--green-600: #28bd73}.green-700{--color: #1f9359;--color-alt: #166a40}:root{--green-700: #1f9359}.green-800{--color: #166a40;--color-alt: #0d3f26}:root{--green-800: #166a40}.green-900{--color: #0d3f26;--color-alt: #0d3f26}:root{--green-900: #0d3f26}.accent-100{--color: #fff8eb;--color-alt: #ffeac7}:root{--accent-100: #fff8eb}.accent-200{--color: #ffeac7;--color-alt: #ffdb9e}:root{--accent-200: #ffeac7}.accent-300{--color: #ffdb9e;--color-alt: #ffce7a}:root{--accent-300: #ffdb9e}.accent-400{--color: #ffce7a;--color-alt: #ffba42}:root{--accent-400: #ffce7a}.accent-500{--color: #ffba42;--color-alt: #e5a638}:root{--accent-500: #ffba42}.accent-600{--color: #e5a638;--color-alt: #b4822d}:root{--accent-600: #e5a638}.accent-700{--color: #b4822d;--color-alt: #7e5c20}:root{--accent-700: #b4822d}.accent-800{--color: #7e5c20;--color-alt: #4e3813}:root{--accent-800: #7e5c20}.accent-900{--color: #4e3813;--color-alt: #4e3813}:root{--accent-900: #4e3813}.yellow-100{--color: #fff8eb;--color-alt: #ffeac7}:root{--yellow-100: #fff8eb}.yellow-200{--color: #ffeac7;--color-alt: #ffdb9e}:root{--yellow-200: #ffeac7}.yellow-300{--color: #ffdb9e;--color-alt: #ffce7a}:root{--yellow-300: #ffdb9e}.yellow-400{--color: #ffce7a;--color-alt: #ffba42}:root{--yellow-400: #ffce7a}.yellow-500{--color: #ffba42;--color-alt: #e5a638}:root{--yellow-500: #ffba42}.yellow-600{--color: #e5a638;--color-alt: #b4822d}:root{--yellow-600: #e5a638}.yellow-700{--color: #b4822d;--color-alt: #7e5c20}:root{--yellow-700: #b4822d}.yellow-800{--color: #7e5c20;--color-alt: #4e3813}:root{--yellow-800: #7e5c20}.yellow-900{--color: #4e3813;--color-alt: #4e3813}:root{--yellow-900: #4e3813}.red-100{--color: #fdeded;--color-alt: #f9cdcd}:root{--red-100: #fdeded}.red-200{--color: #f9cdcd;--color-alt: #f5adad}:root{--red-200: #f9cdcd}.red-300{--color: #f5adad;--color-alt: #f18888}:root{--red-300: #f5adad}.red-400{--color: #f18888;--color-alt: #eb5656}:root{--red-400: #f18888}.red-500{--color: #eb5656;--color-alt: #d44e4e}:root{--red-500: #eb5656}.red-600{--color: #d44e4e;--color-alt: #a43d3d}:root{--red-600: #d44e4e}.red-700{--color: #a43d3d;--color-alt: #772c2c}:root{--red-700: #a43d3d}.red-800{--color: #772c2c;--color-alt: #471a1a}:root{--red-800: #772c2c}.red-900{--color: #471a1a;--color-alt: #471a1a}:root{--red-900: #471a1a}.grey-100{--color: #fbfbfe;--color-alt: #fcfcfc}:root{--grey-100: #fbfbfe}.grey-200{--color: #fcfcfc;--color-alt: #eff3f5}:root{--grey-200: #fcfcfc}.grey-300{--color: #eff3f5;--color-alt: #c8cdd0}:root{--grey-300: #eff3f5}.grey-400{--color: #c8cdd0;--color-alt: #a0a7ac}:root{--grey-400: #c8cdd0}.grey-500{--color: #a0a7ac;--color-alt: #697477}:root{--grey-500: #a0a7ac}.grey-600{--color: #697477;--color-alt: #2a3b47}:root{--grey-600: #697477}.grey-700{--color: #2a3b47;--color-alt: #22303a}:root{--grey-700: #2a3b47}.grey-800{--color: #22303a;--color-alt: #1a252d}:root{--grey-800: #22303a}.grey-900{--color: #1a252d;--color-alt: #1a252d}:root{--grey-900: #1a252d}:root{--light-color: var(--grey-300);--border-color: var(--grey-300);--title-color: var(--grey-700);--text-color: var(--grey-600);--text-color-light: var(--grey-500);--text-color-lighter: var(--grey-400);--color-light: var(--light-color);--color-border: var(--border-color);--color-title: var(--title-color);--color-text: var(--text-color);--color-text-light: var(--color-text-light);--color-text-lighter: var(--text-color-lighter);--body-bg: var(--grey-100);--color: var(--blue-500);--color-alt: var(--blue-600);--white-color: #fff}.white-color,.color-white{--color: var(--white-color)}.text-color,.color-text{--color: var(--text-color);--color-alt: var(--dark-color)}.text-color-light,.color-text-light{--color: var(--text-color-light);--color-alt: var(--text-color)}.text-color-lighter,.color-text-lighter{--color: var(--text-color-lighter);--color-alt: var(--text-color-light)}.light-color,.color-light{--color: var(--light-color);--color-alt: var(--border-color)}.border-color{--color: var(--border-color)}.body-bg{--color: var(--body-bg)}.color{color:var(--color)}.background{background-color:var(--color)}.fill{fill:var(--color)}.border{--border-color: var(--color)}.hover-bg:hover{background-color:var(--color-alt)}.hover-text:hover{color:var(--color-alt)}.first-color-lighter{--color: #83c6f6;--color-alt: #47b5f5}:root{--first-color-lighter: #83c6f6}.first-color-light{--color: #47b5f5;--color-alt: #1192ee}:root{--first-color-light: #47b5f5}.first-color-normal{--color: #1192ee;--color-alt: #0e7ecd}:root{--first-color-normal: #1192ee}.first-color-dark{--color: #0e7ecd;--color-alt: #0d6fb5}:root{--first-color-dark: #0e7ecd}.first-color-darker{--color: #0d6fb5;--color-alt: #0d6fb5}:root{--first-color-darker: #0d6fb5}.first-color{--color: #1192ee;--color-alt: #0e7ecd}:root{--first-color: #1192ee}.first-color-alt{--color: #0e7ecd;--color-alt: #0d6fb5}:root{--first-color-alt: #0e7ecd}.second-color-lighter{--color: #aae1f8;--color-alt: #8edafa}:root{--second-color-lighter: #aae1f8}.second-color-light{--color: #8edafa;--color-alt: #66d1ff}:root{--second-color-light: #8edafa}.second-color-normal{--color: #66d1ff;--color-alt: #4dbfef}:root{--second-color-normal: #66d1ff}.second-color-dark{--color: #4dbfef;--color-alt: #1c9dd4}:root{--second-color-dark: #4dbfef}.second-color-darker{--color: #1c9dd4;--color-alt: #1c9dd4}:root{--second-color-darker: #1c9dd4}.second-color{--color: #66d1ff;--color-alt: #4dbfef}:root{--second-color: #66d1ff}.second-color-alt{--color: #4dbfef;--color-alt: #1c9dd4}:root{--second-color-alt: #4dbfef}.third-color-lighter{--color: #f39696;--color-alt: #ef7676}:root{--third-color-lighter: #f39696}.third-color-light{--color: #ef7676;--color-alt: #eb5656}:root{--third-color-light: #ef7676}.third-color-normal{--color: #eb5656;--color-alt: #d84646}:root{--third-color-normal: #eb5656}.third-color-dark{--color: #d84646;--color-alt: #c03939}:root{--third-color-dark: #d84646}.third-color-darker{--color: #c03939;--color-alt: #c03939}:root{--third-color-darker: #c03939}.third-color{--color: #eb5656;--color-alt: #d84646}:root{--third-color: #eb5656}.third-color-alt{--color: #d84646;--color-alt: #c03939}:root{--third-color-alt: #d84646}.fourth-color-lighter{--color: #82f7bd;--color-alt: #51e199}:root{--fourth-color-lighter: #82f7bd}.fourth-color-light{--color: #51e199;--color-alt: #2bd480}:root{--fourth-color-light: #51e199}.fourth-color-normal{--color: #2bd480;--color-alt: #2ebd75}:root{--fourth-color-normal: #2bd480}.fourth-color-dark{--color: #2ebd75;--color-alt: #31a069}:root{--fourth-color-dark: #2ebd75}.fourth-color-darker{--color: #31a069;--color-alt: #31a069}:root{--fourth-color-darker: #31a069}.fourth-color{--color: #2bd480;--color-alt: #2ebd75}:root{--fourth-color: #2bd480}.fourth-color-alt{--color: #2ebd75;--color-alt: #31a069}:root{--fourth-color-alt: #2ebd75}.accent-color-lighter{--color: #ffd685;--color-alt: #ffc757}:root{--accent-color-lighter: #ffd685}.accent-color-light{--color: #ffc757;--color-alt: #ffba42}:root{--accent-color-light: #ffc757}.accent-color-normal{--color: #ffba42;--color-alt: #ffa600}:root{--accent-color-normal: #ffba42}.accent-color-dark{--color: #ffa600;--color-alt: #eb9c00}:root{--accent-color-dark: #ffa600}.accent-color-darker{--color: #eb9c00;--color-alt: #eb9c00}:root{--accent-color-darker: #eb9c00}.accent-color{--color: #ffba42;--color-alt: #ffa600}:root{--accent-color: #ffba42}.accent-color-alt{--color: #ffa600;--color-alt: #eb9c00}:root{--accent-color-alt: #ffa600}.dark-color-smoother{--color: #4f7087;--color-alt: #3c5567}:root{--dark-color-smoother: #4f7087}.dark-color-smooth{--color: #3c5567;--color-alt: #2a3b47}:root{--dark-color-smooth: #3c5567}.dark-color-dark{--color: #2a3b47;--color-alt: #22303a}:root{--dark-color-dark: #2a3b47}.dark-color-darker{--color: #22303a;--color-alt: #1a252d}:root{--dark-color-darker: #22303a}.dark-color-darkest{--color: #1a252d;--color-alt: #1a252d}:root{--dark-color-darkest: #1a252d}.dark-color{--color: #2a3b47;--color-alt: #22303a}:root{--dark-color: #2a3b47}.dark-color-alt{--color: #22303a;--color-alt: #1a252d}:root{--dark-color-alt: #22303a}.grey-color-lighter{--color: #f2f2f2;--color-alt: #e0e1e1}:root{--grey-color-lighter: #f2f2f2}.grey-color-light{--color: #e0e1e1;--color-alt: #bdbdbd}:root{--grey-color-light: #e0e1e1}.grey-color-normal{--color: #bdbdbd;--color-alt: #828282}:root{--grey-color-normal: #bdbdbd}.grey-color-dark{--color: #828282;--color-alt: #53575a}:root{--grey-color-dark: #828282}.grey-color-darker{--color: #53575a;--color-alt: #53575a}:root{--grey-color-darker: #53575a}.grey-color{--color: #bdbdbd;--color-alt: #828282}:root{--grey-color: #bdbdbd}.grey-color-alt{--color: #828282;--color-alt: #53575a}:root{--grey-color-alt: #828282}.main-sidebar{border-right:1px solid var(--border-color)}code[class*=\"language-\"],pre[class*=\"language-\"]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,0.3);font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=\"language-\"]{padding:1em;overflow:auto;border-radius:0.3em}:not(pre)>code[class*=\"language-\"],pre[class*=\"language-\"]{background:#272822}:not(pre)>code[class*=\"language-\"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}pre.code-toolbar{position:relative}pre.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity 0.3s ease-in-out;opacity:0}pre.code-toolbar:hover>.toolbar{opacity:1}pre.code-toolbar>.toolbar .toolbar-item{display:inline-block}pre.code-toolbar>.toolbar a{cursor:pointer}pre.code-toolbar>.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}pre.code-toolbar>.toolbar a,pre.code-toolbar>.toolbar button,pre.code-toolbar>.toolbar span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:.5em}pre.code-toolbar>.toolbar a:hover,pre.code-toolbar>.toolbar a:focus,pre.code-toolbar>.toolbar button:hover,pre.code-toolbar>.toolbar button:focus,pre.code-toolbar>.toolbar span:hover,pre.code-toolbar>.toolbar span:focus{color:inherit;text-decoration:none}.main-features .main-features__content .main-features__img{display:block;margin:0 auto .5em;width:200px;height:98px;background:url(../images/ed-grid--features.png);background-size:200px}.ed-grid-demo{margin-bottom:var(--vertical-block-space);background:var(--light-bg);border:1px solid var(--border-color)}.ed-grid-demo .ed-item,.ed-grid-demo .box-demo{min-height:100px;background-clip:content-box;background-color:var(--color);display:-ms-grid;display:grid;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:center;justify-content:center;font-size:1.5rem;color:#fff}.ed-grid-demo .ed-item.ed-container,.ed-grid-demo .box-demo.ed-container{display:-ms-flexbox;display:flex}.ed-grid-demo .ed-item.ed-container .ed-item,.ed-grid-demo .box-demo.ed-container .ed-item{background-color:rgba(0,0,0,0.25)}.ed-grid-demo .ed-grid{background:var(--border-color)}.ed-grid-demo .ed-grid>*{min-height:100px;background:var(--color);display:-ms-grid;display:grid;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:center;justify-content:center;font-size:1.5rem;color:#fff}.ed-grid-demo .ed-grid>.ed-grid{background:rgba(0,0,0,0.25)}.dev-demo,.dev-demo-hover{position:static !important;top:initial;border:0;margin:0 !important;position:relative;top:66px}.dev-demo:before,.dev-demo-hover:before{position:fixed;background:steelblue;color:#FFF;font-size:.875rem;text-align:center;line-height:36px;height:36px;top:0}.dev-demo:before,.dev-demo-hover:before{content:\"ed-grid: size s, from 0 (ed-containers: red, ed-items: blue, yellow)\"}@media screen and (min-width: 640px){.dev-demo:before,.dev-demo-hover:before{content:\"ed-grid: size m, from 640px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1024px){.dev-demo:before,.dev-demo-hover:before{content:\"ed-grid: size l, from 1024px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1024px){.dev-demo:before,.dev-demo-hover:before{content:\"ed-grid: size lg, from 1024px (ed-containers: red, ed-items: blue, yellow)\"}}@media screen and (min-width: 1440px){.dev-demo:before,.dev-demo-hover:before{content:\"ed-grid: size xl, from 1440px (ed-containers: red, ed-items: blue, yellow)\"}}.dev-demo .ed-item,.dev-demo .ed-grid>*,.dev-demo-hover .ed-item,.dev-demo-hover .ed-grid>*{color:black}.dev-demo .ed-container,.dev-demo .ed-grid{padding-top:1.25rem;margin-bottom:10px;outline:1px solid tomato;position:relative}.dev-demo .ed-container .ed-container,.dev-demo .ed-container .ed-grid,.dev-demo .ed-grid .ed-container,.dev-demo .ed-grid .ed-grid{margin-bottom:0}.dev-demo .ed-container:before,.dev-demo .ed-grid:before{top:0;background:rgba(255,99,71,0.3);color:tomato}.dev-demo .ed-item,.dev-demo .ed-grid>*{position:relative;padding-bottom:1.25rem;background-color:rgba(70,130,180,0.1);outline:1px solid #4682b4;background-clip:content-box}.dev-demo .ed-item:before,.dev-demo .ed-grid>*:before{background:rgba(70,130,180,0.8);color:#FFF;bottom:0}.dev-demo-hover .ed-container:hover,.dev-demo-hover .ed-grid:hover{padding-top:1.25rem;margin-bottom:10px;outline:1px solid tomato;position:relative}.dev-demo-hover .ed-container:hover .ed-container,.dev-demo-hover .ed-container:hover .ed-grid,.dev-demo-hover .ed-grid:hover .ed-container,.dev-demo-hover .ed-grid:hover .ed-grid{margin-bottom:0}.dev-demo-hover .ed-container:hover:before,.dev-demo-hover .ed-grid:hover:before{top:0;background:rgba(255,99,71,0.3);color:tomato}.dev-demo-hover .ed-item:hover,.dev-demo-hover .ed-grid>*:hover{position:relative;padding-bottom:1.25rem;background-color:rgba(70,130,180,0.1);outline:1px solid #4682b4;background-clip:content-box}.dev-demo-hover .ed-item:hover:before,.dev-demo-hover .ed-grid>*:hover:before{background:rgba(70,130,180,0.8);color:#FFF;bottom:0}.menu-responsive{min-height:500px;position:relative}@media screen and (min-width: 1024px){.menu-responsive{min-height:300px}}.ed-menu{top:var(--header-height);width:100%;z-index:10}@media screen and (min-width: 1024px){.ed-menu{position:-webkit-sticky;position:sticky}}.ed-menu .logo{height:2rem}@media screen and (max-width: 1023px){.ed-menu .nav{position:absolute;left:0;bottom:0;background:black}}.ed-menu .menu{list-style:none}.ed-menu .link{color:lightgrey}.ed-menu .link.active{color:cornflowerblue}@media screen and (min-width: 1024px){.ed-menu .link{color:grey}}.ed-menu .icon{--size: 1.25rem;width:var(--size);height:var(--size);fill:currentColor}.main-features{text-align:center}.main-feature__img{--size: 6rem;width:var(--size);height:var(--size);overflow:hidden;margin:0 auto 1rem}.main-feature__img img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center center;object-position:center center}.main-feature:first-child .main-feature__img{width:calc(var(--size) * 2)}@media screen and (max-width: 1023px){.vertical-menu{background:var(--blue-900)}.vertical-menu::before{color:var(--grey-200);content:'Documentación de EDgrid'}.vertical-menu .t5{color:var(--grey-300)}.vertical-menu a{color:var(--grey-500)}.vertical-menu a.active{color:var(--red-500)}}.vertical-menu li{padding:0}.vertical-menu a,.vertical-menu a.active{padding:0.35rem 0}@media screen and (min-width: 1024px){.vertical-menu a.active{box-shadow:0 1px inset var(--border-color),0 -1px inset var(--border-color)}.vertical-menu a.active{border-top:none;border-bottom:none}}@media screen and (min-width: 1024px){.main-banner{padding-bottom:var(--padding)}}.testimony-card .content{-ms-flex-positive:1;flex-grow:1}.testimony-card .card__footer{-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-top:auto}.testimony-card .card__footer .button{white-space:nowrap}.user-avatar{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.user-avatar .photo{width:1.75rem;height:1.75rem}.data-list .container.container{width:100%;max-width:100%}.data-list li li{list-style:circle;border-bottom:none;padding-top:0;padding-bottom:0.5rem}.font-semibold{font-weight:600}\n"
  },
  {
    "path": "docs/documentacion/alineacion.1.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <title>EDgrid | Base (CSS/Sass)</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\">\n    <meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <!-- Estilos-->\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\">\n    <link rel=\"stylesheet\" href=\"/css/styles.css?t=1599325713047\">\n    <link rel=\"shortcut icon\" href=\"/assets/img/edgrid-favicon.png\">\n    <meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <meta property=\"og:url\" content=\"/base.html\">\n    <meta property=\"og:image\" content=\"/assets/img/edgrid-poster.jpg\">\n    <meta property=\"og:site_name\" content=\"EDteam\">\n    <meta property=\"og:locale\" content=\"es_PE\">\n    <meta property=\"og:locale:alternate\" content=\"es_CO\">\n    <meta property=\"og:locale:alternate\" content=\"es_MX\">\n    <meta property=\"og:locale:alternate\" content=\"es_DO\">\n    <meta property=\"og:locale:alternate\" content=\"es_BO\">\n    <meta property=\"twitter:card\" content=\"summary_large_image\">\n    <meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\">\n    <meta property=\"twitter:site\" content=\"@EDteamLat\">\n    <meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <meta name=\"theme-color\" content=\"#007BDF\">\n  </head>\n  <!-- Body-->\n  <body itemscope itemtype=\"http://schema.org/WebPage\">\n    <header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\">\n      <div class=\"ed-grid s-grid-5 cols-lg-10\">\n        <div class=\"s-cols-2 cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/EDgrid-logo.svg\"></a></div>\n        <div class=\"s-cols-3 lg-cols-8 main-menu-container lg-cross-center lg-main-end\">\n          <nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\">\n            <ul>\n              <li itemprop=\"url\"><a href=\"/documentacion\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li>\n              <li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li>\n              <li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li>\n              <li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li>\n              <li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li>\n            </ul>\n          </nav>\n          <div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div>\n        </div>\n      </div>\n    </header>\n    <!-- Banner section-->\n    <!-- Main-->\n    <div class=\"l-block\"></div>\n    <div class=\"ed-grid cols-l-4 main-section l-big-section\">\n      <aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\">\n        <div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div>\n        <nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\">\n          <ul>\n            <li itemprop=\"url\"><a href=\"/documentacion\" itemprop=\"name\" title=\"Enlace de Comenzar con EDgrid\">Comenzar con EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Enlace de Instalación\">Instalación</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Enlace de Estructura de archivos\">Estructura de archivos</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Enlace de Personalizar EDgrid\">Personalizar EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Enlace de Breakpoints\">Breakpoints</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Enlace de Columnas con Flexbox\">Columnas con Flexbox</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"Enlace de Filas y columnas con CSS Grid (beta)\">Filas y columnas con CSS Grid (beta)</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Enlace de Layout\">Layout</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Enlace de Distribucion\">Distribucion</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Enlace de Alineación\">Alineación</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Enlace de Visibilidad\">Visibilidad</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Enlace de Mediaqueries\">Mediaqueries</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Enlace de Estilos base\">Estilos base</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Enlace de Modo dev\">Modo dev</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Enlace de Funciones\">Funciones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Enlace de Videos responsive\">Videos responsive</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/menus.html\" itemprop=\"name\" title=\"Enlace de Menus\">Menus</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Enlace de Prototipado (beta)\">Prototipado (beta)</a></li>\n          </ul>\n        </nav>\n      </aside>\n      <div class=\"span-l-3\">\n        <main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Alineación</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#alineaci%C3%B3n-de-contenido\">Alineación de contenido</a></li>\n<li><a href=\"#alineaci%C3%B3n-de-bloques\">Alineación de bloques</a></li>\n<li><a href=\"#ancho-de-los-bloques\">Ancho de los bloques</a></li>\n<li><a href=\"#diferencia-entre-bloque-y-contenido\">Diferencia entre bloque y contenido</a></li>\n<li><a href=\"#alineaci%C3%B3n-de-im%C3%A1genes-y-elementos-inline\">Alineación de imágenes y elementos inline</a>\n<ul>\n<li><a href=\"#sobre-el-ancho-de-las-im%C3%A1genes\">Sobre el ancho de las imágenes</a></li>\n</ul>\n</li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>Con EDgrid puede alinear elementos o su contenido en horizontal y vertical según el breakpoint.</p>\n<p><a id=\"markdown-alineación-de-contenido\" name=\"alineación-de-contenido\"></a></p>\n<h2>Alineación de contenido</h2>\n<p>Use las clases <code>breakpoint-left</code>, <code>breakpoint-center</code> y <code>breakpoint-right</code></p>\n<pre><code class=\"language-html\">&lt;h1 class=&quot;s-left m-center lg-right&quot;&gt;Hola mundo&lt;/div&gt;\n&lt;h1 class=&quot;s-center m-right lg-left&quot;&gt;Hola mundo&lt;/div&gt;\n&lt;h1 class=&quot;s-right m-left lg-center&quot;&gt;Hola mundo&lt;/div&gt;\n</code></pre>\n<p>Redimensione la ventana para ver</p>\n<div class=\"ed-grid-demo s-pxy-1\">\n<div class=\"t1 s-left m-center lg-right\">Hola mundo</div>\n<div class=\"t1 s-center m-right lg-left\">Hola mundo</div>\n<div class=\"t1 s-right m-left lg-center\">Hola mundo</div>\n</div>\n<p><a id=\"markdown-alineación-de-bloques\" name=\"alineación-de-bloques\"></a></p>\n<h2>Alineación de bloques</h2>\n<p>Use las clases <code>breakpoint-to-left</code>, <code>breakpoint-to-center</code>, <code>breakpoint-to-right</code></p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 m-50 lg-40 s-to-left m-to-center l-to-right&quot;&gt;\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<p>* <em>Para que las alineaciones de bloque funcionen debe agregar clases de ancho.</em></p>\n<p><a id=\"markdown-ancho-de-los-bloques\" name=\"ancho-de-los-bloques\"></a></p>\n<h2>Ancho de los bloques</h2>\n<p>Use las clases <code>breakpoint-numero</code> donde <code>número</code> es un múltiplo de 5 desde 0 hasta 95. Asi que la clase <code>m-85</code> significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px.</p>\n<p>Combine estas clases con las de alineación para crear layouts avanzados.</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 m-50 lg-40 s-to-left m-to-center l-to-right&quot;&gt;\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<p><a id=\"markdown-diferencia-entre-bloque--y-contenido\" name=\"diferencia-entre-bloque--y-contenido\"></a></p>\n<h2>Diferencia entre bloque  y contenido</h2>\n<p>Comprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS).</p>\n<p>Por ejemplo, un párrafo <code>&lt;p&gt;&lt;/p&gt;</code> es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha?</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-right&quot;&gt;\nEste es un párrafo cuyo texto se ha alineado a la derecha\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 bg-grey s-right\">\nEste es un párrafo cuyo texto se ha alineado a la derecha\n</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 s-to-right&quot;&gt;\nEste es un párrafo alineado a la derecha (como bloque)\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 bg-grey s-75 s-to-right\">\nEste es un párrafo alineado a la derecha (como bloque)\n</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 s-to-center s-right&quot;&gt;\nEste es un párrafo alineado al centro como bloque &lt;br&gt; y con el contenido alineado a la derecha.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 bg-grey s-75 s-to-center s-right\">\nEste es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.\n</p>\n<p>Comprender esta sutil diferencia es crucial para construir layouts. Por ejemplo, si quiere una imagen centrada, agregarle una clase <code>s-to-center</code> no hará nada porque las imágenes son inline (igual que los <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;label&gt;</code>). Podría maldecir a EDgrid pero así funciona CSS y no podemos hacer nada.</p>\n<p><a id=\"markdown-alineación-de-imágenes-y-elementos-inline\" name=\"alineación-de-imágenes-y-elementos-inline\"></a></p>\n<h2>Alineación de imágenes y elementos inline</h2>\n<p>Para centrar una imágen puede aplicarle la clase <code>breakpoint-center</code> a su contenedor. Por ejemplo:</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-center&quot;&gt;\n    &lt;img src=&quot;/img/tioalexys.jpg&quot;&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"s-center ed-grid-demo s-pxy-1\">\n    <img src=\"https://ed.team/sites/default/files/styles/perfil_en_views_200x200_/public/pictures/2018-11/tioalexys.jpg\">\n</div>\n<p>Igual si quiere alinearla a la derecha o izquierda. Y lo mismo para cualquier elemento inline.</p>\n<p>Ahora bien, ¿qué sucede si quiero centrar directamente la imagen y no usar su contenedor? Use la clases <code>breakpoint-block-left</code>, <code>breakpoint-block-center</code> y <code>breakpoint-block-right</code> que agregan además un <code>display: block</code> al elemento inlne al que se apliquen y resuelven la alineación.</p>\n<pre><code class=\"language-html\">&lt;img src=&quot;/img/tioalexys.jpg&quot; class=&quot;s-block-center&quot;&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1\">\n    <img class=\"s-block-center\" src=\"https://ed.team/sites/default/files/styles/perfil_en_views_200x200_/public/pictures/2018-11/tioalexys.jpg\">\n</div>\n<p>Seguro pensará: si se necesita un <code>display: block</code> agréguenlo a los estilos en lugar de crear nuevas clases. El detalle es que el elemento podría tener <code>display:grid</code>, <code>display:flex</code>, <code>display: table</code> o <code>display: inline-block</code> y no se puede forzar un <code>display: block</code> porque destruiría su layout.</p>\n<p><a id=\"markdown-sobre-el-ancho-de-las-imágenes\" name=\"sobre-el-ancho-de-las-imágenes\"></a></p>\n<h3>Sobre el ancho de las imágenes</h3>\n<p>Las imágenes de mapas de bits (jpg, png, gif, webp) poseen las propiedades <code>naturalHeight</code> y <code>naturalWidth</code> (accedes a ellas por JavaScript) que representan su ancho y alto original. La imagen del ejemplo anterior es de <code>200x200px</code> por eso la podemos centrar. Pero si fuera más grande habría que aplicarle además una clase para definir su ancho.</p>\n<p>En el caso de las imágenes svg, estas son vectoriales y carecen de dichas propiedades por lo que siempre ocuparan todo el espacio disponible en su contenedor.</p>\n<p>Ejemplo:</p>\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" class=\"l-block\">\n<p>La podemos centrar con clases de ancho y de alineación de bloques</p>\n<pre><code class=\"language-html\">&lt;img alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; class=&quot;s-30 s-block-center&quot;&gt;\n</code></pre>\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" class=\"s-30 s-block-center\">\n\n        </main>\n      </div>\n    </div>\n    <!-- Footer-->\n    <footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\">\n      <div class=\"ed-container main-footer--content\">\n        <div class=\"ed-item l-50 s-to-center s-center\">\n          <p class=\"smaller\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-slack space\" href=\"https://join.slack.com/t/edlabs/shared_invite/enQtMjk1MjcxOTUzMzgxLTgyY2MwZjY3ODRhNGQyMWJkOWRkOGFlZjQ1YjJiYjAxOTMwNGIzMGViMjc5ODZmMmI3ZGFlNGNiMTEwNGIyNzc\" target=\"_blank\" title=\"Slack de EDgrid\"></a><a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p>\n          <p class=\"smaller\">EDgrid es una marca de <a href=\"https://ed.team\" target=\"_blank\">EDteam</a>. Repositorio de este sitio web en  <a href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\">Github</a></p>\n        </div>\n        <div class=\"ed-item\">\n          <p class=\"smaller s-center\"><a href=\"https://ed.team/alvaro\" target=\"_blank\" title=\"Blog de Alvaro Felipe\">Alvaro Felipe </a><span>2015 - 2018</span></p>\n        </div>\n      </div>\n    </footer>\n    <script src=\"/js/scripts.js?t=1599325713047\"></script>\n  </body>\n</html>"
  },
  {
    "path": "docs/documentacion/alineacion.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Base (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta property=\"og:url\" content=\"/base.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Alineación</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#alineaci%C3%B3n-de-contenido\">Alineación de contenido</a></li>\n<li><a href=\"#alineaci%C3%B3n-de-bloques\">Alineación de bloques</a></li>\n<li><a href=\"#ancho-de-los-bloques\">Ancho de los bloques</a></li>\n<li><a href=\"#diferencia-entre-bloque--y-contenido\">Diferencia entre bloque  y contenido</a></li>\n<li><a href=\"#alineaci%C3%B3n-de-im%C3%A1genes-y-elementos-inline\">Alineación de imágenes y elementos inline</a></li>\n<li><a href=\"#sobre-el-ancho-de-las-im%C3%A1genes\">Sobre el ancho de las imágenes</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>Con EDgrid puede alinear elementos o su contenido en horizontal y vertical según el breakpoint.</p>\n<p><a id=\"markdown-alineación-de-contenido\" name=\"alineación-de-contenido\"></a></p>\n<h2>Alineación de contenido</h2>\n<p>Use las clases <code>breakpoint-left</code>, <code>breakpoint-center</code> y <code>breakpoint-right</code></p>\n<pre><code class=\"language-html\">&lt;h1 class=&quot;s-left m-center lg-right&quot;&gt;Hola mundo&lt;/div&gt;\n&lt;h1 class=&quot;s-center m-right lg-left&quot;&gt;Hola mundo&lt;/div&gt;\n&lt;h1 class=&quot;s-right m-left lg-center&quot;&gt;Hola mundo&lt;/div&gt;\n</code></pre>\n<p>Redimensione la ventana para ver</p>\n<div class=\"ed-grid-demo s-pxy-1\">\n<div class=\"t1 s-left m-center lg-right\">Hola mundo</div>\n<div class=\"t1 s-center m-right lg-left\">Hola mundo</div>\n<div class=\"t1 s-right m-left lg-center\">Hola mundo</div>\n</div>\n<p><a id=\"markdown-alineación-de-bloques\" name=\"alineación-de-bloques\"></a></p>\n<h2>Alineación de bloques</h2>\n<p>Use las clases <code>breakpoint-to-left</code>, <code>breakpoint-to-center</code>, <code>breakpoint-to-right</code></p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 m-50 lg-40 s-to-left m-to-center l-to-right&quot;&gt;\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<p><a id=\"markdown-ancho-de-los-bloques\" name=\"ancho-de-los-bloques\"></a></p>\n<h2>Ancho de los bloques</h2>\n<p>Use las clases <code>breakpoint-numero</code> donde <code>número</code> es un múltiplo de 5 desde 0 hasta 95. Asi que la clase <code>m-85</code> significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px.</p>\n<p>Combine estas clases con las de alineación para crear layouts avanzados.</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 m-50 lg-40 s-to-left m-to-center l-to-right&quot;&gt;\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<p><a id=\"markdown-diferencia-entre-bloque--y-contenido\" name=\"diferencia-entre-bloque--y-contenido\"></a></p>\n<h2>Diferencia entre bloque  y contenido</h2>\n<p>Comprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS).</p>\n<p>Por ejemplo, un párrafo <code>&lt;p&gt;&lt;/p&gt;</code> es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha?</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-right&quot;&gt;\nEste es un párrafo cuyo texto se ha alineado a la derecha\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 s-bg-grey s-right\">\nEste es un párrafo cuyo texto se ha alineado a la derecha\n</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 s-to-right&quot;&gt;\nEste es un párrafo alineado a la derecha (como bloque)\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 s-bg-grey s-75 s-to-right\">\nEste es un párrafo alineado a la derecha (como bloque)\n</p>\n<pre><code class=\"language-html\">&lt;p class=&quot;s-75 s-to-center s-right&quot;&gt;\nEste es un párrafo alineado al centro como bloque &lt;br&gt; y con el contenido alineado a la derecha.\n&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<p class=\"s-pxy-1 s-bg-grey s-75 s-to-center s-right\">\nEste es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.\n</p>\n<p>Comprender esta sutil diferencia es crucial para construir layouts. Por ejemplo, si quiere una imagen centrada, agregarle una clase <code>s-to-center</code> no hará nada porque las imágenes son inline (igual que los <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;label&gt;</code>). Podría maldecir a EDgrid pero así funciona CSS y no podemos hacer nada.</p>\n<p>* <em>Puede usar estas clases también para alinear botones</em></p>\n<p><a id=\"markdown-alineación-de-imágenes-y-elementos-inline\" name=\"alineación-de-imágenes-y-elementos-inline\"></a></p>\n<h2>Alineación de imágenes y elementos inline</h2>\n<p>Para centrar una imágen puede aplicarle la clase <code>breakpoint-center</code> a su contenedor. Por ejemplo:</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-center&quot;&gt;\n    &lt;img src=&quot;/img/tioalexys.jpg&quot;&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"s-center ed-grid-demo s-pxy-1\">\n    <img src=\"/assets/img/alexys.jpg\">\n</div>\n<p>Igual si quiere alinearla a la derecha o izquierda. Y lo mismo para cualquier elemento inline.</p>\n<p>Ahora bien, ¿qué sucede si quiero centrar directamente la imagen y no usar su contenedor? Use la clases <code>breakpoint-block-left</code>, <code>breakpoint-block-center</code> y <code>breakpoint-block-right</code> que agregan además un <code>display: block</code> al elemento inlne al que se apliquen y resuelven la alineación.</p>\n<pre><code class=\"language-html\">&lt;img class=&quot;s-block-center&quot; src=&quot;/assets/img/EDgrid-isotipo.svg&quot;&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1\">\n    <img class=\"s-block-center\" src=\"/assets/img/logo/EDgrid-isotipo.svg\">\n</div>\n<p>Seguro pensará: si se necesita un <code>display: block</code> agréguenlo a los estilos en lugar de crear nuevas clases. El detalle es que el elemento podría tener <code>display:grid</code>, <code>display:flex</code>, <code>display: table</code> o <code>display: inline-block</code> y no se puede forzar un <code>display: block</code> porque destruiría su layout.</p>\n<p><a id=\"markdown-sobre-el-ancho-de-las-imágenes\" name=\"sobre-el-ancho-de-las-imágenes\"></a></p>\n<h3>Sobre el ancho de las imágenes</h3>\n<p>Las imágenes de mapas de bits (jpg, png, gif, webp) poseen las propiedades <code>naturalHeight</code> y <code>naturalWidth</code> (accedes a ellas por JavaScript) que representan su ancho y alto original. La imagen del ejemplo anterior es de <code>200x200px</code> por eso la podemos centrar. Pero si fuera más grande habría que aplicarle además una clase para definir su ancho.</p>\n<p>En el caso de las imágenes svg, estas son vectoriales y carecen de dichas propiedades por lo que siempre ocuparan todo el espacio disponible en su contenedor.</p>\n<p>Ejemplo:</p>\n<img alt=\"Logotipo de EDgrid\" width=\"100%\" src=\"/assets/img/logo/EDgrid-logo.svg\" class=\"l-block\">\n<p>La podemos centrar con clases de ancho y de alineación de bloques</p>\n<pre><code class=\"language-html\">&lt;img alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; class=&quot;s-30 s-block-center&quot;&gt;\n</code></pre>\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/logo/EDgrid-logo.svg\" class=\"s-30 s-block-center\">\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/banner.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Banner</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Componente banner creado con el prototipado de EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Banner\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Componente banner creado con el prototipado de EDgrid.\"><meta property=\"og:url\" content=\"/banner.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Banner\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Componente banner creado con el prototipado de EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><section class=\"main-banner background grey-800 l-section\"><div class=\"ed-grid lg-grid-2 row-gap s-gap-2 m-gap-4\"><div class=\"s-column s-main-center lg-main-start lg-cross-start s-center lg-left\"><h1 class=\"bigger-title\"><span class=\"color white-color\">Banner principal <br/> <span class=\"color blue-400\">de dos columnas</span> <br/> con EDgrid</span></h1><p class=\"white-color s-opacity-8\">Creado utilizando los componentes de columnas. Totalmente responsive.</p><div class=\"s-main-center\"><a class=\"button blue-500 s-mr-2 s-mb-2 m-mb-0\">Botón 1</a><a class=\"button ghost blue-400 s-mb-2 m-mb-0\">Botón 2</a></div></div><div><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-1\" src=\"/assets/img/og-image.jpg\"></div></div></div></section><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h2>Banner de dos columnas</h2>\n<p>Al copiar el código del componente banner usted sólo conseguirá la estructura de éste para que coloque el contenido que desee.</p>\n<p>Los estilos empleados en la demostración (como el color de fondo o estilos del texto) provienen de la <a href=\"https://ux.ed.team/\">guía de estilos</a> de EDteam.</p>\n<pre><code class=\"language-html\">&lt;section class=&quot;l-section s-py-4&quot;&gt;\n  &lt;!-- Separación del contenido en columnas --&gt;\n  &lt;div class=&quot;ed-grid lg-grid-2 row-gap s-gap-2 m-gap-4&quot;&gt;\n    &lt;!-- Contenido de la columna 1 --&gt;\n    &lt;div class=&quot;s-column s-main-center lg-main-start lg-cross-start s-center lg-left&quot;&gt;\n      &lt;h1&gt;Banner principal de dos columnas con EDgrid&lt;/h1&gt;\n      &lt;p&gt;Creado utilizando los componentes de columnas. Totalmente responsive.&lt;/p&gt;\n      &lt;!-- Botones --&gt;\n      &lt;div class=&quot;s-main-center&quot;&gt;\n        &lt;a class=&quot;button s-mr-2 s-mb-2 m-mb-0&quot;&gt;Botón 1&lt;/a&gt;\n        &lt;a class=&quot;button s-mb-2 m-mb-0&quot;&gt;Botón 2&lt;/a&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;!-- Contenido de la columna 2 --&gt;\n    &lt;div&gt;\n      &lt;div class=&quot;img-container s-ratio-16-9&quot;&gt;\n        &lt;img class=&quot;s-radius-1&quot; src=&quot;/assets/img/og-image.jpg&quot;&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/section&gt;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/base.1.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <title>EDgrid | Base (CSS/Sass)</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\">\n    <meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <!-- Estilos-->\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\">\n    <link rel=\"stylesheet\" href=\"/css/styles.css?t=1599325713822\">\n    <link rel=\"shortcut icon\" href=\"/assets/img/edgrid-favicon.png\">\n    <meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <meta property=\"og:url\" content=\"/base.html\">\n    <meta property=\"og:image\" content=\"/assets/img/edgrid-poster.jpg\">\n    <meta property=\"og:site_name\" content=\"EDteam\">\n    <meta property=\"og:locale\" content=\"es_PE\">\n    <meta property=\"og:locale:alternate\" content=\"es_CO\">\n    <meta property=\"og:locale:alternate\" content=\"es_MX\">\n    <meta property=\"og:locale:alternate\" content=\"es_DO\">\n    <meta property=\"og:locale:alternate\" content=\"es_BO\">\n    <meta property=\"twitter:card\" content=\"summary_large_image\">\n    <meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\">\n    <meta property=\"twitter:site\" content=\"@EDteamLat\">\n    <meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\">\n    <meta name=\"theme-color\" content=\"#007BDF\">\n  </head>\n  <!-- Body-->\n  <body itemscope itemtype=\"http://schema.org/WebPage\">\n    <header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\">\n      <div class=\"ed-grid s-grid-5 cols-lg-10\">\n        <div class=\"s-cols-2 cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/EDgrid-logo.svg\"></a></div>\n        <div class=\"s-cols-3 lg-cols-8 main-menu-container lg-cross-center lg-main-end\">\n          <nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\">\n            <ul>\n              <li itemprop=\"url\"><a href=\"/documentacion\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li>\n              <li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li>\n              <li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li>\n              <li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li>\n              <li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li>\n            </ul>\n          </nav>\n          <div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div>\n        </div>\n      </div>\n    </header>\n    <!-- Banner section-->\n    <!-- Main-->\n    <div class=\"l-block\"></div>\n    <div class=\"ed-grid cols-l-4 main-section l-big-section\">\n      <aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\">\n        <div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div>\n        <nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\">\n          <ul>\n            <li itemprop=\"url\"><a href=\"/documentacion\" itemprop=\"name\" title=\"Enlace de Comenzar con EDgrid\">Comenzar con EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Enlace de Instalación\">Instalación</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Enlace de Estructura de archivos\">Estructura de archivos</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Enlace de Personalizar EDgrid\">Personalizar EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Enlace de Breakpoints\">Breakpoints</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Enlace de Columnas con Flexbox\">Columnas con Flexbox</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"Enlace de Filas y columnas con CSS Grid\">Filas y columnas con CSS Grid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Enlace de Layout\">Layout</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Enlace de Mediaqueries\">Mediaqueries</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Enlace de Estilos base\">Estilos base</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Enlace de Modo dev\">Modo dev</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Enlace de Visibilidad\">Visibilidad</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Enlace de Funciones\">Funciones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Enlace de Videos responsive\">Videos responsive</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/menus.html\" itemprop=\"name\" title=\"Enlace de Menus\">Menus</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Enlace de Alineación\">Alineación</a></li>\n          </ul>\n        </nav>\n      </aside>\n      <div class=\"span-l-3\">\n        <main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Estilos base</h1>\n<p>Los estilos base normalizan los elementos HTML para Responsive Web Design.</p>\n<pre><code class=\"language-scss\">*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin      : 0;\n  font-family : sans-serif;\n}\n\nimg {\n  max-width : 100%;\n  height    : auto;\n}\n\na {\n  text-decoration : none;\n\n  &amp;:hover { text-decoration : underline }\n}\n</code></pre>\n\n        </main>\n      </div>\n    </div>\n    <!-- Footer-->\n    <footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\">\n      <div class=\"ed-container main-footer--content\">\n        <div class=\"ed-item l-50 to-center center\">\n          <p class=\"smaller\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-slack space\" href=\"https://join.slack.com/t/edlabs/shared_invite/enQtMjk1MjcxOTUzMzgxLTgyY2MwZjY3ODRhNGQyMWJkOWRkOGFlZjQ1YjJiYjAxOTMwNGIzMGViMjc5ODZmMmI3ZGFlNGNiMTEwNGIyNzc\" target=\"_blank\" title=\"Slack de EDgrid\"></a><a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p>\n          <p class=\"smaller\">EDgrid es una marca de <a href=\"https://ed.team\" target=\"_blank\">EDteam</a>. Repositorio de este sitio web en  <a href=\"https://github.com/edgrid/edgrid-website\" target=\"_blank\">Github</a></p>\n        </div>\n        <div class=\"ed-item center\">\n          <p class=\"smaller\"><a href=\"https://ed.team/alvaro\" target=\"_blank\" title=\"Blog de Alvaro Felipe\">Alvaro Felipe </a><span>2015 - 2018</span></p>\n        </div>\n      </div>\n    </footer>\n    <script src=\"/js/scripts.js?t=1599325713822\"></script>\n  </body>\n</html>"
  },
  {
    "path": "docs/documentacion/base.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Base (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta property=\"og:url\" content=\"/base.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Estilos base</h1>\n<p>Los estilos base normalizan los elementos HTML para Responsive Web Design.</p>\n<pre><code class=\"language-scss\">*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin      : 0;\n  font-family : sans-serif;\n}\n\nimg {\n  max-width : 100%;\n  height    : auto;\n}\n\na {\n  text-decoration : none;\n\n  &amp;:hover { text-decoration : underline }\n}\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/botones.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <title>EDgrid | Botones (Sass/CSS)</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\">\n    <meta name=\"description\" content=\"Desarrollo de botones de manera rapida, incluyendo clases para personalizarlo.\">\n    <!-- Estilos-->\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\">\n    <link rel=\"stylesheet\" href=\"/css/styles.css?t=1599325714048\">\n    <link rel=\"shortcut icon\" href=\"/assets/img/edgrid-favicon.png\">\n    <meta property=\"og:title\" content=\"EDgrid | Botones (Sass/CSS)\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:description\" content=\"Desarrollo de botones de manera rapida, incluyendo clases para personalizarlo.\">\n    <meta property=\"og:url\" content=\"index.html\">\n    <meta property=\"og:image\" content=\"/assets/img/edgrid-poster.jpg\">\n    <meta property=\"og:site_name\" content=\"EDteam\">\n    <meta property=\"og:locale\" content=\"es_PE\">\n    <meta property=\"og:locale:alternate\" content=\"es_CO\">\n    <meta property=\"og:locale:alternate\" content=\"es_MX\">\n    <meta property=\"og:locale:alternate\" content=\"es_DO\">\n    <meta property=\"og:locale:alternate\" content=\"es_BO\">\n    <meta property=\"twitter:card\" content=\"summary_large_image\">\n    <meta property=\"twitter:title\" content=\"EDgrid | Botones (Sass/CSS)\">\n    <meta property=\"twitter:site\" content=\"@EDteamLat\">\n    <meta property=\"twitter:description\" content=\"Desarrollo de botones de manera rapida, incluyendo clases para personalizarlo.\">\n    <meta name=\"theme-color\" content=\"#007BDF\">\n  </head>\n  <!-- Body-->\n  <body itemscope itemtype=\"http://schema.org/WebPage\">\n    <header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\">\n      <div class=\"ed-grid s-grid-5 cols-lg-10\">\n        <div class=\"s-cols-2 cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/EDgrid-logo.svg\"></a></div>\n        <div class=\"s-cols-3 lg-cols-8 main-menu-container lg-cross-center lg-main-end\">\n          <nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\">\n            <ul>\n              <li itemprop=\"url\"><a href=\"/documentacion\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li>\n              <li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li>\n              <li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li>\n              <li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li>\n              <li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li>\n            </ul>\n          </nav>\n          <div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div>\n        </div>\n      </div>\n    </header>\n    <!-- Banner section-->\n    <!-- Main-->\n    <div class=\"l-block\"></div>\n    <div class=\"ed-grid cols-l-4 main-section l-big-section\">\n      <aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\">\n        <div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div>\n        <nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\">\n          <ul>\n            <li itemprop=\"url\"><a href=\"/documentacion\" itemprop=\"name\" title=\"Enlace de Comenzar con EDgrid\">Comenzar con EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Enlace de Instalación\">Instalación</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Enlace de Estructura de archivos\">Estructura de archivos</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Enlace de Personalizar EDgrid\">Personalizar EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Enlace de Breakpoints\">Breakpoints</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Enlace de Columnas con Flexbox\">Columnas con Flexbox</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"Enlace de Filas y columnas con CSS Grid\">Filas y columnas con CSS Grid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Enlace de Layout\">Layout</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Enlace de Mediaqueries\">Mediaqueries</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Enlace de Estilos base\">Estilos base</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Enlace de Modo dev\">Modo dev</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Enlace de Visibilidad\">Visibilidad</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Enlace de Funciones\">Funciones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Enlace de Videos responsive\">Videos responsive</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/botones.html\" itemprop=\"name\" title=\"Enlace de Botones\">Botones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/menus.html\" itemprop=\"name\" title=\"Enlace de Menus\">Menus</a></li>\n          </ul>\n        </nav>\n      </aside>\n      <div class=\"span-l-3\">\n        <main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Botones (Sass/CSS)</h1>\n<p>Aunque ed-grid no pretende incluir elementos de UI (que se incluirán en el futuro proyecto ed-ui), por el momento incluye botones y menu pensando en el prototipado rápido.</p>\n<h2>Uso con CSS (cssCore)</h2>\n<p>Use la clase button. Puede añadir las clases round o radius para bordes redondeados.</p>\n<p>Para controlar el tamaño del botón, cambie manualmente el font-size por CSS. Si desea cambiar los colores, haga lo mismo en su CSS personalizado.</p>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Boton default&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button round&quot;&gt;Boton round&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button radius&quot;&gt;Boton radius&lt;/a&gt;\n</code></pre>\n<p>Resultado</p>\n<p><a href=\"#\" class=\"button\">Boton default</a>\n<a href=\"#\" class=\"button round\">Boton round</a>\n<a href=\"#\" class=\"button radius\">Boton radius</a></p>\n<h2>Uso con Sass</h2>\n<p>Incluya el mixin button($bg-color,$front-color,$style) Sus parámetros (todos opcionales) son:</p>\n<ul>\n<li>$bg-color: el color de fondo (#ddd por defecto)</li>\n<li>$font-color: color del texto (#333 por defecto)</li>\n<li>$style: estilo del boton (default por defecto, puede usar round o radius).</li>\n</ul>\n<pre><code class=\"language-markup\">&lt;a href=&quot;#&quot; class=&quot;selector1&quot;&gt;Boton 1&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;selector2&quot;&gt;Boton 2&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;selector3&quot;&gt;Boton 3&lt;/a&gt;\n</code></pre>\n<pre><code class=\"language-scss\">.selector1 { @include button(teal, white) }\n.selector2 { @include button(tomato, white, round) }\n.selector3 { @include button(#2e84e6, white, radius) }\n</code></pre>\n<p>Resultado</p>\n<p><a class=\"selector1\">Boton 1</a>\n<a class=\"selector2\">Boton 2</a>\n<a class=\"selector3\">Boton 3</a></p>\n\n        </main>\n      </div>\n    </div>\n    <!-- Footer-->\n    <footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\">\n      <div class=\"ed-container main-footer--content\">\n        <div class=\"ed-item l-50 to-center center\">\n          <p class=\"smaller\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-slack space\" href=\"https://join.slack.com/t/edlabs/shared_invite/enQtMjk1MjcxOTUzMzgxLTgyY2MwZjY3ODRhNGQyMWJkOWRkOGFlZjQ1YjJiYjAxOTMwNGIzMGViMjc5ODZmMmI3ZGFlNGNiMTEwNGIyNzc\" target=\"_blank\" title=\"Slack de EDgrid\"></a><a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p>\n          <p class=\"smaller\">EDgrid es una marca de <a href=\"https://ed.team\" target=\"_blank\">EDteam</a>. Repositorio de este sitio web en  <a href=\"https://github.com/edgrid/edgrid-website\" target=\"_blank\">Github</a></p>\n        </div>\n        <div class=\"ed-item center\">\n          <p class=\"smaller\"><a href=\"https://ed.team/alvaro\" target=\"_blank\" title=\"Blog de Alvaro Felipe\">Alvaro Felipe </a><span>2015 - 2018</span></p>\n        </div>\n      </div>\n    </footer>\n    <script src=\"/js/scripts.js?t=1599325714048\"></script>\n  </body>\n</html>"
  },
  {
    "path": "docs/documentacion/breakpoints.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | CSS</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | CSS\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><meta property=\"og:url\" content=\"documentacion/breakpoints.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | CSS\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Breakpoints</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#mobile-first\">Mobile first</a></li>\n<li><a href=\"#cambiar-los-breakpoints-sass\">Cambiar los breakpoints (Sass)</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>Los breakpoints son los puntos de quiebre donde el layout cambia. Estan definidos en el siguiente Sass map:</p>\n<pre><code class=\"language-scss\">$breakpoints : (\n    s  : 0,     // Todos los tamaños\n    m  : 40em,  // ~ 640px\n    lg : 64em,  // ~ 1024px\n    xl : 90em   // ~1440px\n) !default;\n</code></pre>\n<p>* En versiones anteriores se usaba el breakpoint <code>l</code> que ahora se ha cambiado a <code>lg</code> para evitar confusión con la nomenclatura de SMACSS en la que <code>l</code> no significa <code>large</code> sino <code>layout</code>. Sin embargo, por compatibilidad hacia atrás, EDgrid reconoce aun el breakpoint <code>l</code> por lo que su proyecto no se verá afectado. Aunque recomendamos dejar de usarlo en el futuro.</p>\n<p><a id=\"markdown-mobile-first\" name=\"mobile-first\"></a></p>\n<h2>Mobile first</h2>\n<p>EDgrid usa el patrón <strong>Mobile first</strong>, lo que significa que el estilo definido en un breakpoint será heredado en breakpoints superiores salvo que sea sobreescrito. En el siguiente ejemplo, el elemento medirá 50% de ancho (<code>s-50</code>) en todos los tamaños ya que fue definido en el breakpoint menor y no ha sido sobreescrito.</p>\n<pre><code class=\"language-html\">&lt;article class=&quot;s-50&quot;&gt;Hola mundo&lt;/article&gt;\n</code></pre>\n<p>En cambio, en este ejemplo, medirá 50% en los breakpoints <code>s</code> y <code>m</code> pero en <code>l</code> y <code>xl</code> medirá 75%.</p>\n<pre><code class=\"language-html\">&lt;article class=&quot;s-50 lg-75&quot;&gt;Hola mundo&lt;/article&gt;\n</code></pre>\n<p><a id=\"markdown-cambiar-los-breakpoints-sass\" name=\"cambiar-los-breakpoints-sass\"></a></p>\n<h2>Cambiar los breakpoints (Sass)</h2>\n<p>Si es usuario avanzado puede cambiar los breakpoints por los suyos. Puede cambiar el tamaño, el nombre o la cantidad.  Solo debe declarar el Sass map <code>$breakpoints</code> antes de importar EDgrid.</p>\n<pre><code class=\"language-scss\">$breakpoints : (\nsmall   : 0,\nmedium  : 45em,\nlarge   : 80em,\nxlarge  : 90em,\nxxlarge : 120em\n)\n\n@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/cards.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Cards (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Componente card creado con el prototipado de EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Cards (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Componente card creado con el prototipado de EDgrid.\"><meta property=\"og:url\" content=\"/cards.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Cards (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Componente card creado con el prototipado de EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Cards</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#card-basico\">Card básico</a></li>\n<li><a href=\"#card-horizontal\">Card horizontal</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>Recuerde que EDgrid es una librería enfocada al RWD, por lo que no tiene componentes o estilos integrados por defecto, pero puede utilizar el prototipado y el prototipado avanzado para crear sus propios componentes.</p>\n<p><a id=\"markdown-card-basico\" name=\"card-basico\"></a></p>\n<h2>Card básico</h2>\n<p>Ejemplo de tarjeta creada con el prototipado integrado:</p>\n<div class=\"m-40 lg-to-center l-block\">\n    <article class=\"s-shadow-bottom\">\n        <!--Contenedor de la imagen-->\n        <div class=\"s-ratio-16-9 img-container s-radius-tl s-radius-tr\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <!--Contenido-->\n        <div class=\"s-bg-white s-pxy-2\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n        <footer class=\"s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl\">\n            <!--Define el ancho máximo de la imagen-->\n            <div class=\"s-10 s-mr-1\">\n            <!--Contenedor de la imagen-->\n            <div class=\"circle \">\n                <img  src=\"/assets/img/alexys.jpg\">\n            </div>\n            <!--Profesor-->\n            </div>\n            <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n            <!--Boton-->\n            <div class=\"button s-to-right\">$40USD</div>\n        </footer>\n    </article>\n</div>\n<pre><code class=\"language-html\">&lt;article class=&quot;s-shadow-bottom&quot;&gt;\n    &lt;!--Contenedor de la imagen--&gt;\n    &lt;div class=&quot;s-ratio-16-9 img-container s-radius-tl s-radius-tr&quot;&gt;\n        &lt;img src=&quot;/assets/img/poster-curso.png&quot;&gt;\n    &lt;/div&gt;\n    &lt;!--Contenido--&gt;\n    &lt;div class=&quot;s-bg-white s-pxy-2&quot;&gt;\n        &lt;h3&gt;Curso Bases de Datos Desde Cero&lt;/h3&gt;\n        &lt;p class=&quot;s-mb-0&quot;&gt;Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;footer class=&quot;s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl&quot;&gt;\n        &lt;!--Define el ancho máximo de la imagen--&gt;\n        &lt;div class=&quot;s-10 s-mr-1&quot;&gt;\n        &lt;!--Contenedor de la imagen--&gt;\n        &lt;div class=&quot;circle &quot;&gt;\n            &lt;img  src=&quot;/assets/img/alexys.jpg&quot;&gt;\n        &lt;/div&gt;\n        &lt;!--Profesor--&gt;\n        &lt;/div&gt;\n        &lt;p class=&quot;s-mb-0&quot;&gt;Prof. Alexys Lozada&lt;/p&gt;\n        &lt;!--Boton--&gt;\n        &lt;div class=&quot;button s-to-right&quot;&gt;$40USD&lt;/div&gt;\n    &lt;/footer&gt;\n&lt;/article&gt;\n</code></pre>\n<p><a id=\"markdown-card-horizontal\" name=\"card-horizontal\"></a></p>\n<h2>Card horizontal</h2>\n<p>Este card se mostrará en formato horizontal en desktop y pasará a ser vertical en dispositivos móviles.</p>\n<div class=\"m-65 s-to-center l-block\">\n    <article class=\"s-shadow-bottom\">\n      <!-- Póster y contenido -->\n      <div class=\"ed-grid m-grid-5 s-gap-2 m-pxy-2 s-bg-white s-radius-tl s-radius-tr\">\n        <!-- Contenedor de la imagen -->\n        <div class=\"m-cols-2 img-container s-ratio-16-9 s-radius-tl s-radius-tr m-radius\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <!-- Contenido -->\n        <div class=\"s-pxy-2 m-pxy-0 m-cols-3\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra \n                              bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n      </div>\n      <footer class=\"s-bg-grey s-cross-center s-pxy-2 s-radius-br s-radius-bl\">\n          <!-- Define el ancho máximo de la imagen -->\n          <div class=\"s-10 m-5 s-mr-1\">\n              <!-- Contenedor de la imagen -->\n              <div class=\"circle \">\n                  <img  src=\"/assets/img/alexys.jpg\">\n              </div>\n          </div>\n          <!-- Profesor -->\n          <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n          <!-- Botón -->\n          <div class=\"button s-to-right\">$40USD</div>\n      </footer>\n    </article>\n</div>\n<pre><code class=\"language-html\">&lt;article class=&quot;s-shadow-bottom&quot;&gt;\n  &lt;!-- Póster y contenido --&gt;\n  &lt;div class=&quot;ed-grid m-grid-5 s-gap-2 m-pxy-2 s-bg-white s-radius-tl s-radius-tr&quot;&gt;\n    &lt;!-- Contenedor de la imagen --&gt;\n    &lt;div class=&quot;m-cols-2 img-container s-ratio-16-9 s-radius-tl s-radius-tr m-radius&quot;&gt;\n        &lt;img src=&quot;/assets/img/poster-curso.png&quot;&gt;\n    &lt;/div&gt;\n    &lt;!-- Contenido --&gt;\n    &lt;div class=&quot;s-pxy-2 m-pxy-0 m-cols-3&quot;&gt;\n        &lt;h3&gt;Curso Bases de Datos Desde Cero&lt;/h3&gt;\n        &lt;p class=&quot;s-mb-0&quot;&gt;Diseña, estructura y administra \n                          bases de datos SQL y crea un sistema de facturación&lt;/p&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;footer class=&quot;s-bg-grey s-cross-center s-pxy-2 s-radius-br s-radius-bl&quot;&gt;\n      &lt;!-- Define el ancho máximo de la imagen --&gt;\n      &lt;div class=&quot;s-10 m-5 s-mr-1&quot;&gt;\n          &lt;!-- Contenedor de la imagen --&gt;\n          &lt;div class=&quot;circle &quot;&gt;\n              &lt;img  src=&quot;/assets/img/alexys.jpg&quot;&gt;\n          &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;!-- Profesor --&gt;\n      &lt;p class=&quot;s-mb-0&quot;&gt;Prof. Alexys Lozada&lt;/p&gt;\n      &lt;!-- Botón --&gt;\n      &lt;div class=&quot;button s-to-right&quot;&gt;$40USD&lt;/div&gt;\n  &lt;/footer&gt;\n&lt;/article&gt;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/css.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <title>EDgrid | CSS</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\">\n    <meta name=\"description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\">\n    <!-- Estilos-->\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\">\n    <link rel=\"stylesheet\" href=\"/css/styles.css?t=1599325714406\">\n    <link rel=\"shortcut icon\" href=\"/assets/img/edgrid-favicon.png\">\n    <meta property=\"og:title\" content=\"EDgrid | CSS\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\">\n    <meta property=\"og:url\" content=\"/css.html\">\n    <meta property=\"og:image\" content=\"/assets/img/edgrid-poster.jpg\">\n    <meta property=\"og:site_name\" content=\"EDteam\">\n    <meta property=\"og:locale\" content=\"es_PE\">\n    <meta property=\"og:locale:alternate\" content=\"es_CO\">\n    <meta property=\"og:locale:alternate\" content=\"es_MX\">\n    <meta property=\"og:locale:alternate\" content=\"es_DO\">\n    <meta property=\"og:locale:alternate\" content=\"es_BO\">\n    <meta property=\"twitter:card\" content=\"summary_large_image\">\n    <meta property=\"twitter:title\" content=\"EDgrid | CSS\">\n    <meta property=\"twitter:site\" content=\"@EDteamLat\">\n    <meta property=\"twitter:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\">\n    <meta name=\"theme-color\" content=\"#007BDF\">\n  </head>\n  <!-- Body-->\n  <body itemscope itemtype=\"http://schema.org/WebPage\">\n    <header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\">\n      <div class=\"ed-grid s-grid-5 cols-lg-10\">\n        <div class=\"s-cols-2 cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/EDgrid-logo.svg\"></a></div>\n        <div class=\"s-cols-3 lg-cols-8 main-menu-container lg-cross-center lg-main-end\">\n          <nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\">\n            <ul>\n              <li itemprop=\"url\"><a href=\"/documentacion\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li>\n              <li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li>\n              <li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li>\n              <li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li>\n              <li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li>\n            </ul>\n          </nav>\n          <div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div>\n        </div>\n      </div>\n    </header>\n    <!-- Banner section-->\n    <!-- Main-->\n    <div class=\"l-block\"></div>\n    <div class=\"ed-grid cols-l-4 main-section l-big-section\">\n      <aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\">\n        <div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div>\n        <nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\">\n          <ul>\n            <li itemprop=\"url\"><a href=\"/documentacion\" itemprop=\"name\" title=\"Enlace de Comenzar con EDgrid\">Comenzar con EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Enlace de Instalación\">Instalación</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Enlace de Estructura de archivos\">Estructura de archivos</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/css.html\" itemprop=\"name\" title=\"Enlace de Estructura CSS\">Estructura CSS</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/sass.html\" itemprop=\"name\" title=\"Enlace de Estructura Sass\">Estructura Sass</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Enlace de Breakpoints\">Breakpoints</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Enlace de Layout con Flexbox\">Layout con Flexbox</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"Enlace de Layout con CSS Grid\">Layout con CSS Grid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Enlace de Layout vertical\">Layout vertical</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Enlace de Personalizar EDgrid\">Personalizar EDgrid</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Enlace de Mediaqueries (Sass)\">Mediaqueries (Sass)</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Enlace de Base\">Base</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Enlace de Modo dev\">Modo dev</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/grids.html\" itemprop=\"name\" title=\"Enlace de Grids (cuadrículas)\">Grids (cuadrículas)</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Enlace de Visibilidad\">Visibilidad</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Enlace de Funciones\">Funciones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/helpers.html\" itemprop=\"name\" title=\"Enlace de Helpers\">Helpers</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/offset.html\" itemprop=\"name\" title=\"Enlace de Offset\">Offset</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Enlace de Videos responsive\">Videos responsive</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/botones.html\" itemprop=\"name\" title=\"Enlace de Botones\">Botones</a></li>\n            <li itemprop=\"url\"><a href=\"/documentacion/menus.html\" itemprop=\"name\" title=\"Enlace de Menus\">Menus</a></li>\n          </ul>\n        </nav>\n      </aside>\n      <div class=\"span-l-3\">\n        <main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Comprender EDgrid CSS</h1>\n<p>En EDgrid puede decidir que código será compilado a CSS.</p>\n<p>Si usted desea puede trabajar solo con la versión CSS de EDgrid, y añadir clases a su marcado HTML para construir su layout según el <a href=\"/documentacion/flujo.html\">flujo de trabajo recomendado</a>.</p>\n<p>El código CSS de EDgrid 2 se clasifica en 2 grupos:</p>\n<h2>cssCore</h2>\n<p>Cojunto de clases CSS recomendadas si va a trabajar con la versión CSS. Si va a trabajar con Sass puede saltarse está sección.</p>\n<ul>\n<li><a href=\"/documentacion/offset.html\">offset</a><br>\nClases para agregar un margen inicial a los elementos</li>\n<li><a href=\"/documentacion/flexbox.html\">flexbox</a><br>\nClases para alinear elementos en vertical y horizontal con flexbox.</li>\n<li><a href=\"/documentacion/flexbox\">grid</a><br>\nClases para crear cuadrículas (p.ej. para galerías de fotos)</li>\n<li><a href=\"/documentacion/modo-dev.html\">devMode</a><br>\nGenera el modo dev para visualizar la construcción del layout</li>\n<li><a href=\"/documentacion/botones.html\">botones</a><br>\nClases para crear botones</li>\n<li><a href=\"/documentacion/menus.html\">ed-menu</a><br>\nClases para crear menu de navegacion</li>\n</ul>\n<h2>cssHelpers</h2>\n<p>Clases utilitarias de CSS que incluyen la funcionalidad base de EDgrid. Por eso, incluso en la <a href=\"/documentacion/sass.html\">versión Sass</a> vienen activadas por defecto.</p>\n<ul>\n<li><strong>Breakpoints</strong><br>\nDefine los tamaños de viewport en los que se cambia el layout</li>\n<li><strong>Layout (flexbox)</strong><br>\nConstruye layouts con Flexbox</li>\n<li><strong>Layout (CSS Grid)</strong><br>\nConstruye layouts con CSS Grid (beta)</li>\n<li><strong>Helpers para alineación con flexbox</strong><br>\nAlineación de elementos en horizontal y vertical respecto a su padre</li>\n<li><strong>Helpers</strong><br>\nClases para alineación de elementos</li>\n<li><strong>Visibilidad</strong><br>\nClases para definir en qué breakpoints será visible u oculto un elemento.</li>\n<li><strong>Video responsive</strong><br>\nCrea videos responsive 16:9</li>\n</ul>\n\n        </main>\n      </div>\n    </div>\n    <!-- Footer-->\n    <footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\">\n      <div class=\"ed-container main-footer--content\">\n        <div class=\"ed-item l-50 to-center center\">\n          <p class=\"smaller\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-slack space\" href=\"https://join.slack.com/t/edlabs/shared_invite/enQtMjk1MjcxOTUzMzgxLTgyY2MwZjY3ODRhNGQyMWJkOWRkOGFlZjQ1YjJiYjAxOTMwNGIzMGViMjc5ODZmMmI3ZGFlNGNiMTEwNGIyNzc\" target=\"_blank\" title=\"Slack de EDgrid\"></a><a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p>\n          <p class=\"smaller\">EDgrid es una marca de <a href=\"https://ed.team\" target=\"_blank\">EDteam</a>. Repositorio de este sitio web en  <a href=\"https://github.com/edgrid/edgrid-website\" target=\"_blank\">Github</a></p>\n        </div>\n        <div class=\"ed-item center\">\n          <p class=\"smaller\"><a href=\"https://ed.team/alvaro\" target=\"_blank\" title=\"Blog de Alvaro Felipe\">Alvaro Felipe </a><span>2015 - 2018</span></p>\n        </div>\n      </div>\n    </footer>\n    <script src=\"/js/scripts.js?t=1599325714406\"></script>\n  </body>\n</html>"
  },
  {
    "path": "docs/documentacion/distribucion.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Distribucion</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Distrubción y dirección de los elementos\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Distribucion\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Distrubción y dirección de los elementos\"><meta property=\"og:url\" content=\"/docs/distribucion.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Distribucion\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Distrubción y dirección de los elementos\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Distribución</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#order\">Order</a></li>\n<li><a href=\"#alineaci%C3%B3n-en-vertical-y-horizontal-de-elementos-hijos\">Alineación en vertical y horizontal de elementos hijos</a></li>\n<li><a href=\"#orientaci%C3%B3n\">Orientación</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p><a id=\"markdown-order\" name=\"order\"></a></p>\n<h2>Order</h2>\n<p>Tanto en flexbox como en grid, la propiedad <code>order</code> permite definir la posición de un elemento en el layout. Por ejemplo, un elemento con <code>order: 1</code> aparecerá antes que uno con <code>order:2</code> aunque en el código HTML se encuentre después.</p>\n<p>Con EDgrid puede definir esta propiedad con las clases <code>breakpoint-order-numero</code>. Donde número va de <code>1</code> hasta la variable <code>max-grid-columns</code> (12 por defecto).</p>\n<p>Tenga en cuenta que asignarle <code>1</code> al order de un elemento no hará que aparezca en primer lugar ya que el valor predeterminado de todos es <code>0</code> (teoría de CSS). Por lo que debe agregarle las clases a todos los que quiera modificar.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid s-grid-3&quot;&gt;\n    &lt;div class=&quot;m-order-2 lg-order-3&quot;&gt;1&lt;/div&gt;\n    &lt;div class=&quot;m-order-3 lg-order-1&quot;&gt;2&lt;/div&gt;\n    &lt;div class=&quot;m-order-1 lg-order-2&quot;&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n    <div class=\"m-order-2 lg-order-3\">1</div>\n    <div class=\"m-order-3 lg-order-1\">2</div>\n    <div class=\"m-order-1 lg-order-2\">3</div>\n</div>\n</div>\n<p><a id=\"markdown-alineación-en-vertical-y-horizontal-de-elementos-hijos\" name=\"alineación-en-vertical-y-horizontal-de-elementos-hijos\"></a></p>\n<h2>Alineación en vertical y horizontal de elementos hijos</h2>\n<p>Usando la teoría de flexbox, consideramos <code>main</code> como eje horizontal y <code>cross</code> como eje vertical. Con las clases <code>breakpoint-main-[start|center|end|justify|distribute]</code> y <code>breakpoint-cross-[start|center|end|baseline]</code> Puede alinear bloques y elementos hijos.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-cross-center&quot;&gt;\n    &lt;img src=&quot;/img/tioalexys.jpg&quot; width=&quot;80&quot; class=&quot;s-mr-2&quot;&gt;\n    &lt;span&gt;Alexys Lozada&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <span>Alexys Lozada</span>\n</div>\n<p>Tenga en cuenta que los márgenes de los elementos pueden influir en estas alineaciones. Por ejemplo, el mismo código anterior pero con un párrafo en lugar de span (el párrafo tienen un margin-bottom que impide el centrado vertical).</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-cross-center&quot;&gt;\n    &lt;img src=&quot;/img/tioalexys.jpg&quot; width=&quot;80&quot; class=&quot;s-mr-2&quot;&gt;\n    &lt;p&gt;Alexys Lozada&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p>Alexys Lozada</p>\n</div>\n<p>Lo resolvemos cambiando la etiqueta o anulando el margen.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-cross-center&quot;&gt;\n    &lt;img src=&quot;/img/tioalexys.jpg&quot; width=&quot;80&quot; class=&quot;s-mr-2&quot;&gt;\n    &lt;p class=&quot;s-mb-0&quot;&gt;Alexys Lozada&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p class=\"s-mb-0\">Alexys Lozada</p>\n</div>\n<p><a id=\"markdown-orientación\" name=\"orientación\"></a></p>\n<h2>Orientación</h2>\n<p>Use las siguientes clases para definir la orientacion de los hijos de un elemento:</p>\n<ul>\n<li><code>breakpoint-row</code> De izquierda a derecha (predeterminado)</li>\n<li><code>breakpoint-column</code> De arriba hacia abajo</li>\n<li><code>breakpoint-row-reverse</code> De derecha a izquierda</li>\n<li><code>breakpoint-column-reverse</code> De abajo hacia arriba</li>\n</ul>\n<pre><code class=\"language-html\">&lt;div class=&quot;lg-50 lg-to-center column&quot;&gt;\n    &lt;div&gt;1&lt;/div&gt;\n    &lt;div&gt;2&lt;/div&gt;\n    &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"lg-50 lg-to-center s-bg-blue column\">\n    <div class=\"box-demo\">1</div>\n    <div class=\"box-demo\">2</div>\n    <div class=\"box-demo\">3</div>\n</div>\n</div>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/estructura.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Estructura</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"La siguiente es la estructura de archivos de ed-grid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Estructura\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"La siguiente es la estructura de archivos de ed-grid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)\"><meta property=\"og:url\" content=\"/estructura.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Estructura\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"La siguiente es la estructura de archivos de ed-grid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Estructura de archivos</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#etructura-general-del-repositotio\">Etructura general del repositotio</a></li>\n<li><a href=\"#archivos-exclusivos-de-edgrid\">Archivos exclusivos de EDgrid</a></li>\n<li><a href=\"#archivos-exclusivos-de-la-p%C3%A1gina-de-documentaci%C3%B3n\">Archivos exclusivos de la página de documentación</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>La siguiente es la estructura de archivos de <strong>EDgrid</strong>. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)</p>\n<p>Tenga presente que en el mismo repositorio se encuentra la librería <strong>EDgrid</strong> y la página web con la documentación. Si desea estudiar como se creó EDgrid busque el archivo <code>src/scss/ed-grid.scss</code> y la carpeta <code>src/scss/ed-grid</code>. Todo lo demás se usa para construir esta página web y no forma parte de la librería.</p>\n<p><a id=\"markdown-etructura-general-del-repositotio\" name=\"etructura-general-del-repositotio\"></a></p>\n<h2>Etructura general del repositotio</h2>\n<ul>\n<li><code>src/</code> Carpeta de desarrollo\n<ul>\n<li><code>md/</code> Contenido de la documentación en markdown</li>\n<li><code>data/</code> Datos JSON para la página web</li>\n<li><code>img/</code> Imágenes para la página web</li>\n<li><code>js/</code> JavaScript para la página web</li>\n<li><code>pug/</code> Archivos pug para generar la página web</li>\n<li><code>scss/</code> Estructura de archivos Sass</li>\n<li><code>ed-grid/</code> <strong>🔥 Componentes de la librería EDgrid.</strong></li>\n<li><code>web-styles/</code> Estilos para la documentación en ed-grid.com (no son parte de EDgrid)</li>\n<li><code>styles.scss</code> Archivo principal para la documentacion ed-grid.com (no es parte de EDgrid)</li>\n<li><code>ed-grid.scss</code> <strong>🔥 Archivo principal de EDgrid que importa sus componentes y define variables.</strong></li>\n</ul>\n</li>\n<li><code>ed-grid.scss</code> <strong>🔥 Archivo para importar EDgrid desde node_modules</strong>.</li>\n<li><code>test.html</code> <strong>🔥 Archivo para hacer pruebas con EDgrid</strong></li>\n</ul>\n<p><a id=\"markdown-archivos-exclusivos-de-edgrid\" name=\"archivos-exclusivos-de-edgrid\"></a></p>\n<h2>Archivos exclusivos de EDgrid</h2>\n<ul>\n<li><code>ed-grid.scss</code> <strong>🔥 Archivo para importar EDgrid desde node_modules</strong>.</li>\n<li><code>src/</code>\n<ul>\n<li><code>ed-grid.scss</code> <strong>🔥 Archivo que importa los componentes y define las variables de configuración</strong></li>\n<li><code>ed-grid-css.scss</code> <strong>Archivo para compilar EDgrid a su versión CSS</strong></li>\n<li><code>ed-grid/</code>\n<ul>\n<li><code>components/</code> Componententes principales de la librería\n<ul>\n<li><code>_alignment.scss</code> Utilidades para alineación de bloques y contenido</li>\n<li><code>_base</code> Estilos base para elementos HTML.</li>\n<li><code>_core-flexbox.scss</code> Sistema de columnas con flexbox</li>\n<li><code>_core-grid.scss</code> Sistema de filas y columnas con CSS Grid</li>\n<li><code>_dev.scss</code> Estilos para debuggin</li>\n<li><code>_layouts.scss</code> Estilos para separaciones verticales, margenes y paddings.</li>\n<li><code>_media-queries</code> Mixins para crear media queries</li>\n<li><code>_prototype.scss</code> Estilos para prototipado rápido</li>\n<li><code>_video.scss</code> Estilos para video responsive</li>\n<li><code>_visibility.scss</code> Estilos para mostrar y ocultar elementos en cada breakpoint</li>\n</ul>\n</li>\n<li><code>helpers/</code> Funciones y mixins necesarios para el funcionamiento de diversos componentes\n<ul>\n<li><code>_functions.scss</code> Funciones para convertir pixeles a em y rem (necesarios para mixins de EDgrid)</li>\n<li><code>_mixins.scss</code> Mixins de apoyo en el desarrollo de componentes</li>\n</ul>\n</li>\n<li><code>legacy/</code> Componentes y estilos para compatibilidad con versiones anteriores de EDgrid (no necesario en proyectos nuevos).\n<ul>\n<li><code>_ed-menu</code> Estilos para crear menus de navegación</li>\n<li><code>_grid.scss</code> Estilos para crear cuadriculas (se recomienda usar core-grid)</li>\n<li><code>_legacy.scss</code> Estilos varios de versiones antiguas</li>\n<li><code>_offset</code> Estilos legacy para offset de columnas (no necesario en proyectos nuevos).</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code>css/</code>\n<ul>\n<li><code>ed-grid.css</code> Versión CSS de EDgrid con comentarios para desarrollo</li>\n<li><code>ed-grid.min.css</code> Versión minificada de EDgrid</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><a id=\"markdown-archivos-exclusivos-de-la-página-de-documentación\" name=\"archivos-exclusivos-de-la-página-de-documentación\"></a></p>\n<h2>Archivos exclusivos de la página de documentación</h2>\n<ul>\n<li><code>docs/</code> Página web de documentación y assets compilados</li>\n<li><code>src/</code>\n<ul>\n<li><code>pug/</code> Archivos pug para generar páginas HTML</li>\n<li><code>md/</code> Contenido de la documentación en formato markdown</li>\n<li><code>img/</code> Imágenes de la página web</li>\n<li><code>data/</code> Datos en formato JSON para mostrar en la página web</li>\n<li><code>js/</code> Archivos javascript para la documentación</li>\n<li><code>scss/</code>\n<ul>\n<li><code>styles.scss</code> Importa archivos para estilos de la documentación</li>\n<li><code>web-styles/</code> Partials de Sass para la documentación</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/flexbox-helpers.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Flexbox (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"El core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece mcuhas utilidades extra para aprovechar el poder de flexbox. Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Flexbox (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"El core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece mcuhas utilidades extra para aprovechar el poder de flexbox. Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.\"><meta property=\"og:url\" content=\"/documentacion/flexbox.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Flexbox (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"El core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece mcuhas utilidades extra para aprovechar el poder de flexbox. Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Flexbox (CSS/Sass)</h1>\n<p>El core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece muchas utilidades extra para aprovechar el poder de flexbox.</p>\n<p>Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.</p>\n<ul>\n<li>Flexbox alinea los elementos respecto a dos ejes: main (horizontal por defecto) y cross (vertical por defecto).</li>\n<li>En las siguientes instrucciones, la version css indicará la clase que debe añadirse al marcado html del contenedor</li>\n<li>En la versión Sass se indicará el mixin que debe incluirse al contenedor</li>\n<li>En la version CSS (cssCore), si desea indicar un breakpoint, inicie la clase con él, así <code>l-main-justify</code> <code>m-flex-reverse</code> <code>xl-cross-center</code></li>\n<li>Si no indica el breakpoint (cssHelpers), así <code>cross-end</code></li>\n</ul>\n<h2>Alineaciones en el eje principal</h2>\n<h3>Alinear los elementos a la izquierda y derecha</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-justify&quot;&gt;\n&lt;div&gt;1&lt;/div&gt;\n&lt;div&gt;2&lt;/div&gt;\n&lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass *******\n.container { @include mainJustify }\n</code></pre>\n<h3>Distribuir el espacio disponible alrededor de los elementos</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-distribute&quot;&gt;\n&lt;div&gt;1&lt;/div&gt;\n&lt;div&gt;2&lt;/div&gt;\n&lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include mainDistribute }\n</code></pre>\n<h3>Alinear los elementos al inicio del eje</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-start&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include mainStart }\n</code></pre>\n<h3>Alinear los elementos al centro del eje</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-center&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<p>:markdown-it</p>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include mainCenter }\n</code></pre>\n<h3>Alinea los elementos al final del eje</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-end&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include mainEnd }\n</code></pre>\n<h2>Alineaciones en el eje secundario</h2>\n<h3>Al inicio del eje secundario</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;div class=&quot;cross-start&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include crossStart }\n</code></pre>\n<h3>Al centro del eje secundario</h3>\n<h5>Versión con css</h5>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;cross-center&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include crossCenter }\n</code></pre>\n<h3>Al final del eje secundario</h3>\n<h5>Versión con css</h5>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;cross-end&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include crossEnd }\n</code></pre>\n<h2>Combinar alineaciones en ambos ejes</h2>\n<p>Puede combinar alineaciones para el eje principal y secundario</p>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;main-center cross-center&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container {\n  @include mainCenter;\n  @include crossCenter;\n}\n</code></pre>\n<h2>Orientación de los ejes</h2>\n<h3>Reversa horizontal</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;flex-reverse&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include flexReverse }\n</code></pre>\n<h3>En columna (de arriba hacia abajo)</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;flex-column&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">//version con Sass\n.container { @include flexReverse }\n</code></pre>\n<h3>Columna en reversa (de abajo hacia arriba)</h3>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;flex-column-reverse&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include flexColumnReverse }\n</code></pre>\n<h2>Centrado absoluto</h2>\n<p>El centrado absoluto se aplica a un container que tiene un solo hijo, el cual puede ser solo texto o un elemento html</p>\n<h4>Versión con css</h4>\n<pre><code class=\"language-markup\">&lt;!-- version con css --&gt;\n&lt;div class=&quot;flex-center&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h4>Versión con Sass</h4>\n<pre><code class=\"language-scss\">// version con Sass\n.container { @include flexCenter }\n</code></pre>\n<h2>Orden de elementos (solo CSS)</h2>\n<p>A través de clases html con el formato <code>bp-order-n</code> siendo <code>bp</code> un breakpoint válido de ed-grid, y <code>n</code> un número entre 1 y 10 se puede controlar la aparicion de los elementos en el navegador. Recuerde que todos los elementos tienen por defecto el valor 0 para la propiedad <code>order</code>.</p>\n<p>Ejemplo</p>\n<pre><code class=\"language-markup\">&lt;div class=&quot;container&quot;&gt;\n  &lt;div class=&quot;m-order-2&quot;&gt;1&lt;/div&gt;\n  &lt;div class=&quot;m-order-1&quot;&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Esta característica no esta disponible para Sass porque en Sass basta escribir una linea de código en la media query requerida. Escribir los mixins consume más código que tan solo escribir manualmente el orden cuando sea necesario.</p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/funciones.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Funciones (Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"ed-grid incluye dos funciones útiles en el RWD: em($px) y rem($px). Estas funciones convierten un número en px a em o rem respectivamente. Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Funciones (Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"ed-grid incluye dos funciones útiles en el RWD: em($px) y rem($px). Estas funciones convierten un número en px a em o rem respectivamente. Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles\"><meta property=\"og:url\" content=\"/documentacion/funciones.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Funciones (Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"ed-grid incluye dos funciones útiles en el RWD: em($px) y rem($px). Estas funciones convierten un número en px a em o rem respectivamente. Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Funciones (Sass)</h1>\n<p>EDgrid incluye dos funciones útiles en el RWD: <code>em($px)</code> y <code>rem($px)</code>\nEstas funciones convierten un número en <code>px</code> a <code>em</code> o <code>rem</code> respectivamente</p>\n<pre><code class=\"language-css\">.selector {\n  font-size: em(15px);\n  max-width : rem(1000px);\n }\n</code></pre>\n<p>Compila a</p>\n<pre><code class=\"language-css\">.selector{\n  font-size:.9375em;\n  max-width:62.5rem;\n}\n</code></pre>\n<p>Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles</p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/grids.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Grid (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Grid (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><meta property=\"og:url\" content=\"/grid.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Grid (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Grids (cuadrículas)</h1>\n<p>Con EDgrid puede crear cuadrículas fácilmente.</p>\n<h2>Grids con CSS</h2>\n<p>En CSS EDgrid cuenta con dos grids preconstruidos: <code>1,2,3,4</code> y <code>2,3,4,5</code> (los números representan las columnas en cada breakpoint de ed-grid).</p>\n<p>Para utilizarlos, use la clase <code>grid-container</code> en el contedor, además la clase <code>grid-1234</code> o <code>grid-2345</code> para indicar el tipo de grid.</p>\n<p>Por último, a cada item de la galeria asignele la clase <code>grid-item</code></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;grid-container grid-1234&quot;&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n  &lt;div class=&quot;grid-item&quot;&gt;&lt;!-- Cualquier contenido--&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<h2>Grids con Sass</h2>\n<p>Para Sass, use el mixin <code>grid($item,$s $m $l $xl,$gutter)</code> aplicado al contenedor del grid. Los parámetros son:</p>\n<ul>\n<li><code>$item</code> (obligatorio) es el selector css de cada item del grid. Debe pasarse entrecomillado.</li>\n<li><code>$s $m $l $xl</code> (solo el primero obligatorio) son el número de columnas en cada breakpoint de EDgrid (separados por espacios)\n<ul>\n<li>Los breakpoints superiores heredaran el número de columnas del último breakpoint declarado en el mixin</li>\n<li><code>$gutter</code> (opcional) es la separación entre los items. Solo se aceptan <code>em</code>, <code>rem</code> o <code>px</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Ejemplo, para el siguiente HTML:</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;gallery&quot;&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n  &lt;div class=&quot;image&quot;&gt;&lt;!-- Una foto en la galeria--&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Crearemos un grid 1,1,2,3</p>\n<pre><code class=\"language-scss\">.gallery {\n  @include grid('.image',1 1 2 3);\n}\n</code></pre>\n<p>Los grids son creados con CSS Grid y agregan un fallback con flexbox para navegadores que no lo soportem.</p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/helpers.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Helpers (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los helpers son ayudas al trabajo que fueron llamadas utilidades en la versión anterior de ed-grid. Se pueden usar con CSS (cssHelpers) o Sass. Alineación de elementos. Se aplica al mismo elemento que se quiere alinear (no a su contenedor). Tenga en cuenta que se usa float y se requiere declarar un ancho para que funcione bien. Puede declarar anchos usando clases al igual que con los ed-item.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Helpers (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los helpers son ayudas al trabajo que fueron llamadas utilidades en la versión anterior de ed-grid. Se pueden usar con CSS (cssHelpers) o Sass. Alineación de elementos. Se aplica al mismo elemento que se quiere alinear (no a su contenedor). Tenga en cuenta que se usa float y se requiere declarar un ancho para que funcione bien. Puede declarar anchos usando clases al igual que con los ed-item.\"><meta property=\"og:url\" content=\"/documentacion/helpers.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Helpers (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los helpers son ayudas al trabajo que fueron llamadas utilidades en la versión anterior de ed-grid. Se pueden usar con CSS (cssHelpers) o Sass. Alineación de elementos. Se aplica al mismo elemento que se quiere alinear (no a su contenedor). Tenga en cuenta que se usa float y se requiere declarar un ancho para que funcione bien. Puede declarar anchos usando clases al igual que con los ed-item.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Helpers</h1>\n<p>Archivo <code>helpers.scss</code></p>\n<p>Los helpers son ayudas al trabajo a través de clases.</p>\n<h2>Ancho de elementos</h2>\n<p>Puede usar las mismas clases de los <code>ed-item</code>.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;m-60&quot;&gt;\n&lt;!--Este elemento mide 60% a partir de 640px--&gt;\n&lt;/div&gt;\n&lt;div class=&quot;xl-1-3&quot;&gt;\n&lt;!-- Este elemento mide 33.33% a partir de 1440px--&gt;\n&lt;/div&gt;\n</code></pre>\n<h2>Alineación de elementos</h2>\n<p>Se aplica al mismo elemento que se quiere alinear las clases: <code>to-left</code>, <code>to-right</code>, <code>to-center</code>. Para que funcione debe especificar un ancho también.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;to-left s-50&quot;&gt;&lt;!-- Se envia a la izquierda 50% de ancho desde small--&gt;&lt;/div&gt;\n&lt;div class=&quot;to-right m-80&quot;&gt;&lt;!-- Se envia a la derecha 80% de ancho desde medium --&gt;&lt;/div&gt;\n&lt;div class=&quot;to-center l-75&quot;&gt;&lt;!-- Se envia al centro 75% de ancho desde large--&gt;&lt;/div&gt;\n</code></pre>\n<h2>Alinear contenido</h2>\n<p>Use las clases <code>left</code>, <code>center</code>, <code>right</code> en el contenedor para que su contenido se centre.</p>\n<pre><code class=\"language-html\">&lt;h2 class=&quot;center&quot;&gt;\nSoy un título centrado\n&lt;/h2&gt;\n</code></pre>\n<h2>Limpiar floats</h2>\n<p><strong>Versión CSS</strong></p>\n<pre><code class=\"language-html\">&lt;!--Version css--&gt;\n&lt;div class=&quot;clearfix&quot;&gt;&lt;!-- la clase clearfix limpia los floats--&gt;&lt;/div&gt;\n</code></pre>\n<p><strong>Versión Sass</strong></p>\n<pre><code class=\"language-scss\">// Uso con Sass\n.selector { @include clearfix }\n</code></pre>\n<h2>Forzar ancho total</h2>\n<p>Hace que un elemento siempre mida el 100% del ancho disponible</p>\n<p><strong>Versión CSS</strong></p>\n<pre><code class=\"language-html\">&lt;!-- Version CSS --&gt;\n&lt;div class=&quot;full&quot;&gt;&lt;!-- Este elemento medirá 100% de ancho siempre --&gt;&lt;/div&gt;\n</code></pre>\n<p><strong>Versión Sass</strong></p>\n<pre><code class=\"language-scss\">// Uso con Sass\n.selector { @include full }\n</code></pre>\n<h2>Hacer un elemento circular</h2>\n<p>Tenga en cuenta que si el alto y el ancho no son iguales, el elemento no será circular sino oval.</p>\n<p><strong>Versión CSS</strong></p>\n<pre><code class=\"language-markup\">&lt;!-- Version CSS --&gt;\n&lt;div class=&quot;circle&quot;&gt;&lt;!-- Este elemento será circular --&gt;&lt;/div&gt;\n</code></pre>\n<p><strong>Versión Sass</strong></p>\n<pre><code class=\"language-scss\">// Uso con Sass\n.selector { @include circle }\n</code></pre>\n<h2>Controlar el padding</h2>\n<blockquote>\n<p>Importante: si usa la versión con CSS Grid puede saltarse esta sección.</p>\n</blockquote>\n<p>En EDgrid la separación entre los ed-item se genera a través de padding laterales (la separación entre uno y el siguiente es dos veces el tamaño del padding, por defecto 15px).</p>\n<p>Puede ocurrir que en algunos casos complejos para forzar la alineación requiera añadir o quitar los padding por defecto a cualquier elemento (no solo ed-container y ed-item).</p>\n<p><strong>Versión CSS</strong></p>\n<pre><code class=\"language-markup\">&lt;!-- Version CSS --&gt;\n&lt;div class=&quot;padding&quot;&gt;&lt;!-- Añade un padding si el elemento no lo tenia --&gt;&lt;/div&gt;\n&lt;div class=&quot;padding-2&quot;&gt;&lt;!-- Añade un padding doble --&gt;&lt;/div&gt;\n&lt;div class=&quot;padding-3&quot;&gt;&lt;!-- Añade un padding triple --&gt;&lt;/div&gt;\n&lt;div class=&quot;ed-container no-padding&quot;&gt;&lt;!-- Elimina el padding de todos sus ed-item internos--&gt;&lt;/div&gt;\n&lt;div class=&quot;ed-item no-padding&quot;&gt;&lt;!-- Elimina el padding de solo este ed-item--&gt;&lt;/div&gt;\n</code></pre>\n<p><strong>Versión Sass</strong></p>\n<pre><code class=\"language-scss\">// Uso con Sass\n\n// el mixin padding() recibe un número como parámetro\n// este número puede ser 0 para eliminar el padding\n.selector1 { @include padding(3) }\n\n// El mixin noPaddingContainer tiene efecto\n// solo aplicado a un .ed-container y elimina\n// el padding de sus ed-item hijos\n.selector2 { @include noPaddingContainer }\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/imagenes.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n  <head>\n    <title>EDgrid | Imágenes (Sass/CSS)</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\">\n    <meta name=\"description\" content=\"Puede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen.\">\n    <!-- Estilos-->\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\">\n    <link rel=\"stylesheet\" href=\"/css/styles.css?t=1599325715020\">\n    <link rel=\"shortcut icon\" href=\"/assets/img/edgrid-favicon.png\">\n    <meta property=\"og:title\" content=\"EDgrid | Imágenes (Sass/CSS)\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:description\" content=\"Puede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen.\">\n    <meta property=\"og:url\" content=\"/imagenes.html\">\n    <meta property=\"og:image\" content=\"/assets/img/edgrid-poster.jpg\">\n    <meta property=\"og:site_name\" content=\"EDteam\">\n    <meta property=\"og:locale\" content=\"es_PE\">\n    <meta property=\"og:locale:alternate\" content=\"es_CO\">\n    <meta property=\"og:locale:alternate\" content=\"es_MX\">\n    <meta property=\"og:locale:alternate\" content=\"es_DO\">\n    <meta property=\"og:locale:alternate\" content=\"es_BO\">\n    <meta property=\"twitter:card\" content=\"summary_large_image\">\n    <meta property=\"twitter:title\" content=\"EDgrid | Imágenes (Sass/CSS)\">\n    <meta property=\"twitter:site\" content=\"@EDteamLat\">\n    <meta property=\"twitter:description\" content=\"Puede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen.\">\n    <meta name=\"theme-color\" content=\"#007BDF\">\n  </head>\n  <!-- Body-->\n  <body itemscope itemtype=\"http://schema.org/WebPage\">\n    <header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\">\n      <div class=\"ed-grid s-grid-5 cols-lg-10\">\n        <div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div>\n        <div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\">\n          <nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\">\n            <ul>\n              <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li>\n              <li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li>\n              <li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li>\n              <li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li>\n              <li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li>\n            </ul>\n          </nav>\n          <div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div>\n        </div>\n      </div>\n    </header>\n    <!-- Banner section-->\n    <!-- Main-->\n    <div class=\"l-block\"></div>\n    <div class=\"ed-grid cols-l-4 main-section l-big-section\">\n      <aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\">\n        <div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div>\n        <nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\">\n          <ul>\n                    <section class=\"s-mb-2 m-mb-3\">\n                      <p class=\"t5 s-mb-1\">Comenzar con EDgrid</p>\n                              <li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li>\n                    </section>\n                    <section class=\"s-mb-2 m-mb-3\">\n                      <p class=\"t5 s-mb-1\">Filas y columnas</p>\n                              <li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li>\n                    </section>\n                    <section class=\"s-mb-2 m-mb-3\">\n                      <p class=\"t5 s-mb-1\">Layout</p>\n                              <li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li>\n                    </section>\n                    <section class=\"s-mb-2 m-mb-3\">\n                      <p class=\"t5 s-mb-1\">Helpers y prototipado</p>\n                              <li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li>\n                    </section>\n                    <section class=\"s-mb-2 m-mb-3\">\n                      <p class=\"t5 s-mb-1\">Componentes</p>\n                              <li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li>\n                              <li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li>\n                    </section>\n          </ul>\n        </nav>\n      </aside>\n      <div class=\"span-l-3\">\n        <main itemscope itemprop=\"mainContentOfPage\" role=\"main\"></main>\n      </div>\n    </div>\n    <!-- Footer-->\n    <footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\">\n      <div class=\"ed-container main-footer--content\">\n        <div class=\"ed-item l-50 s-to-center s-center\">\n          <p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-slack space\" href=\"https://join.slack.com/t/edlabs/shared_invite/enQtMjk1MjcxOTUzMzgxLTgyY2MwZjY3ODRhNGQyMWJkOWRkOGFlZjQ1YjJiYjAxOTMwNGIzMGViMjc5ODZmMmI3ZGFlNGNiMTEwNGIyNzc\" target=\"_blank\" title=\"Slack de EDgrid\"></a><a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p>\n          <p class=\"smaller l-block\">EDgrid es una marca de <a href=\"https://ed.team\" target=\"_blank\">EDteam</a>.</p>\n          <div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div>\n        </div>\n      </div>\n    </footer>\n    <script src=\"/js/scripts.js?t=1599325715020\"></script>\n  </body>\n</html>"
  },
  {
    "path": "docs/documentacion/index.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Documentación</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Puede usar EDgrid con CSS y Sass.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Documentación\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Puede usar EDgrid con CSS y Sass.\"><meta property=\"og:url\" content=\"/documentacion\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Documentación\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Puede usar EDgrid con CSS y Sass.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><div class=\"main-banner background s-py-4 grey-700 l-block img-container dark-color\"><div class=\"ed-grid lg-grid-6\"><div class=\"lg-cols-4 lg-x-2 s-center\"><div class=\"main-banner__data\"><div class=\"t1 s-mb-2\"><span class=\"color white-color\">Documentación</span></div><p class=\"color white-color s-opacity-8 s-mb-0\">EDgrid es muy fácil de aprender. En una hora ya lo estará usando en sus proyectos</p></div></div></div></div><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Comenzar con EDgrid</h1>\n<p>EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente.</p>\n<p>EDgrid es un proyecto de <a href=\"https://ed.team\">EDteam</a> usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.</p>\n<p>Si encuentra algun error o tiene sugerencias de mejoras, <a href=\"https://github.com/escueladigital/EDgrid/issues\">puede escribirlas en Github</a>.</p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/instalacion.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Base (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta property=\"og:url\" content=\"/documentacion/instalacion.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Comenzar con EDgrid</h1>\n<p>EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente. En una hora ya lo estará usando en sus proyectos.</p>\n<p>Creado por <a href=\"https://ed.team\">EDteam</a> y usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.</p>\n<p>Si encuentra algun error o tiene sugerencias de mejoras, <a href=\"https://github.com/escueladigital/EDgrid/issues\">puede escribirlas en Github</a>.</p>\n<h2>Instalación</h2>\n<p>Puede usar EDgrid con <a href=\"https://ed.team/cursos/sass\">Sass</a> (recomendado) y <a href=\"https://ed.team/cursos/css\">CSS</a>.</p>\n<h3>Instalación de versión Sass</h3>\n<p>Para instalar la versión Sass puede utilizar npm:</p>\n<pre><code class=\"language-bash\">npm install --save-dev ed-grid\n</code></pre>\n<p>También puede usar yarn:</p>\n<pre><code class=\"language-bash\">yarn add ed-grid --dev\n</code></pre>\n<p>Posteriormente, impórtelo en su estructura de archivos Sass</p>\n<pre><code class=\"language-scss\">@import &quot;~ed-grid/ed-grid&quot;\n</code></pre>\n<h3>Instalación de versión CSS</h3>\n<p>Descargue la última <a href=\"\">versión CSS</a> de EDgrid e impórtela en su proyecto como cualquier otra hoja de estilos. También puede usar del CDN para importaciones rápidas.</p>\n<pre><code class=\"language-HTML\">&lt;link href=&quot;https://unpkg.com/ed-grid@3.0.0/src/css/ed-grid.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n</code></pre>\n<p>* <em>Al usar EDgrid en su versión CSS no podrá <a href=\"/documentacion/personalizar.html\">personalizar la librería</a>, utilizar el <a href=\"/documentacion/prototipado-avanzado.html\">prototipado avanzado</a> y compilar sólo el código necesario, entre otras opciones que sólo se pueden hacer con la versión de Sass</em></p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/layout-css-grid.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Flujo de trabajo (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Flujo de trabajo (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><meta property=\"og:url\" content=\"/flujo.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Flujo de trabajo (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Sistema de filas y columnas con CSS Grid</h1>\n<p>La versión 3 de EDgrid incluye la creación de layouts con CSS Grid, la que ofrece varias ventajas sobre los layouts con Flexbox.</p>\n<p>Esta versión se basa en las siguientes reglas:</p>\n<ol>\n<li>El contenedor define la cantidad de columnas en cada breakpoint</li>\n<li>Los items definen cuantas columnas de su contedor ocuparán</li>\n<li>Solo el contenedor tiene una clase definida <code>ed-grid</code>. Los items pueden ser cualquier elemento hijo directo de <code>ed-grid</code> (a diferencia de la versión con flexbox que exigía tener un <code>ed-item</code>).</li>\n<li>CSS Grid utiliza la propiedad <code>gap</code> para definir la separación entre tracks, lo que resuelve el problema de los contenedores anidados y los paddings (propio de layouts con floats y flexbox).</li>\n</ol>\n<h2>Contenedor ed-grid</h2>\n<p>En esta versión se usa <code>ed-grid</code> como contenedor y es en él donde debemos definir las columnas (es así como funciona CSS Grid).</p>\n<p>Para definir las columnas use la nomenclatura <code>breakpoint-grid-numero</code>.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid s-grid-2 lg-grid-4 xl-grid-10&quot;&gt;\n  &lt;!-- Este contenedor tiene 2 columnas en tamaño s, 4 columnas en tamaño lg y 10 columnas en tamaño xl --&gt;\n&lt;/div&gt;\n</code></pre>\n<h2>Items</h2>\n<p>Cualquier hijo directo de <code>ed-grid</code> es automáticamente un item del layout. Y automáticamente tomará una columna de su contenedor.</p>\n<pre><code class=\"language-html\">&lt;!-- Layout de tres columnas donde cada card ocupa una columna.\nNo tiene que hacer nada en los items. Solo definir las columnas en el contenedor --&gt;\n&lt;div class=&quot;ed-grid s-grid-3&quot;&gt;\n  &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;\n  &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;\n  &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n  <div class=\"article\">1</div>\n  <div class=\"article\">2</div>\n  <div class=\"article\">3</div>\n</div>\n</div>\n<h3>Definir cantidad de columnas que ocupa el item</h3>\n<p>Use la siguiente nomenclatura <code>breakpoint-cols-numero</code> Donde número es la cantidad de columnas.</p>\n<p>Por ejemplo, para crear un layout de sidebar al 25% y contenido al 75% el marcado sería el siguiente:</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid s-grid-4&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div class=&quot;s-cols-3&quot;&gt;2&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-4\">\n  <div>1</div>\n  <div class=\"s-cols-3\">2</div>\n</div>\n</div>\n<h3>Definir en qué columna inicia un item</h3>\n<p>Use la nomenclatura: <code>breakpoint-x-numero</code> para indicar en qué columna iniciará un item.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid s-grid-4&quot;&gt;\n  &lt;div class=&quot;s-cols-3 s-x-2&quot;&gt;\n  Comienzo en la columna 2 y ocupo 3 columnas\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-4\">\n  <div class=\"s-cols-3 s-x-2\">\n  Comienzo en la columna 2 y ocupo 3 columnas\n  </div>\n</div>\n</div>\n<h3>Definir cantidad de filas que ocupa el item</h3>\n<p>Use la siguiente nomenclatura <code>breakpoint-rows-numero</code> Donde número es la cantidad de filas.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid rows-gap s-grid-2&quot;&gt;\n  &lt;div class=&quot;s-rows-2&quot;&gt;1&lt;/div&gt;\n  &lt;div &gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-2\">\n  <div class=\"s-rows-2\">1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n</div>\n<h3>Definir en qué fila inicia un item</h3>\n<p>Use la nomenclatura: <code>breakpoint-y-numero</code> para indicar en qué columna iniciará un item.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid rows-gap s-grid-4&quot;&gt;\n  &lt;div class=&quot;s-rows-2&quot;&gt;1&lt;/div&gt;\n  &lt;div class=&quot;&quot;&gt;2&lt;/div&gt;\n  &lt;div class=&quot;s-y-2 s-x-2 s-cols-2&quot;&gt;3&lt;/div&gt;\n  &lt;div&gt;4&lt;/div&gt;\n  &lt;div class=&quot;s-rows-2&quot;&gt;5&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-4\">\n  <div class=\"s-rows-2\">1</div>\n  <div class=\"\">2</div>\n  <div class=\"s-y-2 s-x-2 s-cols-2\">3</div>\n  <div>4</div>\n  <div class=\"s-rows-2\">5</div>\n</div>\n</div>\n<h2>Anidar contenedores</h2>\n<p>Puesto que CSS Grid define la separación entre tracks internamente, puede anidar contenedores como desee, sin restricciones.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid lg-grid-3&quot;&gt;\n    &lt;div class=&quot;s-cols-2 ed-grid s-grid-3 rows-gap&quot;&gt;\n        &lt;div class=&quot;s-cols-3&quot;&gt;1&lt;/div&gt;\n        &lt;div&gt;2&lt;/div&gt;\n        &lt;div&gt;3&lt;/div&gt;\n        &lt;div&gt;4&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div&gt;5&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n    <div class=\"s-cols-2 ed-grid s-grid-3 rows-gap\">\n      <div class=\"s-cols-3\">1</div>\n      <div>2</div>\n      <div>3</div>\n      <div>4</div>\n    </div>\n    <div>5</div>\n</div>\n</div>\n<h2>Separación entre filas y columnas</h2>\n<p>De forma predeterminada las columnas tienen una separacion de <code>1rem</code> en tamaños móviles (s,m) y <code>2rem</code> en tamaños de escritorio (lg,xl). Si desea agregar una separación entre filas (igual a la de las columnas), agregue la clase <code>rows-gap</code> al contenedor.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid rows-gap s-grid-2 m-grid-4 lg-grid-6&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n  &lt;div&gt;4&lt;/div&gt;\n  &lt;div&gt;5&lt;/div&gt;\n  &lt;div&gt;6&lt;/div&gt;\n  &lt;div&gt;7&lt;/div&gt;\n  &lt;div&gt;8&lt;/div&gt;\n  &lt;div&gt;9&lt;/div&gt;\n  &lt;div&gt;10&lt;/div&gt;\n  &lt;div&gt;11&lt;/div&gt;\n  &lt;div&gt;12&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div>4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n  <div>11</div>\n  <div>12</div>\n</div>\n</div>\n<p>Puede cambiar la separación para todos los <code>ed-grid</code> redefiniendo la variable <code>$gap</code> antes de importar EDgrid.</p>\n<pre><code class=\"language-scss\">$gap: 1rem; // En tamaños de escritorio se multiplica por 2\n@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n<p>O puede cambiar la separación para un <code>ed-grid</code> especifico usando la nomenclatura <code>breakpoint-gap-numero</code>. El número va de 0 a 4 con separaciones de <code>.5rem</code>.</p>\n<p>* <em>Puede usar el numero <code>05</code> para crear separaciones de <code>.25rem</code>. Ejemplo: <code>s-gap-05</code>.</em></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid rows-gap s-gap-05 m-gap-1 s-grid-2 m-grid-4 lg-grid-6&quot;&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n  &lt;div class=&quot;lg-cols-3&quot;&gt;4&lt;/div&gt;\n  &lt;div&gt;5&lt;/div&gt;\n  &lt;div&gt;6&lt;/div&gt;\n  &lt;div&gt;7&lt;/div&gt;\n  &lt;div&gt;8&lt;/div&gt;\n  &lt;div&gt;9&lt;/div&gt;\n  &lt;div&gt;10&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-gap-05 m-gap-1 s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div class=\"lg-cols-3\">4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n</div>\n</div>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/layout-flexbox.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Flujo de trabajo (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Flujo de trabajo (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><meta property=\"og:url\" content=\"/flujo.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Flujo de trabajo (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Sistema de columnas con flexbox</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#ed-container-y-ed-item\">ed-container y ed-item</a></li>\n<li><a href=\"#ancho-de-los-ed-container\">Ancho de los ed-container</a></li>\n<li><a href=\"#ancho-de-los-ed-item\">Ancho de los ed-item</a>\n<ul>\n<li><a href=\"#1-porcentajes\">1. Porcentajes</a></li>\n<li><a href=\"#2-fracciones\">2. Fracciones</a></li>\n</ul>\n</li>\n<li><a href=\"#anidar-contenedores-e-items\">Anidar contenedores e items</a></li>\n<li><a href=\"#avanzado-crea-tus-propios-contenedores-e-items\">Avanzado: crea tus propios contenedores e items</a></li>\n<li><a href=\"#avanzado-crear-contenedores-e-items-con-sass-sin-clases-html\">Avanzado: crear contenedores e items con Sass (sin clases HTML)</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>EDgrid es una librería para construir layouts. Puede construirlos con Flexbox o <a href=\"/documentacion/layout-css-grid.html\">CSS Grid</a>.</p>\n<p><a id=\"markdown-ed-container-y-ed-item\" name=\"ed-container-y-ed-item\"></a></p>\n<h2>ed-container y ed-item</h2>\n<p>Para construir layouts con Flexbox y EDgrid debe definir contenedores con la clase <code>ed-container</code> e items con la clase <code>ed-item</code>. Con las siguientes reglas:</p>\n<ol>\n<li>Un <code>ed-item</code> no puede ser huérfano. Siempre debe ser hijo de un <code>ed-container</code></li>\n<li>Un <code>ed-container</code> debe tener al menos un <code>ed-item</code> como hijo directo.</li>\n<li>Los <code>ed-container</code> y <code>ed-item</code> son contenedores para crear layout. No agregue contenido directamente en ellos.</li>\n</ol>\n<pre><code class=\"language-html\">&lt;!-- Bien --&gt;\n&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;div class=&quot;ed-item&quot;&gt;\n        &lt;article&gt;\n            &lt;p&gt;\n                En un lugar de la Mancha, de cuyo nombre no quiero acordarme,\n                no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,\n                adarga antigua, rocín flaco y galgo corredor.\n            &lt;/p&gt;\n        &lt;/article&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;!-- Mal --&gt;\n&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;article class=&quot;ed-item&quot;&gt;\n        En un lugar de la Mancha, de cuyo nombre no quiero acordarme,\n        no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,\n        adarga antigua, rocín flaco y galgo corredor.\n    &lt;/article&gt;\n&lt;/div&gt;\n</code></pre>\n<p><a id=\"markdown-ancho-de-los-ed-container\" name=\"ancho-de-los-ed-container\"></a></p>\n<h2>Ancho de los ed-container</h2>\n<p>Los <code>ed-container</code> tienen un ancho predeterminado de 100% y un ancho máximo de <code>1200px</code>. Así cuando la pantalla es mayor a esta medida, el <code>ed-container</code> queda fijo y se centra horizontalmente.</p>\n<p>Si desea un <code>ed-container</code> que mida siempre el 100% de la pantalla agregue la clase <code>full</code>.</p>\n<pre><code class=\"language-markup\">&lt;div class=&quot;ed-container full&quot;&gt;\n    &lt;div class=&quot;ed-item&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Si desea personalizar el ancho máximo del <code>ed-container</code> redefina la variable Sass <code>$max-width</code> antes de importar EDgrid.</p>\n<pre><code class=\"language-scss\">$max-width: 1400px;\n@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n<p><a id=\"markdown-ancho-de-los-ed-item\" name=\"ancho-de-los-ed-item\"></a></p>\n<h2>Ancho de los ed-item</h2>\n<p>Cada <code>ed-item</code> tiene 100% del ancho de su padre a menos que se especifique lo contrario (a través de clases). Las clases para definir el ancho son de dos tipos: porcentajes y fracciones.</p>\n<p><a id=\"markdown-1-porcentajes\" name=\"1-porcentajes\"></a></p>\n<h3>1. Porcentajes</h3>\n<p>La nomenclatura de clase es <code>breakpoint-numero</code> Donde número es cualquier número múltiplo de 5 entre 0 y 100. Así que la clase <code>lg-75</code> significa que el elemento tendrá 75% del ancho de su padre a partir del breakpoint <code>lg</code>.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;div class=&quot;ed-container&quot;&gt;\n      &lt;div class=&quot;ed-item s-30 lg-50&quot;&gt;1&lt;/div&gt;\n      &lt;div class=&quot;ed-item s-50 lg-25&quot;&gt;2&lt;/div&gt;\n      &lt;div class=&quot;ed-item s-20 lg-25&quot;&gt;3&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n  <div class=\"ed-item s-30 lg-50\">1</div>\n  <div class=\"ed-item s-50 lg-25\">2</div>\n  <div class=\"ed-item s-20 lg-25\">3</div>\n</div>\n</div>\n<ul>\n<li>Como puede ver, las separaciones entre columnas se crean con paddings laterales.</li>\n<li>Si no desea separaciones con paddings (que dan problemas en layouts complejos) use nuestra versión con <a href=\"/documentacion/layout-css-grid.html\">CSS Grid</a></li>\n<li>Si la suma de los anchos da más de 100, habrá saltos de fila. Así puede crear layouts más complejos sin crear nuevos contenedores.</li>\n</ul>\n<p><a id=\"markdown-2-fracciones\" name=\"2-fracciones\"></a></p>\n<h3>2. Fracciones</h3>\n<p>Si quiere dividir el ancho entre 3 o 6 necesitará fracciones. La nomenclatura es <code>breakpoint-numerador-denominador</code>. Por ejemplo: <code>lg-1-3</code> significa un tercio de ancho (33.33%) a partir del breakpoint <code>lg</code> (1024px). Mientras que <code>xl-2-3</code> significa dos tercios a partir del breakpoint <code>xl</code> (1440px).</p>\n<pre><code class=\"language-html\">&lt;!-- Layout de tres columnas a partir de 1024px de pantalla --&gt;\n&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;div class=&quot;ed-item s-1-3&quot;&gt;1&lt;/div&gt;\n    &lt;div class=&quot;ed-item s-1-3&quot;&gt;2&lt;/div&gt;\n    &lt;div class=&quot;ed-item s-1-3&quot;&gt;3&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n<div class=\"ed-item s-1-3\">1</div>\n<div class=\"ed-item s-1-3\">2</div>\n<div class=\"ed-item s-1-3\">3</div>\n</div>\n</div>\n<p><a id=\"markdown-anidar-contenedores-e-items\" name=\"anidar-contenedores-e-items\"></a></p>\n<h2>Anidar contenedores e items</h2>\n<p>Si necesita anidar elementos para crear layouts más complejos tenga en cuenta las siguientes reglas:</p>\n<ol>\n<li>No cree un <code>ed-container</code> como hijo de un <code>ed-item</code></li>\n<li>Para anidar, agregue la clase <code>ed-container</code> a un <code>ed-item</code> entonces ya podrá crear nuevos <code>ed-item</code> nietos.</li>\n</ol>\n<pre><code class=\"language-html\">&lt;!-- Bien --&gt;\n&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;div class=&quot;ed-item s-60&quot;&gt;1&lt;/div&gt;\n    &lt;div class=&quot;ed-item s-40 ed-container&quot;&gt;\n        &lt;div class=&quot;ed-item s-50&quot;&gt;2&lt;/div&gt;\n        &lt;div class=&quot;ed-item s-50&quot;&gt;3&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;!-- Mal --&gt;\n&lt;div class=&quot;ed-container&quot;&gt;\n    &lt;div class=&quot;ed-item s-1-3&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;ed-item s-2-3&quot;&gt;\n        &lt;div class=&quot;ed-container&quot;&gt;\n            &lt;div class=&quot;ed-item s-50&quot;&gt;&lt;/div&gt;\n            &lt;div class=&quot;ed-item s-50&quot;&gt;&lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n    <div class=\"ed-item s-60\">1</div>\n    <div class=\"ed-item s-40 ed-container\">\n        <div class=\"ed-item s-50\">2</div>\n        <div class=\"ed-item s-50\">3</div>\n    </div>\n</div>\n</div>\n<p><a id=\"markdown-avanzado-crea-tus-propios-contenedores-e-items\" name=\"avanzado-crea-tus-propios-contenedores-e-items\"></a></p>\n<h2>Avanzado: crea tus propios contenedores e items</h2>\n<p>Si no desea usar las clases <code>ed-container</code> y <code>ed-item</code> puede definir las suyas. Simplemente redefina las variables <code>$container</code> y <code>$item</code> antes de importar EDgrid.</p>\n<pre><code class=\"language-scss\">$container: row;\n$item: column;\n@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n<p><a id=\"markdown-avanzado-crear-contenedores-e-items-con-sass-sin-clases-html\" name=\"avanzado-crear-contenedores-e-items-con-sass-sin-clases-html\"></a></p>\n<h2>Avanzado: crear contenedores e items con Sass (sin clases HTML)</h2>\n<p>Si no desea tocar el marcado HTML (o no tiene acceso a el por restricciones del proyecto) puede usar mixins de Sass para definir sus contenedores e items.</p>\n<ul>\n<li>Para los contenedores, use el mixin <code>ed-container</code>.</li>\n<li>Para los items, use el mixin <code>ed-item($s,$m,$lg,$xl)</code> Los parámetros definen el ancho en cada breakpoint:</li>\n<li>Puede omitirlos todos y el ancho será siempre 100%</li>\n<li>Un ancho declarado se herederá en los breakpoints superiores.</li>\n<li>Puede usar fracciones como parámetro. Por ejemplo: <code>1/3</code></li>\n</ul>\n<pre><code class=\"language-scss\">.main-page {\n@include ed-container\n}\n\n.sidebar {\n@include ed-item(100,100,1/3)\n}\n\n.content {\n@include ed-item(100,100,2/3)\n}\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/layout.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Base (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta property=\"og:url\" content=\"/base.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Layout</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#secciones\">Secciones</a>\n<ul>\n<li><a href=\"#anular-espaciado-entre-secciones\">Anular espaciado entre secciones</a></li>\n<li><a href=\"#valores-de-los-espaciados-verticales\">Valores de los espaciados verticales</a></li>\n</ul>\n</li>\n<li><a href=\"#espaciado-vertical-entre-contenido\">Espaciado vertical entre contenido</a>\n<ul>\n<li><a href=\"#titulos\">Titulos</a></li>\n<li><a href=\"#contenido\">Contenido</a></li>\n</ul>\n</li>\n<li><a href=\"#m%C3%A1rgenes\">Márgenes</a>\n<ul>\n<li><a href=\"#m%C3%A1rgenes-negativos\">Márgenes negativos</a></li>\n</ul>\n</li>\n<li><a href=\"#paddings\">Paddings</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>EDgrid agrega clases para crear separaciones exteriores (margin) e interiores (padding) para crear layouts armoniosos y bien distribuidos.</p>\n<p>Para seguir buenas prácticas, considere lo siguiente:</p>\n<ul>\n<li>Las clases de layout comienzan con <code>l-</code>. *Además todos l</li>\n<li>Los espacios verticales se crean solamente con <code>margin-bottom</code>.</li>\n<li>La propiedad <code>margin-top</code> se usa solamente en negativo para cancelar una separación vertical</li>\n<li>Los espacios horizontales se crean solamente con <code>margin-right</code></li>\n<li>La propiedad <code>margin-left</code> se usa solo en negativo para cancelar una separación horizontal.</li>\n<li>Evite usar css para márgenes y paddings, utilice las clases de EDgrid</li>\n</ul>\n<p><a id=\"markdown-secciones\" name=\"secciones\"></a></p>\n<h2>Secciones</h2>\n<p>En EDgrid existen tres tipos de secciones que se indican con las siguientes clases.</p>\n<ul>\n<li><code>l-block</code> Bloques pequeños como widgets, cards, separadores.</li>\n<li><code>l-section</code> Sección grande de contenido.</li>\n<li><code>l-big-section</code> Igual que el anterior pero cuando se quiere dar una separación mayor.</li>\n</ul>\n<p><a id=\"markdown-anular-espaciado-entre-secciones\" name=\"anular-espaciado-entre-secciones\"></a></p>\n<h3>Anular espaciado entre secciones</h3>\n<p>Si en algun caso desea anular el espaciado de una seccion con la anterior. Use las siguientes clases:</p>\n<ul>\n<li><code>cancel-l-block</code> Cancela margin-bottom de hermano anterior <code>l-block</code></li>\n<li><code>cancel-l-section</code> Cancela margin-bottom de hermano anterior <code>l-section</code></li>\n<li><code>cancel-l-big-section</code> Cancela margin-bottom de hermano anterior <code>l-big-section</code></li>\n</ul>\n<p><a id=\"markdown-valores-de-los-espaciados-verticales\" name=\"valores-de-los-espaciados-verticales\"></a></p>\n<h3>Valores de los espaciados verticales</h3>\n<p>EDgrid usa la variable CSS <code>--vertical-block-space</code> cuyo valor cambia según el breakpoint</p>\n<pre><code class=\"language-scss\">:root {\n  --vertical-block-space   : #{$l-unit * 2};  // 1rem\n\n  @include from(lg) {\n    --vertical-block-space : #{$l-unit * 4};  // 2rem\n  }\n}\n</code></pre>\n<p>El código que crea las separaciones es el siguiente.</p>\n<pre><code class=\"language-scss\">// Block\n.l-block {\n  margin-bottom : var(--vertical-block-space); // 1rem mobile, 2rem desktop\n}\n\n.cancel-l-block {\n  margin-top : calc(var(--vertical-block-space) * -1);\n}\n\n// Section\n.l-section {\n  margin-bottom : calc(var(--vertical-block-space) * 2); // 2rem mobile, 4rem desktop\n}\n\n.cancel-l-section {\n  margin-top : calc(var(--vertical-block-space) * -2); \n}\n\n// Big section\n.l-big-section {\n  margin-bottom : calc(var(--vertical-block-space) * 4); // 4rem mobile, 8rem desktop\n}\n\n.cancel-l-big-section {\n  margin-top : calc(var(--vertical-block-space) * -4);\n}\n</code></pre>\n<p><a id=\"markdown-espaciado-vertical-entre-contenido\" name=\"espaciado-vertical-entre-contenido\"></a></p>\n<h2>Espaciado vertical entre contenido</h2>\n<p>EDgrid incluye espaciado vertical armonioso entre contenido (parrafos, titulos, listas, etc). No tiene que hacer nada. Solo escribir su contenido.</p>\n<p><a id=\"markdown-titulos\" name=\"titulos\"></a></p>\n<h3>Titulos</h3>\n<pre><code class=\"language-scss\">:root {\n  --vertical-content-space : 1rem;\n}\n// Encabezados\nh1, h2, h3, h4, h5, h6 {\n  margin-top    : 0;\n  margin-bottom : var(--vertical-content-space);\n}\n\nh1 {\n  margin-bottom : calc(var(--vertical-content-space) * 1.5) !important;\n}\n</code></pre>\n<p><a id=\"markdown-contenido\" name=\"contenido\"></a></p>\n<h3>Contenido</h3>\n<p>La norma recomienda encerrar cada sección en una etiqueta section. Pero en la práctica es dificil conseguirlo siempre así que la presenciad e un titulo indica el cambio de sección y por eso se le agrega una separación vertical mayor con el hermano anterior.</p>\n<pre><code class=\"language-scss\">:root {\n  --vertical-content-space : 1rem;\n}\n\np,\nvideo,\nblockquote,\narticle,\nsection,\nform,\nfigure,\niframe,\nul,\nol,\npre,\nhr,\ndl,\naddress {\n  margin-top    : 0;\n  margin-bottom : var(--vertical-content-space);\n\n  + h2 {\n    padding-top : calc(var(--vertical-content-space) * 1.5);\n  }\n\n  + h3 {\n    padding-top : var(--vertical-content-space);\n  }\n}\n</code></pre>\n<p><a id=\"markdown-márgenes\" name=\"márgenes\"></a></p>\n<h2>Márgenes</h2>\n<p>Use las clases de márgenes para separar elementos. La nomenclatura es la siguiente <code>breakpoint-mr-numero</code> y <code>breakpoint-mb-numero</code> Donde <code>mr</code> es <code>margin-right</code> y <code>mb</code> es <code>margin-bottom</code>.</p>\n<p>El número va de 0 a 4 con separaciones de <code>.5rem</code> Por ejemplo <code>lg-mb-0</code> significa <code>margin-bottom:0</code> a partir del breakpoint <code>lg</code>. Y <code>m-br-4</code> sinifica <code>margin-right: 2rem</code> a partir del breakpoint <code>m</code>.</p>\n<p>* <em>Puede usar el numero <code>05</code> para crear separaciones de <code>.25rem</code>. Ejemplo: <code>s-mb-05</code>.</em></p>\n<pre><code class=\"language-html\">&lt;img alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; width=&quot;200&quot;&gt;\n&lt;img alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; width=&quot;200&quot;&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n</div>\n<p>Usando margenes</p>\n<pre><code class=\"language-html\">&lt;img class=&quot;m-mr-2 s-mb-2&quot; alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; width=&quot;200&quot;&gt;\n&lt;img alt=&quot;Logotipo de EDgrid&quot; src=&quot;/assets/img/EDgrid-logo.svg&quot; width=&quot;200&quot;&gt;\n</code></pre>\n<div class=\"ed-grid-demo s-pxy-1\">\n<img class=\"m-mr-2 s-mb-2\" alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n</div>\n<p><a id=\"markdown-márgenes-negativos\" name=\"márgenes-negativos\"></a></p>\n<h3>Márgenes negativos</h3>\n<p>Con la misma nomenclatura puede crear márgenes superiores <code>margin-top</code> e izquierdos <code>margin-left</code> pero estos siempre serán negativos y debe usarlos para cancelar una separación con un hermano anterior.</p>\n<pre><code class=\"language-html\">&lt;h1&gt;Bienvenidos a EDteam&lt;/h1&gt;\n&lt;p&gt;Este es un subtítulo pero aparecerá muy abajo del título&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo s-pxy-1\">\n<h1>Bienvenidos a EDteam</h1>\n<p>Este es un subtítulo pero aparecerá muy abajo del título</p>\n</div>\n<p>Usando márgenes negativos:</p>\n<pre><code class=\"language-html\">&lt;h1&gt;Bienvenidos a EDteam&lt;/h1&gt;\n&lt;p class=&quot;s-mt-3&quot;&gt;Este es un subtítulo con un margen superior negativo&lt;/p&gt;\n</code></pre>\n<p>Ejemplo:</p>\n<div class=\"ed-grid-demo s-pxy-1\">\n<h1>Bienvenidos a EDteam</h1>\n<p class=\"s-mt-3\">Este es un subtítulo con un margen superior negativo</p>\n</div>\n<p><a id=\"markdown-paddings\" name=\"paddings\"></a></p>\n<h2>Paddings</h2>\n<p>Los paddings agregan una separación interna y tienen la siguiente nomenclatura de clases: <code>breakpoint-p[direction]-numero</code></p>\n<p>Donde <code>direction</code> puede ser <code>t</code> (top), <code>r</code> (right), <code>b</code> (bottom), <code>l</code> (left). Por ejemplo: <code>xl-pb-4</code>. Al igual que en margin, los números van de 0 a 4 indicando separaciones de <code>.5rem</code>.</p>\n<ul>\n<li>Para paddings verticales (top y bottom a la vez) use <code>breakpoint-py-numero)</code>.</li>\n<li>Para paddings horizontales (left y right a la vez) use <code>breakpoint-px-numero</code></li>\n<li>Para paddings en las cuatro direcciones use <code>breakpoint-pxy-numero</code></li>\n</ul>\n<p>* <em>Puede usar el numero <code>05</code> para crear paddings de <code>.25rem</code>. Ejemplo: <code>s-py-05</code>.</em></p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/mediaqueries.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Mediaqueries (Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Con ed-grid escribir media queries es tan sencillo como usar cualquiera de estos tres mixins from($bp) to($bp) fromTo($from,$to) Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,l,xl o números especificados en px, em o rem. from($bp) remplaza al antiguo desde($size) significa que los estilos se aplicarán desde ese breakpoint en adelante.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Mediaqueries (Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Con ed-grid escribir media queries es tan sencillo como usar cualquiera de estos tres mixins from($bp) to($bp) fromTo($from,$to) Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,l,xl o números especificados en px, em o rem. from($bp) remplaza al antiguo desde($size) significa que los estilos se aplicarán desde ese breakpoint en adelante.\"><meta property=\"og:url\" content=\"/mediaqueries.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Mediaqueries (Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Con ed-grid escribir media queries es tan sencillo como usar cualquiera de estos tres mixins from($bp) to($bp) fromTo($from,$to) Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,l,xl o números especificados en px, em o rem. from($bp) remplaza al antiguo desde($size) significa que los estilos se aplicarán desde ese breakpoint en adelante.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Mediaqueries (Sass)</h1>\n<p>EDgrid incluye mixins para crear mediaqueries fácilmente:</p>\n<ol>\n<li><code>from($bp)</code><br>\nPara tamaños mayores al breakpoint (parámetro)</li>\n<li><code>to($bp)</code><br>\nPara tamaños menores al breakpoint (parámetro)</li>\n<li><code>fromTo($from,$to)</code><br>\nPara tamaños comprendidos entre los dos parámetros.</li>\n</ol>\n<p>Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid <code>s,m,lg,xl</code> o números especificados en <code>px</code>, <code>em</code> o <code>rem</code>.</p>\n<p>Ejemplos:</p>\n<pre><code class=\"language-scss\">// Ejemplo mixin from()\n.from {\n  color: red;\n  \n  @include from(m) {\n    color: blue;\n  }\n\n  @include from(700px) {\n    color: red\n  }\n}\n\n// Ejemplo mixin to()\n.to {\n  display: flex;\n  \n  @include to(l) {\n    display: block\n  }\n}\n\n// Ejemplo mixin from-to()\n.from-to {\n  display: block;\n  \n  @include from-to(m,800px) {\n    display: none\n  }\n  \n}\n</code></pre>\n<p>Compila a:</p>\n<pre><code class=\"language-scss\">// From\n.from{\n  color:red;\n}\n\n@media screen and (min-width:40em){\n  .from{\n    color:blue;\n  }\n}\n\n@media screen and (min-width:700px){\n  .from{\n    color:red;\n  }\n}\n\n// To\n.to {\n  display:flex;\n}\n\n@media screen and (max-width:64em){\n  .to {\n    display:block;\n  }\n}\n\n// From to\n.from-to {\n  display:block;\n}\n\n@media screen and (min-width:40em) and (max-width:800px){\n  .from-to {\n    display:none;\n  }\n}\n\n</code></pre>\n<h2>Control de errores</h2>\n<p>Si los parámetros pasados a estos mixins no son válidos EDgrid lanzará un mensaje en terminal indicando el error.</p>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/menu-responsive.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Menú responsive (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Componente menú responsive creado con EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Menú responsive (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Componente menú responsive creado con EDgrid.\"><meta property=\"og:url\" content=\"/menu-responsive.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Menú responsive (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Componente menú responsive creado con EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Menú responsive</h1>\n<p>Un menú responsive es un buen ejemplo de cómo podemos integrar EDgrid con código ajeno a la librería.</p>\n<p>Toda la estructura y distribución se harán desde el marcado con la nomenclatura que ya conocemos y a la vez se usarán los mixins que otorga la librería para los estilos en Sass.</p>\n<div class=\"l-section\"></div>\n<div class=\"to-s\">\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <symbol id=\"notes\" viewbox=\"0 0 24 24\">\n    <rect fill=\"none\" height=\"24\" width=\"24\"></rect>\n    <path d=\"M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z\"></path>\n  </symbol>\n  <symbol id=\"studies\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z\"></path>\n  </symbol>\n  <symbol id=\"courses\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z\"></path>\n  </symbol>\n  <symbol id=\"home\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"></path>\n  </symbol>\n</svg>\n</div>\n<div class=\"menu-responsive s-border l-block s-bg-white s-radius-1\">\n    <header class=\"ed-menu s-bg-grey s-py-2 s-px-2 lg-px-4\">\n      <div class=\"ed-grid lg-grid-5\">\n        <div class=\"s-cross-center s-main-center lg-main-start\">\n            <img class=\"logo\" src=\"https://ed.team/static/images/logo.svg\">\n        </div>\n        <nav class=\"nav lg-cols-4 s-cross-center ed-grid full\">\n          <ul class=\"menu s-main-distribute lg-to-right s-mb-0 s-pl-0 s-py-1\">\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center active\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#home\"></use>\n                </svg><span>Inicio</span></a></li>\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#studies\"></use>\n                </svg><span>Estudios</span></a></li>\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#courses\"></use>\n                </svg><span>Cursos</span></a></li>\n            <li><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#notes\"></use>\n                </svg><span>Notas</span></a></li>\n          </ul>\n        </nav>\n      </div>\n    </header>\n    <p class=\"s-pxy-4\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales convallis dui quis elementum. Aliquam erat neque, suscipit vitae nisi posuere, eleifend luctus enim. \n    <br/><br/>Praesent euismod rutrum dui, suscipit vulputate nisl tincidunt et. Aenean commodo ac ex id malesuada. Morbi luctus tempus venenatis. Integer non ante at diam cursus mattis sit amet a augue. \n    <br/><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempus justo sit amet velit porttitor pretium. Nam metus dolor, semper vitae dui ac, mattis varius nisi..</p>\n</div>\n<h3>HTML</h3>\n<pre><code class=\"language-html\">&lt;header class=&quot;ed-header s-bg-grey s-py-2&quot;&gt;\n  &lt;div class=&quot;ed-grid lg-grid-5&quot;&gt;\n    &lt;!-- Logo  --&gt;\n    &lt;div class=&quot;s-cross-center s-main-center lg-main-start&quot;&gt;\n        &lt;img class=&quot;logo&quot; src=&quot;https://ed.team/static/images/logo.svg&quot;&gt;\n    &lt;/div&gt;\n    &lt;nav class=&quot;nav lg-cols-4 s-cross-center ed-grid full&quot;&gt;\n      &lt;!--  Menú de navegación    --&gt;\n      &lt;ul class=&quot;menu s-main-distribute lg-to-right s-mb-0 s-pl-0 s-py-1&quot;&gt;\n        &lt;!--   Item de menú. Contiene link e ícono     --&gt;\n        &lt;li class=&quot;lg-mr-3&quot;&gt;\n          &lt;a class=&quot;link s-column s-cross-center active&quot; href=&quot;#&quot;&gt;\n            &lt;!--  El ícono sólo se mostrará en la versión móvil  --&gt;\n            &lt;svg class=&quot;icon to-lg s-mb-0&quot;&gt;\n              &lt;use href=&quot;#home&quot;&gt;&lt;/use&gt;\n            &lt;/svg&gt;\n            &lt;span&gt;Inicio&lt;/span&gt;\n          &lt;/a&gt;\n        &lt;/li&gt;\n        &lt;li class=&quot;lg-mr-3&quot;&gt;\n          &lt;a class=&quot;link s-column s-cross-center&quot; href=&quot;#&quot;&gt;\n            &lt;svg class=&quot;icon to-lg s-mb-0&quot;&gt;\n              &lt;use href=&quot;#studies&quot;&gt;&lt;/use&gt;\n            &lt;/svg&gt;\n            &lt;span&gt;Estudios&lt;/span&gt;\n          &lt;/a&gt;\n        &lt;/li&gt;\n        &lt;li class=&quot;lg-mr-3&quot;&gt;\n          &lt;a class=&quot;link s-column s-cross-center&quot; href=&quot;#&quot;&gt;\n            &lt;svg class=&quot;icon to-lg s-mb-0&quot;&gt;\n              &lt;use href=&quot;#courses&quot;&gt;&lt;/use&gt;\n            &lt;/svg&gt;\n            &lt;span&gt;Cursos&lt;/span&gt;\n          &lt;/a&gt;\n        &lt;/li&gt;\n        &lt;li&gt;\n          &lt;a class=&quot;link s-column s-cross-center&quot; href=&quot;#&quot;&gt;\n            &lt;svg class=&quot;icon to-lg s-mb-0&quot;&gt;\n              &lt;use href=&quot;#notes&quot;&gt;&lt;/use&gt;\n            &lt;/svg&gt;\n            &lt;span&gt;Notas&lt;/span&gt;\n          &lt;/a&gt;\n        &lt;/li&gt;\n      &lt;/ul&gt;\n    &lt;/nav&gt;\n  &lt;/div&gt;\n&lt;/header&gt;\n</code></pre>\n<h3>SCSS</h3>\n<p>La mayoría del siguiente código es para estética del menú.</p>\n<pre><code class=\"language-scss\">// Posicionamiento del header\n.ed-header {\n  position : fixed;\n  top      : 0;\n  width    : 100%;\n  z-index  : 100;\n\n  .logo { height : 2rem }\n\n  // Posicionamiento del nav\n  // Utilizamos el mixin to() de EDgrid para que sólo se aplique en móvil\n  .nav {\n      @include to(lg) { \n        position : fixed;\n        left     : 0;\n        bottom   : 0;\n        background : black;\n      }\n  }\n\n  .menu { list-style : none }\n \n   // Colores de links del menú\n  .link {\n    color : lightgrey;\n    &amp;.active { color : cornflowerblue }\n    @include from(lg) { color : grey }\n  }\n\n   // Estilos para los íconos\n  .icon {\n    --size : 1.5rem;\n    width  : var(--size);\n    height : var(--size);\n    fill   : currentColor;\n  }\n\n}\n</code></pre>\n<h3>SVG</h3>\n<p>Este componente utiliza íconos para su versión móvil. Puede crear un archivo SVG donde guarde todo el siguiente código o ponerlo al lado de la estructura del header en el HTML.</p>\n<pre><code class=\"language-svg\">&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;\n  &lt;symbol id=&quot;notes&quot; viewBox=&quot;0 0 24 24&quot;&gt;\n    &lt;rect fill=&quot;none&quot; height=&quot;24&quot; width=&quot;24&quot;&gt;&lt;/rect&gt;\n    &lt;path d=&quot;M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z&quot;&gt;&lt;/path&gt;\n  &lt;/symbol&gt;\n  &lt;symbol id=&quot;studies&quot; viewBox=&quot;0 0 24 24&quot;&gt;\n    &lt;path d=&quot;M0 0h24v24H0z&quot; fill=&quot;none&quot;&gt;&lt;/path&gt;\n    &lt;path d=&quot;M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z&quot;&gt;&lt;/path&gt;\n  &lt;/symbol&gt;\n  &lt;symbol id=&quot;courses&quot; viewBox=&quot;0 0 24 24&quot;&gt;\n    &lt;path d=&quot;M0 0h24v24H0V0z&quot; fill=&quot;none&quot;&gt;&lt;/path&gt;\n    &lt;path d=&quot;M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z&quot;&gt;&lt;/path&gt;\n  &lt;/symbol&gt;\n  &lt;symbol id=&quot;home&quot; viewBox=&quot;0 0 24 24&quot;&gt;\n    &lt;path d=&quot;M0 0h24v24H0z&quot; fill=&quot;none&quot;&gt;&lt;/path&gt;\n    &lt;path d=&quot;M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z&quot;&gt;&lt;/path&gt;\n  &lt;/symbol&gt;\n&lt;/svg&gt;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/menus.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Uso con CSS (cssCore)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Con ed-grid puede crear menus responsive fácilmente. Basta con crear una lista ul y los enlaces dentro de cada li. Uso con CSS (cssCore) Añada la clase ed-menu al ul de nivel superior. Añada la clase n-horizontal siendo n el breakpoint (s,m,l,xl) desde el cual el menú será horizontal. Añada alguna de las tres clases para cambiar el estilo: default nav-bar button-bar\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Uso con CSS (cssCore)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Con ed-grid puede crear menus responsive fácilmente. Basta con crear una lista ul y los enlaces dentro de cada li. Uso con CSS (cssCore) Añada la clase ed-menu al ul de nivel superior. Añada la clase n-horizontal siendo n el breakpoint (s,m,l,xl) desde el cual el menú será horizontal. Añada alguna de las tres clases para cambiar el estilo: default nav-bar button-bar\"><meta property=\"og:url\" content=\"/menus.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Uso con CSS (cssCore)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Con ed-grid puede crear menus responsive fácilmente. Basta con crear una lista ul y los enlaces dentro de cada li. Uso con CSS (cssCore) Añada la clase ed-menu al ul de nivel superior. Añada la clase n-horizontal siendo n el breakpoint (s,m,l,xl) desde el cual el menú será horizontal. Añada alguna de las tres clases para cambiar el estilo: default nav-bar button-bar\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Menus</h1>\n<p>Con EDgrid puede crear menus responsive fácilmente. Basta con crear una lista <code>ul</code> y los enlaces dentro de cada <code>li</code>.</p>\n<h2>Uso con clases CSS</h2>\n<p>Añada la clase <code>ed-menu al</code> <code>ul</code> de nivel superior.</p>\n<p>Añada la clase <code>n-horizontal siendo</code> <code>n</code> el breakpoint (<code>s,m,l,xl</code>) desde el cual el menú será horizontal</p>\n<p>Añada alguna de las tres clases para cambiar el estilo: <code>default</code> <code>nav-bar</code> <code>button-bar</code></p>\n<pre><code class=\"language-markup\">&lt;ul class=&quot;ed-menu l-horizontal button-bar&quot;&gt;\n  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n<ul class=\"ed-menu l-horizontal button-bar\">\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n</ul>\n<h2>Uso con Sass</h2>\n<p>Si va a usar Sass, el marcado HTML debe ser el mismo.</p>\n<p>Incluya el mixin <code>edMenu($bp,$style)</code> al <code>ul</code> de nivel superior. Los parámetros son:</p>\n<ul>\n<li><code>$bp</code> breakpoint a partir del cual el menu será horizontal. Puede ser un breakpoint del core de ed-grid (<code>s,m,l,xl</code>) o un breakpoint válido en <code>px</code>, <code>em</code> o <code>rem</code>.</li>\n<li><code>$style</code> (opcional) puede ser <code>default</code>, <code>navBar</code> o <code>buttonBar</code></li>\n</ul>\n<pre><code class=\"language-scss\">.main-menu {\n  @include edMenu(l,navBar)\n}\n</code></pre>\n<h2>Trabajo en desarrollo</h2>\n<p>Este componente no está terminado y estos son algunos de los pendientes</p>\n<ul>\n<li>En la version CSS, debería funcionar sin tener que añadir una clase para horizontal (en caso se requiera siempre vertical)</li>\n<li>Scripts JS para activar y desactivar el menú en tamaños moviles</li>\n<li>Scripts JS para activar y desactivar subniveles en tamaños moviles</li>\n<li>Definir la personalizacion de colores para menu, items y links.</li>\n</ul>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/modo-dev.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Modo dev</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"El modo dev (modo desarrollo en versiones anteriores) es una característica exclusiva de ed-grid (no existente en otros frameworks) que nos permite saber el breakpoint actual y los componentes del layout (ed-container y ed-item). Al activarlo el navegador muestra el layout de la siguiente manera: En la parte superior en una franja azul se muestra el breakpoint actual y la leyenda de colores para el ed-container y los ed-item. El layout de la página es coloreado de la siguiente manera:\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Modo dev\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"El modo dev (modo desarrollo en versiones anteriores) es una característica exclusiva de ed-grid (no existente en otros frameworks) que nos permite saber el breakpoint actual y los componentes del layout (ed-container y ed-item). Al activarlo el navegador muestra el layout de la siguiente manera: En la parte superior en una franja azul se muestra el breakpoint actual y la leyenda de colores para el ed-container y los ed-item. El layout de la página es coloreado de la siguiente manera:\"><meta property=\"og:url\" content=\"/modo-dev.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Modo dev\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"El modo dev (modo desarrollo en versiones anteriores) es una característica exclusiva de ed-grid (no existente en otros frameworks) que nos permite saber el breakpoint actual y los componentes del layout (ed-container y ed-item). Al activarlo el navegador muestra el layout de la siguiente manera: En la parte superior en una franja azul se muestra el breakpoint actual y la leyenda de colores para el ed-container y los ed-item. El layout de la página es coloreado de la siguiente manera:\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Modo dev</h1>\n<p>El modo dev es una característica de EDgrid que nos permite saber el breakpoint actual y los componentes del layout (ed-grid, ed-container y ed-item).</p>\n<p>Al activarlo el navegador muestra el layout de la siguiente manera:</p>\n<ol>\n<li>Los <code>ed-container</code> y <code>ed-grid</code> tienen un borde rojo y en la parte superior una franja roja que imprime sus clases html.</li>\n<li>Los <code>ed-item</code> e hijos directos de <code>ed-grid</code> se colorean de azul y a su vez imprimen sus clases html en una franja azul.</li>\n</ol>\n<h4 class=\"s-mb-1\">Modo dev en Flexbox</h4>\n<div class=\"l-block\">\n    <div class=\"dev-demo\">\n        <div class=\"ed-container ed-grid-demo\">\n          <div class=\"ed-item s-30 lg-50\">1</div>\n          <div class=\"ed-item s-50 lg-25\">2</div>\n          <div class=\"ed-item s-20 lg-25\">3</div>\n        </div>\n    </div>\n</div>\n<h4 class=\"s-mb-1\">Modo dev en Grid</h4>\n<div class=\"l-block\">\n <div class=\"ed-grid-demo dev-demo\">\n     <div class=\"ed-grid s-grid-4\">\n       <div class=\"s-cols-2\">1</div>\n       <div class=\"s-cols-1\">2</div>\n       <div class=\"s-cols-1\">3</div>\n     </div>\n </div>\n</div>\n<h2>Activar modo dev con clases HTML</h2>\n<p>Basta con añadirle la clase <code>dev</code> al elemento body</p>\n<pre><code class=\"language-html\">&lt;body class=&quot;dev&quot;&gt;&lt;/body&gt;\n</code></pre>\n<h2>Activar el modo dev en Sass</h2>\n<p>Redefinir la variable <code>$dev</code> a <code>true</code> antes de importar <code>ed-grid</code></p>\n<pre><code class=\"language-scss\">$dev: true;\n@import 'path/ed-grid/ed-grid';\n</code></pre>\n<h2>Modo dev hover</h2>\n<p>Si sólo quieres inspeccionar un elemento a la vez y no toda la página, puedes usar el modo desarrollo con hover, donde sólo funcionará con <code>ed-grid</code>, <code>ed-container</code> y <code>ed-item</code> que tengan el estado de hover.</p>\n<h4 class=\"s-mb-1\">Modo dev con hover</h4>\n<div class=\"l-section\">\n <div class=\"ed-grid-demo dev-demo-hover\">\n     <div class=\"ed-grid s-grid-4\">\n       <div class=\"s-cols-2\">1</div>\n       <div class=\"s-cols-1\">2</div>\n       <div class=\"s-cols-1\">3</div>\n     </div>\n </div>\n</div>\n<h4 class=\"s-mb-1\">Activar modo dev hover con clases HTML</h4>\n<p>Basta con añadirle la clase <code>dev-hover</code> al elemento body</p>\n<pre><code class=\"language-html\">&lt;body class=&quot;dev-hover&quot;&gt;&lt;/body&gt;\n</code></pre>\n<h4 class=\"s-mb-1\">Activar modo dev hover en Sass</h4>\n<p>Redefinir la variable <code>$dev-hover</code> a <code>true</code> antes de importar <code>ed-grid</code> (no es necesario redifinir también la variable <code>$dev</code>).</p>\n<pre><code class=\"language-scss\">$dev-hover: true;\n@import 'path/ed-grid/ed-grid';\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/offset.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Offset (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries. Uso con CSS (cssCore) Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Offset (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries. Uso con CSS (cssCore) Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.\"><meta property=\"og:url\" content=\"/documentacion/offset.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Offset (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries. Uso con CSS (cssCore) Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Offset (Sass/CSS)</h1>\n<p>Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries.</p>\n<h2>Uso con CSS (cssCore)</h2>\n<p>Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.</p>\n<pre><code class=\"language-markup\">&lt;div class=&quot;selector s-offset-2-3 m-offset-50 l-offset-10&quot;&gt;&lt;/div&gt;\n</code></pre>\n<h2>Uso con Sass</h2>\n<p>Incluya el mixin <code>offset($s,$m,$l$xl)</code> donde cada parámetro es el offset en cada breakpoint de ed-grid. No hay restricciones a múltiplos de 5, incluso puede pasar fracciones.</p>\n<p>Tenga en cuenta que solo es obligatorio el primer parámetro.</p>\n<pre><code class=\"language-scss\">.selector {\n  @include offset(2/3,50,10);\n}\n</code></pre>\n<p>Compila a:</p>\n<pre><code class=\"language-scss\">.selector{\n  margin-left:66.66667%;\n}\n\n@media screen and (min-width:40em){\n  .selector{\n    margin-left:50%;\n  }\n}\n\n@media screen and (min-width:64em){\n  .selector{\n    margin-left:10%;\n  }\n}\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/personalizar.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Configurar (Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Si va a trabajar con Sass lo primero es importarlo en su proyecto. @import 'path/ed-grid/ed-grid' Sin embargo, ed-grid posee un archivo config.scss que define las variables y que pueden sobreescribirse (antes de la importación). Recomendamos fijarse en estas tres variables\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Configurar (Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Si va a trabajar con Sass lo primero es importarlo en su proyecto. @import 'path/ed-grid/ed-grid' Sin embargo, ed-grid posee un archivo config.scss que define las variables y que pueden sobreescribirse (antes de la importación). Recomendamos fijarse en estas tres variables\"><meta property=\"og:url\" content=\"/configurar.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Configurar (Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Si va a trabajar con Sass lo primero es importarlo en su proyecto. @import 'path/ed-grid/ed-grid' Sin embargo, ed-grid posee un archivo config.scss que define las variables y que pueden sobreescribirse (antes de la importación). Recomendamos fijarse en estas tres variables\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Personalizar EDgrid con Sass</h1>\n<p>EDgrid es altamente personalizable pues sus variables de configuración pueden ser sobreescritas. Para hacerlo, debe redefinirlas antes de importar EDgrid.</p>\n<pre><code class=\"language-scss\">// 1. Personalice sus variables\n$prototype: false;\n$dev: true;\n// 2. Importe EDgrid\n@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n<p>Tenga en cuenta que no siempre querrá personalizar EDgrid y le bastará con solo importar la librería.</p>\n<h2>Variables que puede personalizar.</h2>\n<p>A continuación se muestran las variables que puede redefinir, con su valor por defecto y la explicación de su función.</p>\n<pre><code class=\"language-scss\">// Breakpoints\n$breakpoints : (\n  s  : 0,\n  m  : 640px,\n  lg : 1024px,\n  xl : 1440px\n);\n\n$prototype        : true;         // Activa los estilos de prototipado\n$dev              : false;        // Activa los estilos para debuggin\n$dev-hover        : false;        // Estilos de debuggi sólo en hover\n$max-width        : 1200px;       // Ancho máximo de los contenedores ed-container y ed-grid\n$l-unit           : .5rem;        // Unidad básica de layout (para separaciones verticales, margin y padding)\n$gap              : $l-unit * 4;  // Separación entre columnas (2rem)\n$fractions        : 3 6;          // Fracciones para crear columnas (core flexbox)\n$container        : ed-container; // Clase para el contenedor (core flexbox)\n$item             : ed-item;      // Clase para los items (core flexbox)\n$grid-container   : ed-grid;      // Clase para el contenedor (core grid)\n$max-grid-columns : 12;           // Máximo número de columnas (core css grid)\n$legacy           : false;        // Soporte para versiones antiguas\n\n// CSS Variables\n:root {\n  // Variables para prototipar\n  --color                  : #007BDF;          // Color base (azul EDteam)\n  --color-alt              : #006DC6;          // Color alterno (azul EDteam alterno)\n  --border-color           : #DFE0E0;          // Color para bordes (gris suave)\n  --light-bg               : #F0F0F0;          // Color gris para fondos\n  --border-radius          : #{$l-unit * 0.5}; // .25rem\n  // layout\n  --vertical-block-space   : #{$l-unit * 2};   // 1rem\n  --vertical-content-space : #{$l-unit * 2};   // 1rem\n  --gap                    : #{$l-unit * 2};   // 1rem\n  --max-width              : #{$max-width};\n\n  @include from(lg) {\n    --vertical-block-space : #{$l-unit * 4};\n    --gap                  : #{$l-unit * 4};    // 2rem\n  }\n}\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/prototipado-avanzado.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Prototipado avanzado (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Cree su propio prototipado y vaya más allá de lo que ya tiene EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Prototipado avanzado (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Cree su propio prototipado y vaya más allá de lo que ya tiene EDgrid.\"><meta property=\"og:url\" content=\"/prototipado-avanzado.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Prototipado avanzado (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Cree su propio prototipado y vaya más allá de lo que ya tiene EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Prototipado avanzado</h1>\n<p>Ya vio qué es EDgrid y todo lo que es capaz de hacer, pero tal vez no sea suficiente en ciertos casos. ¿Qué tal si quiere utilizar otras propiedades que no tiene la librería?\n¿O no quiere estar escribiendo CSS para cada componente y prefiere usar la numenclaruta de clases de EDgrid? Aquí es donde el prototipado avanzado entra en acción.</p>\n<p>Utiliza el core de EDgrid para convetir cualquier propiedad en las nomenclaturas de la librería <code>breakpoint-propiedad</code>. Cabe recalcar que esta función sólo está disponible para la versión de EDgrid Sass.</p>\n<h2>¿Cómo funciona?</h2>\n<p>Para esto haremos uso del mixin <code>prototype()</code>, el cual podrá utilizarlo en cualquier lugar de su proyecto siempre y cuando EDgrid se haya importado antes. La sintaxis es la siguiente:</p>\n<pre><code class=\"language-scss\">@include prototype($names, $property, $value);\n/*\n* $names - Lista de nombres que usaremos para nombrar nuestras clases.\n*          Recorremos una lista por si queremos múltiples selectores con el mismo valor\n*\n* $property, $value - Propiedad CSS con su respectivo valor\n*/\n</code></pre>\n<p>Ejemplo</p>\n<pre><code class=\"language-scss\">@include prototype('cursor-pointer', cursor, pointer);\n</code></pre>\n<p>El resultado en CSS sería:</p>\n<pre><code class=\"language-css\">.s-cursor-pointer {\n  cursor: pointer;\n}\n\n@media screen and (min-width: 640px)\n  .m-cursor-pointer {\n    cursor: pointer;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-cursor-pointer {\n    cursor: pointer;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-cursor-pointer {\n    cursor: pointer;\n  }\n}\n</code></pre>\n<p>Si queremos múltiples clases con el mismo valor debemos pasar <code>$names</code> como si fuera una lista.</p>\n<pre><code class=\"language-scss\">@include prototype(('color-red', 'red-color'), cursor, pointer);\n</code></pre>\n<pre><code class=\"language-html\">&lt;!-- Ambas clases funcionan --&gt;\n&lt;p class=&quot;s-color-red&quot;&gt;Este es un párrafo de color rojo&lt;/p&gt;\n&lt;p class=&quot;s-red-color&quot;&gt;Y éste también lo está&lt;/p&gt;\n</code></pre>\n<h2>Especifidad</h2>\n<p>Si quiere crear selectores más avanzados como juntar una clase con la nomenclatura que está creando o usar selectores como <code>+</code>, <code>&gt;</code>, <code>~</code> entre muchos otros, no podrá hacerlo desde <code>$names</code>,\nsi no que deberá pasar un cuarto parámetro. Un ejemplo de esto es el componente <code>breakpoint-gap-numero</code> de EDgrid, el cuál solo funciona si el contenedor tiene la clase <code>ed-grid</code>.</p>\n<pre><code class=\"language-scss\">@include prototype($names, $property, $value, $concat);\n</code></pre>\n<p>Ejemplos</p>\n<pre><code class=\"language-scss\">// El elemento también tiene la clase .background\n// .background.s-red\n@include prototype('red', color, red, '.background');\n\n// Algún elemento ancestro tiene la clase .background (nótese el espacio al final)\n// .background .s-red\n@include prototype('red', color, red, '.background ');\n\n// Hijos directos de un elemento con la clase background\n// .background &gt; .s-red\n@include prototype('red', color, red, '.background &gt; ');\n</code></pre>\n<h2>Debug</h2>\n<p>El modo debug le permite ver en la terminal el CSS resultado (selector, propiedad, valor y mediaquery). Para activarlo debemos pasar un quinto parámetro en <code>true</code>.</p>\n<pre><code class=\"language-scss\">@include prototype($names, $property, $value, $concat, $debug);\n</code></pre>\n<p>Ejemplo</p>\n<pre><code class=\"language-scss\">@include prototype('red', color, red, '.background &gt; ', true);\n\n// Introduzca un string vacío si no necesita el cuarto parámetro\n// Puede borrarlo una vez que desactive el debug\n@include prototype('red', color, red, '', true);\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/prototipado.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Base (CSS/Sass)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta property=\"og:url\" content=\"/base.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Base (CSS/Sass)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Prototipado</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#botones\">Botones</a></li>\n<li><a href=\"#bordes\">Bordes</a></li>\n<li><a href=\"#esquinas-redondeadas\">Esquinas redondeadas</a></li>\n<li><a href=\"#fondos\">Fondos</a></li>\n<li><a href=\"#sombras\">Sombras</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>EDgrid le permite hacer prototipos rápidos con poco esfuerzo. La opción de prototipado viene activada por defecto en el proyecto, por lo que no necesita hacer ajustes extras para empezar a usarla.</p>\n<p><a id=\"markdown-botones\" name=\"botones\"></a></p>\n<h2>Botones</h2>\n<p>Agrega la clase <code>button</code> a un elemento. Si necesita darle márgenes, centrarlo, etc, use las clases que EDgrid proporciona.</p>\n<div class=\"button\">Soy un boton</div>\n<p><a id=\"markdown-bordes\" name=\"bordes\"></a></p>\n<h2>Bordes</h2>\n<ul>\n<li>Use la clase <code>breakpoint-border</code> para agregar un borde a los cuatro lados.</li>\n<li>Use la clase <code>breakpoint-border-none</code> para anular el borde en los cuatro lados.</li>\n<li>Use la clase <code>breakpoint-border-[top|right|bottom|left]</code> para agregar un borde solo en el lado seleccionado.</li>\n<li>Use la clase <code>breakpoint-border-[top|right|bottom|left]-none</code> para anular el borde en el lado seleccionado.</li>\n</ul>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-border lg-30 lg-to-center s-pxy-2&quot;&gt;\n    &lt;h3 class=&quot;s-border-bottom&quot;&gt;Soy una tarjeta&lt;/h3&gt;\n    &lt;p class=&quot;s-mb-0&quot;&gt;Yo soy el contenido de esta tarjeta&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"s-border lg-30 lg-to-center s-pxy-2\">\n<h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n<p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n<p><a id=\"markdown-esquinas-redondeadas\" name=\"esquinas-redondeadas\"></a></p>\n<h2>Esquinas redondeadas</h2>\n<ul>\n<li>Use la clase <code>breakpoint-radius</code> para asignar un border-radius a las cuatro esquinas.</li>\n<li>Use la clase <code>breakpoint-radius-none</code> para anular el border-radius de las cuatro esquinas</li>\n<li>Use la clase <code>breakpoint-radius-[tl|tr|br|bl]</code> para agregar border-radius en <code>top-left|top-right|bottom-right|bottom-left</code> respectivamente</li>\n<li>Use la clase <code>breakpoint-radius-[tl|tr|br|bl]-none</code> para anular el border-radius en <code>top-left|top-right|bottom-right|bottom-left</code> respectivamente</li>\n</ul>\n<pre><code class=\"language-html\">&lt;div class=&quot;s-radius s-border lg-30 lg-to-center s-pxy-2&quot;&gt;\n    &lt;h3 class=&quot;s-border-bottom&quot;&gt;Soy una tarjeta&lt;/h3&gt;\n    &lt;p class=&quot;s-mb-0&quot;&gt;Yo soy el contenido de esta tarjeta&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"s-radius s-border lg-30 lg-to-center s-pxy-2\">\n<h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n<p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n<p><a id=\"markdown-fondos\" name=\"fondos\"></a></p>\n<h2>Fondos</h2>\n<p>Puede usar las clases <code>breakpoint-bg-[grey|blue]</code> Para asignarle un fondo a un elemento. Así podemos crear componentes muy rápido. Por ejemplo, tarjetas:</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;lg-50 lg-to-center s-bg-grey s-radius s-pxy-2 l-block&quot;&gt;\n    &lt;p&gt;EDgrid es una libreria construida con Sass (y con versión CSS) \n        para Responsive Web Design (RWD). Es muy ligero, personalizable \n        y te permite prototipar y crear layouts en muy poco tiempo \n        sin conflictos con tu proyecto.&lt;/p&gt;\n    &lt;div class=&quot;button&quot;&gt;Empezar con EDgrid&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"lg-50 lg-to-center s-bg-grey s-radius s-pxy-2 l-block\">\n    <p>EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.</p>\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n<pre><code class=\"language-html\">&lt;div class=&quot;lg-50 lg-to-center s-border s-radius&quot;&gt;\n  &lt;p class=&quot;s-pxy-2 s-mb-0&quot;&gt;EDgrid es una libreria construida con Sass \n      (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, \n      personalizable y te permite prototipar y crear layouts en muy poco\n      tiempo sin conflictos con tu proyecto.&lt;/p&gt;\n  &lt;div class=&quot;s-bg-grey s-pxy-2&quot;&gt;\n    &lt;div class=&quot;button&quot;&gt;Empezar con EDgrid&lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"lg-50 lg-to-center s-border s-radius\">\n<p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n</div>\n<p><a id=\"markdown-sombras\" name=\"sombras\"></a></p>\n<h2>Sombras</h2>\n<ul>\n<li>Use las clases <code>breakpoint-shadow</code> para aplicar sombras en los cuatro lados.</li>\n<li>Use las clases <code>breakpoint-shadow-[top|right|bottom|left]</code> para aplicar sombras en los lados seleccionados</li>\n<li>Use las clases <code>breakpoint-shadow-none</code> para anular las sombras en los cuatro lados.</li>\n</ul>\n<pre><code class=\"language-html\">&lt;img class=&quot;s-shadow s-block-center&quot; src=&quot;/img/tioalexys.jpg&quot;&gt;\n</code></pre>\n<img class=\"s-shadow s-block-center l-block\" src=\"/assets/img/alexys.jpg\">\n<pre><code class=\"language-html\">&lt;div class=&quot;s-shadow-bottom lg-50 lg-to-center s-border s-radius&quot;&gt;\n  &lt;p class=&quot;s-pxy-2 s-mb-0&quot;&gt;EDgrid es una libreria construida con Sass \n      (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, \n      personalizable y te permite prototipar y crear layouts en muy poco \n      tiempo sin conflictos con tu proyecto.&lt;/p&gt;\n  &lt;div class=&quot;s-bg-grey s-pxy-2&quot;&gt;\n    &lt;div class=&quot;button&quot;&gt;Empezar con EDgrid&lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"s-shadow-bottom lg-50 lg-to-center s-border s-radius\">\n<p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n</div>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/ratios.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Ratios (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Ratios (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos.\"><meta property=\"og:url\" content=\"/ratios.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Ratios (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Ratios e imágenes</h1>\n<!-- TOC -->\n<ul>\n<li><a href=\"#ratios\">Ratios</a></li>\n<li><a href=\"#imagenes\">Imágenes</a></li>\n</ul>\n<!-- /TOC -->\n<hr>\n<p>Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos. Por ejemplo <strong>3 x 1</strong> (el triple de ancho que de alto). Tenga en cuenta que por limitaciones de css los elementos con ratio siempre tienen el 100% del ancho de su contenedor.</p>\n<p><a id=\"markdown-ratios\" name=\"ratios\"></a></p>\n<h2>Ratios</h2>\n<p>Use las clases <code>breakpoint-ratio-x-y</code> donde <code>x</code> y <code>y</code> son numeros enteros del 1 al 4. <code>x</code> representa el ancho y <code>y</code> el alto.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid lg-grid-3 lg-60 lg-to-center s-pxy-1 s-border s-radius s-shadow-bottom&quot;&gt;\n    &lt;div class=&quot;s-ratio-16-9 lg-ratio-2-3 s-bg-blue s-mb-2 lg-mb-0&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;lg-cols-2&quot;&gt;\n        &lt;h3&gt;Bienvenido a a EDgrid&lt;/h3&gt;\n        &lt;p&gt;EDgrid es una libreria construida con Sass (y con versión CSS) \n            para Responsive Web Design (RWD). Es muy ligero, personalizable.&lt;/p&gt;\n        &lt;div class=&quot;button&quot;&gt;Comenzar con EDgrid&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-grid lg-grid-3 lg-60 lg-to-center s-pxy-1 s-border s-radius s-shadow-bottom l-block\">\n    <div class=\"s-ratio-16-9 lg-ratio-2-3 s-bg-blue s-mb-2 lg-mb-0\"></div>\n    <div class=\"lg-cols-2\">\n        <h3>Bienvenido a a EDgrid</h3>\n        <p>EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable.</p>\n        <div class=\"button\">Comenzar con EDgrid</div>\n    </div>\n</div>\n<p>Además EDgrid incluye las clases <code>breakpoint-ratio-16-9</code>, <code>breakpoint-ratio-9-16</code> y <code>breakpoint-ratio-21-9</code> Ya que son proporciones comunes de elementos multimedia.</p>\n<p><a id=\"markdown-imagenes\" name=\"imagenes\"></a></p>\n<h2>Contenedores de imágenes</h2>\n<p>Puede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen. Solo agregue la clase <code>img-container</code>.</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-grid s-grid-2 m-grid-3 lg-grid-4 s-cross-center&quot;&gt;\n    &lt;div class=&quot;s-ratio-4-3 img-container&quot;&gt;\n        &lt;img src=&quot;https://cocha2018.ed.team/assets/img/banner-edcamp.jpg&quot;&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;s-ratio-9-16 img-container&quot;&gt;\n        &lt;img src=&quot;https://cocha2018.ed.team/assets/img/banner-edcamp.jpg&quot;&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;circle&quot;&gt;\n        &lt;img src=&quot;https://cocha2018.ed.team/assets/img/banner-edcamp.jpg&quot;&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;s-ratio-16-9 img-container&quot;&gt;\n        &lt;img src=&quot;https://cocha2018.ed.team/assets/img/banner-edcamp.jpg&quot;&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>La imagen es la misma en todos los casos:</p>\n<div class=\"ed-grid s-grid-2 m-grid-3 lg-grid-4 l-block s-cross-center\">\n    <div class=\"s-ratio-4-3 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"s-ratio-9-16 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"circle img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"s-ratio-16-9 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n</div>\n<ul>\n<li>Puede usar la clase <code>circle</code> para obtener un círculo perfecto sin usar clases de ratio. Si va a usarlo para contener una imagen, agregué tambien la clase <code>img-container</code>.</li>\n</ul>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/sass.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Sass</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Si va a trabajar con Sass, tenga en cuenta que como se explicó aquí, ed-grid genera dos grupos de código css: cssCore no recomendado si va a trabajar con Sass (desactivado por defecto para Sass) cssHelpers recomendado si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si es un usuario avanzado) Para activar o desactivar estos componentes redefina las variables $cssCore y $cssHelpers antes de importar ed-grid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Sass\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Si va a trabajar con Sass, tenga en cuenta que como se explicó aquí, ed-grid genera dos grupos de código css: cssCore no recomendado si va a trabajar con Sass (desactivado por defecto para Sass) cssHelpers recomendado si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si es un usuario avanzado) Para activar o desactivar estos componentes redefina las variables $cssCore y $cssHelpers antes de importar ed-grid.\"><meta property=\"og:url\" content=\"/sass.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Sass\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Si va a trabajar con Sass, tenga en cuenta que como se explicó aquí, ed-grid genera dos grupos de código css: cssCore no recomendado si va a trabajar con Sass (desactivado por defecto para Sass) cssHelpers recomendado si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si es un usuario avanzado) Para activar o desactivar estos componentes redefina las variables $cssCore y $cssHelpers antes de importar ed-grid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Comprender EDgrid Sass</h1>\n<p>Si va a trabajar con Sass, tenga en cuenta que <a href=\"/documentacion/css.html\">como se explicó aquí</a>, EDgrid genera dos grupos de código css:</p>\n<ul>\n<li><code>cssCore</code> Clases utilitarias no recomendadas si va a trabajar con Sass (desactivado por defecto para Sass)</li>\n<li><code>cssHelpers</code> Clases utilitarias recomendadas si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si desea)</li>\n</ul>\n<p>Si es un usuario avanzado puede activar o desactivar estos componentes redefiniendo las variables <code>$cssCore</code> y <code>$cssHelpers</code> antes de importar EDgrid. Estas variables son booleans.</p>\n<p>Por ejemplo, si desea construir todo su layout con Sass, sin usar clases en HTML, puede desactivar ambos:</p>\n<pre><code class=\"language-scss\">$cssCore: false;\n$cssHelpers: false;\n@import &quot;path/ed-grid/ed-grid&quot;\n</code></pre>\n<p>Sin embargo, si usa la configuración recomendada, importe EDgrid sin preocuparse de estos valores.</p>\n<pre><code class=\"language-scss\">@import &quot;~ed-grid/ed-grid&quot;;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/skeleton.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Skeleton (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Componente skeleton creado con el prototipado de EDgrid.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Skeleton (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Componente skeleton creado con el prototipado de EDgrid.\"><meta property=\"og:url\" content=\"/skeleton.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Skeleton (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Componente skeleton creado con el prototipado de EDgrid.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Skeleton</h1>\n<p>Los componenentes skeleton son una vista previa del contenido que se muestra antes de que se carguen los datos para reducir la frustración del usuario con los tiempos de cargas lentos en un sitio web. Una vez que terminan de cargar, el skeleton desaparece.</p>\n<p>En sí no existe un componente único para los skeleton, porque todo dependerá de la UI que tengan en su proyecto, pero eso no es problema ya que con el prototipado usted podrá recrear la gran mayoría de ésta.</p>\n<h2>Skeleton de card</h2>\n<div class=\"ed-grid m-grid-2 rows-gap l-section\">\n    <article class=\"s-shadow-bottom m-order-1\">\n        <div class=\"s-bg-grey s-ratio-16-9 img-container s-radius-tl s-radius-tr\"></div>\n        <div class=\"s-bg-white s-pxy-2\">\n            <div class=\"s-bg-grey s-py-2 s-mb-2\"></div>\n            <div class=\"s-bg-grey s-py-1 s-mb-1\"></div>\n            <div class=\"s-bg-grey s-py-1 s-70\"></div>\n        </div>\n        <footer class=\"s-py-4 s-bg-grey\">\n            <div class=\"s-py-1\"></div>\n        </footer>\n    </article>\n    <article class=\"s-shadow-bottom\">\n        <div class=\"s-ratio-16-9 img-container s-radius-tl s-radius-tr\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <div class=\"s-bg-white s-pxy-2\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n        <footer class=\"s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl\">\n            <div class=\"s-10 s-mr-1\">\n            <div class=\"circle \">\n                <img  src=\"/assets/img/alexys.jpg\">\n            </div>\n            </div>\n            <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n            <div class=\"button s-to-right\">$40USD</div>\n        </footer>\n    </article>\n</div>\n<pre><code class=\"language-html\">&lt;article class=&quot;s-shadow-bottom&quot;&gt;\n    &lt;div class=&quot;s-bg-grey s-ratio-16-9 img-container s-radius-tl s-radius-tr&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;s-bg-white s-pxy-2&quot;&gt;\n        &lt;div class=&quot;s-bg-grey s-py-2 s-mb-2&quot;&gt;&lt;/div&gt;\n        &lt;div class=&quot;s-bg-grey s-py-1 s-mb-1&quot;&gt;&lt;/div&gt;\n        &lt;div class=&quot;s-bg-grey s-py-1 s-70&quot;&gt;&lt;/div&gt;\n    &lt;/div&gt;\n    &lt;footer class=&quot;s-py-4 s-bg-grey&quot;&gt;\n        &lt;div class=&quot;s-py-1&quot;&gt;&lt;/div&gt;\n    &lt;/footer&gt;\n&lt;/article&gt;\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/videos.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Videos responsive (Sass/CSS)</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"ed-grid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint. El video siempre se expandirá al 100% del ancho de su contenedor. Uso con CSS (cssHelpers) Añada la clase ed-video al contenedor de su video (que puede ser un iframe elemento video o cualquier elemento con la clase .video)\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Videos responsive (Sass/CSS)\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"ed-grid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint. El video siempre se expandirá al 100% del ancho de su contenedor. Uso con CSS (cssHelpers) Añada la clase ed-video al contenedor de su video (que puede ser un iframe elemento video o cualquier elemento con la clase .video)\"><meta property=\"og:url\" content=\"/videos.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Videos responsive (Sass/CSS)\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"ed-grid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint. El video siempre se expandirá al 100% del ancho de su contenedor. Uso con CSS (cssHelpers) Añada la clase ed-video al contenedor de su video (que puede ser un iframe elemento video o cualquier elemento con la clase .video)\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Videos responsive (Sass/CSS)</h1>\n<p>EDgrid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint.</p>\n<p>El video siempre se expandirá al 100% del ancho de su contenedor.</p>\n<h2>Uso con clases HTML</h2>\n<p>Añada la clase <code>ed-video</code> al contenedor de su video (que puede ser un <code>iframe</code> elemento <code>video</code> o cualquier elemento con la clase <code>.video</code>)</p>\n<pre><code class=\"language-html\">&lt;div class=&quot;ed-video&quot;&gt;\n  &lt;iframe src=&quot;https://www.youtube.com/embed/cd549lZtPEU&quot;&gt;&lt;/iframe&gt;\n&lt;/div&gt;\n</code></pre>\n<div class=\"ed-video\">\n  <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/cd549lZtPEU\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n</div>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/documentacion/visibilidad.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid | Visibilidad</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará. Uso con CSS (cssHelpers) Use las clases from-bp o to-bp donde bp es un breakpoint válido de ed-grid (s,m,l,xl) from-bp hará al elemento visible a partir del breakpoint especificado e invisible por debajo de él. to-bp hará al elemento visible por debajo del breakpoint especificado e invisible por encima de él.\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid | Visibilidad\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará. Uso con CSS (cssHelpers) Use las clases from-bp o to-bp donde bp es un breakpoint válido de ed-grid (s,m,l,xl) from-bp hará al elemento visible a partir del breakpoint especificado e invisible por debajo de él. to-bp hará al elemento visible por debajo del breakpoint especificado e invisible por encima de él.\"><meta property=\"og:url\" content=\"/visibilidad.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid | Visibilidad\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará. Uso con CSS (cssHelpers) Use las clases from-bp o to-bp donde bp es un breakpoint válido de ed-grid (s,m,l,xl) from-bp hará al elemento visible a partir del breakpoint especificado e invisible por debajo de él. to-bp hará al elemento visible por debajo del breakpoint especificado e invisible por encima de él.\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!-- Main--><div class=\"l-block\"></div><div class=\"ed-grid cols-l-4 main-section l-big-section\"><aside class=\"main-sidebar sidebar-first\" itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\"><div class=\"vertical-menu-toggle to-l\" id=\"vertical-menu-toggle\" data-content=\"Filtros\"></div><nav class=\"vertical-menu\" itemscope itemtype=\"http://schema.org/WPSideBar\" id=\"vertical-menu\"><ul><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Comenzar con EDgrid</p><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" itemprop=\"name\" title=\"Instalación\">Instalación</a></li><li itemprop=\"url\"><a href=\"/documentacion/estructura.html\" itemprop=\"name\" title=\"Estructura de archivos\">Estructura de archivos</a></li><li itemprop=\"url\"><a href=\"/documentacion/personalizar.html\" itemprop=\"name\" title=\"Personalización\">Personalización</a></li><li itemprop=\"url\"><a href=\"/documentacion/breakpoints.html\" itemprop=\"name\" title=\"Breakpoints\">Breakpoints</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Filas y columnas</p><li itemprop=\"url\"><a href=\"/documentacion/layout-flexbox.html\" itemprop=\"name\" title=\"Flexbox\">Flexbox</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout-css-grid.html\" itemprop=\"name\" title=\"CSS Grid\">CSS Grid</a></li><li itemprop=\"url\"><a href=\"/documentacion/modo-dev.html\" itemprop=\"name\" title=\"Modo desarrollo\">Modo desarrollo</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Layout</p><li itemprop=\"url\"><a href=\"/documentacion/base.html\" itemprop=\"name\" title=\"Estilos base\">Estilos base</a></li><li itemprop=\"url\"><a href=\"/documentacion/layout.html\" itemprop=\"name\" title=\"Secciones y espaciado\">Secciones y espaciado</a></li><li itemprop=\"url\"><a href=\"/documentacion/distribucion.html\" itemprop=\"name\" title=\"Distribución\">Distribución</a></li><li itemprop=\"url\"><a href=\"/documentacion/alineacion.html\" itemprop=\"name\" title=\"Alineación\">Alineación</a></li><li itemprop=\"url\"><a href=\"/documentacion/visibilidad.html\" itemprop=\"name\" title=\"Visibilidad\">Visibilidad</a></li><li itemprop=\"url\"><a href=\"/documentacion/mediaqueries.html\" itemprop=\"name\" title=\"Mediaqueries\">Mediaqueries</a></li><li itemprop=\"url\"><a href=\"/documentacion/videos.html\" itemprop=\"name\" title=\"Videos responsive\">Videos responsive</a></li><li itemprop=\"url\"><a href=\"/documentacion/ratios.html\" itemprop=\"name\" title=\"Ratios e imágenes\">Ratios e imágenes</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Helpers y prototipado</p><li itemprop=\"url\"><a href=\"/documentacion/funciones.html\" itemprop=\"name\" title=\"Funciones\">Funciones</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado.html\" itemprop=\"name\" title=\"Prototipado de EDgrid\">Prototipado de EDgrid</a></li><li itemprop=\"url\"><a href=\"/documentacion/prototipado-avanzado.html\" itemprop=\"name\" title=\"Prototipado avanzado\">Prototipado avanzado</a></li></section><section class=\"s-mb-2 m-mb-3\"><p class=\"t5 s-mb-1\">Componentes</p><li itemprop=\"url\"><a href=\"/documentacion/cards.html\" itemprop=\"name\" title=\"Cards\">Cards</a></li><li itemprop=\"url\"><a href=\"/documentacion/banner.html\" itemprop=\"name\" title=\"Banner\">Banner</a></li><li itemprop=\"url\"><a href=\"/documentacion/skeleton.html\" itemprop=\"name\" title=\"Skeleton\">Skeleton</a></li><li itemprop=\"url\"><a href=\"/documentacion/menu-responsive.html\" itemprop=\"name\" title=\"Menú responsive\">Menú responsive</a></li></section></ul></nav></aside><div class=\"span-l-3\"><main itemscope itemprop=\"mainContentOfPage\" role=\"main\"><h1>Visibilidad</h1>\n<p>El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará.</p>\n<h2>Uso con CSS</h2>\n<p>Use las clases <code>from-breakpoint</code> o <code>to-breakpoint</code> donde <strong>breakpoint</strong> es un breakpoint válido de EDgrid (<code>s,m,l,xl</code>)</p>\n<p><code>from-lg</code> hará al elemento visible a partir de 1024px e invisible por debajo de esa medida.</p>\n<p><code>to-xl</code> Hará al elemento visible por debajo de 1440px e invisible por encima de él.</p>\n<h2>Uso con Sass</h2>\n<p>En la versión Sass cuenta con cuatro mixins que reciben como parámetro un breakpoint del core de ed-grid ( <code>s,m,l,xl</code>) o uno en <code>px</code>, <code>em</code> o <code>rem</code>.</p>\n<ul>\n<li><code>showFrom($bp)</code> Muestra el elemento solo por encima del breakpoint especificado en el parámetro.</li>\n<li><code>showTo($bp)</code> Muestra el elemento solo por debajo del breakpoint especificado en el parámetro.</li>\n<li><code>hideFrom($bp)</code> Oculta el elemento por encima del breakpoint especificado en el parámetro.</li>\n<li><code>hideTo($bp)</code> Oculta el elemento por debajo del breakpoint especificado en el parámetro.</li>\n</ul>\n<p>Ejemplo</p>\n<pre><code class=\"language-scss\">.menu-movil {\n  @include hideFrom(lg)\n}\n\n.menu-desktop {\n  @include showFrom(xl)\n}\n</code></pre>\n<p>Compila a</p>\n<pre><code class=\"language-scss\">@media screen and (min-width:1024px){\n  .menu-movil{\n    display:none;\n  }\n}\n\n@media screen and (max-width:1440px){\n  .menu-desktop{\n    display:none;\n  }\n}\n</code></pre>\n</main></div></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/index.html",
    "content": "<!DOCTYPE html><html lang=\"es\"><head><title>EDgrid - Libreria Sass/CSS de EDteam para construir layouts web responsive</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\"><meta name=\"description\" content=\"Libreria Sass/CSS de EDteam para construir layouts web responsive\"><!-- Estilos--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\"><link rel=\"stylesheet\" href=\"/css/styles.css?180113\"><link rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\"><meta property=\"og:title\" content=\"EDgrid - Libreria Sass/CSS de EDteam para construir layouts web responsive\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:description\" content=\"Libreria Sass/CSS de EDteam para construir layouts web responsive\"><meta property=\"og:url\" content=\"/index.html\"><meta property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\"><meta property=\"og:site_name\" content=\"EDteam\"><meta property=\"og:locale\" content=\"es_PE\"><meta property=\"og:locale:alternate\" content=\"es_CO\"><meta property=\"og:locale:alternate\" content=\"es_MX\"><meta property=\"og:locale:alternate\" content=\"es_DO\"><meta property=\"og:locale:alternate\" content=\"es_BO\"><meta property=\"twitter:card\" content=\"summary_large_image\"><meta property=\"twitter:title\" content=\"EDgrid - Libreria Sass/CSS de EDteam para construir layouts web responsive\"><meta property=\"twitter:site\" content=\"@EDteamLat\"><meta property=\"twitter:description\" content=\"Libreria Sass/CSS de EDteam para construir layouts web responsive\"><meta name=\"theme-color\" content=\"#007BDF\"></head><!-- Body--><body itemscope itemtype=\"http://schema.org/WebPage\"><header class=\"main-header\" itemscope itemtype=\"http://schema.org/WPHeader\"><div class=\"ed-grid s-grid-5 cols-lg-10\"><div class=\"s-cols-2 s-cross-center\" itemscope itemtype=\"http://schema.org/Organization\"><a href=\"/\" itemprop=\"url\"><img class=\"main-logo\" alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\"></a></div><div class=\"s-cols-3 lg-cols-8 main-menu-container s-cross-center s-main-end\"><nav class=\"main-menu\" itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\" id=\"main-menu\"><ul><li itemprop=\"url\"><a href=\"/documentacion/instalacion.html\" target=\"\" itemprop=\"name\" title=\"Enlace de Documentación\">Documentación</a></li><li itemprop=\"url\"><a href=\"/casos-de-exito\" target=\"\" itemprop=\"name\" title=\"Enlace de Casos de éxito\">Casos de éxito</a></li><li itemprop=\"url\"><a href=\"/changelog\" target=\"\" itemprop=\"name\" title=\"Enlace de Changelog\">Changelog</a></li><li itemprop=\"url\"><a href=\"/creditos\" target=\"\" itemprop=\"name\" title=\"Enlace de Créditos\">Créditos</a></li><li itemprop=\"url\"><a href=\"https://ed.team\" target=\"&quot;_blank&quot;\" itemprop=\"name\" title=\"Enlace de Ir a EDteam\">Ir a EDteam</a></li></ul></nav><div class=\"main-menu-toggle to-l\" id=\"main-menu-toggle\"></div></div></div></header><!-- Banner section--><!--+banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)--><div class=\"main-banner background grey-800 l-section\"><div class=\"ed-grid lg-grid-2 row-gap s-gap-2 m-gap-4\"><div class=\"s-column s-main-center lg-main-center lg-cross-start s-center lg-left\"><h1 class=\"bigger-title\"><span class=\"color white-color\">Maqueta sitios <br/> <span class=\"color blue-400\">y aplicaciones web</span> <br/> sin una línea de CSS</span></h1><p class=\"color grey-400 m-60 m-to-center lg-100\">EDgrid implementa un sistema de diseño flexible y personalizable para construir layouts y componentes responsive a la velocidad de la luz ⚡</p><div class=\"s-main-center\"><a class=\"button blue-500 s-mr-2 s-mb-2 m-mb-0\" href=\"/documentacion/instalacion.html\" title=\"Documentación de EDgrid\"><span>📄 Lee la documentación</span></a><a class=\"button ghost blue-400 s-mb-2 m-mb-0\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en Github\"><span>😺 Repo en Github</span></a></div></div><div><div class=\"img-container s-ratio-16-9\"><img class=\"s-radius-1\" src=\"/assets/img/logo/edgrid-poster.jpg\"/></div></div></div></div><!-- Main--><div class=\"l-block\"></div><div class=\"main-section l-big-section\"><main><div class=\"ed-grid\"><h1 class=\"s-to-center s-center l-section\">El responsive web design <br/> nunca fue tan sencillo</h1><div class=\"main-features ed-grid m-grid-2 lg-grid-3 row-gap\"><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/logo/EDgrid-logo.svg\"/></div><h3>¿Qué es?</h3><p class=\"s-mb-0 small\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p></div><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/utils/layout.svg\"/></div><h3>Solo Layout</h3><p class=\"s-mb-0 small\">No añade botones, tipografías, colores ni otro estilo visual. Es layout puro para maquetar que no genera conflictos. Además EDgrid en su versión Sass compila solo el código necesario sin css extra.</p></div><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/utils/help.svg\"/></div><h3>Open Source</h3><p class=\"s-mb-0 small\">Completamente gratuito y de código abierto (GPL2). Puede usarlo en proyectos comerciales, descargarlo y estudiar el código y crear sus propias versiones derivadas sin pagar una licencia.</p></div><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/utils/grid.svg\"/></div><h3>CSS Grid y Flexbox</h3><p class=\"s-mb-0 small\">EDgrid usa las características más modernas de CSS: Flexbox y Grid. Además incluye fallbacks para Grid en navegadores que todavía no lo soporten.</p></div><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/utils/rwd.svg\"/></div><h3>Adiós columnas</h3><p class=\"s-mb-0 small\">¿Cansado de las 12 columnas? Con EDgrid puedes crear layouts con completa libertad sin amarrarte a usar siempre doce columnas.</p></div><div class=\"main-feature s-pxy-2\"><div class=\"main-feature__img\"><img src=\"assets/img/utils/bug.svg\"/></div><h3>Debug</h3><p class=\"s-mb-0 small\">El modo dev se activa con una sola línea de código y te muestra la construcción del layout por debajo del capó. Así podrás corregir problemas con facilidad.</p></div></div></div></main></div><!-- Footer--><footer class=\"main-footer\" role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\"><div class=\"ed-container main-footer--content\"><div class=\"ed-item l-50 s-to-center s-center\"><p class=\"smaller s-mb-1\">EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.<a class=\"icon-github space\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\"></a><a class=\"icon-docs space\" href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\"></a></p><p class=\"smaller s-mb-1\">EDgrid es una marca de <a target=\"_blank\" href=\"https://ed.team\">EDteam</a>, ambas fundadas por <a target=\"_blank\" href=\"https://alvaro.ceo\">Álvaro Felipe</a>.</p><p class=\"smaller l-block\">2015 - 2020</p><div class=\"s-cross-center s-main-center\"><a class=\"s-mr-3\" href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\"><img src=\"/assets/img/icons/github.svg\" width=\"20\" height=\"20\"></a><a href=\"https://twitter.com/EDgridcss\" target=\"_blank\"><img src=\"/assets/img/icons/twitter.svg\" width=\"20\" height=\"20\"></a></div></div></div></footer><script src=\"/js/scripts.js\"></script></body></html>"
  },
  {
    "path": "docs/js/scripts-min.js",
    "content": "!function(){return function e(t,n,a){function r(s,o){if(!n[s]){if(!t[s]){var l=\"function\"==typeof require&&require;if(!o&&l)return l(s,!0);if(i)return i(s,!0);var u=new Error(\"Cannot find module '\"+s+\"'\");throw u.code=\"MODULE_NOT_FOUND\",u}var c=n[s]={exports:{}};t[s][0].call(c.exports,function(e){return r(t[s][1][e]||e)},c,c.exports,e,t,n,a)}return n[s].exports}for(var i=\"function\"==typeof require&&require,s=0;s<a.length;s++)r(a[s]);return r}}()({1:[function(e,t,n){(function(n){\"use strict\";var a=i(e(\"./modules/activeMenu\")),r=i(e(\"./modules/menu\"));e(\"./modules/scrollBarWIdth\");function i(e){return e&&e.__esModule?e:{default:e}}(0,a.default)(\"main-menu\"),(0,a.default)(\"vertical-menu\"),(0,r.default)(\"main-menu\",\"main-menu-toggle\"),(0,r.default)(\"vertical-menu\",\"vertical-menu-toggle\");var s=\"undefined\"!=typeof window?window:\"undefined\"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},o=function(){var e=/\\blang(?:uage)?-(\\w+)\\b/i,t=0,n=s.Prism={manual:s.Prism&&s.Prism.manual,disableWorkerMessageHandler:s.Prism&&s.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):\"Array\"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/\\u00a0/g,\" \")},type:function(e){return Object.prototype.toString.call(e).match(/\\[object (\\w+)\\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,\"__id\",{value:++t}),e.__id},clone:function(e){switch(n.util.type(e)){case\"Object\":var t={};for(var a in e)e.hasOwnProperty(a)&&(t[a]=n.util.clone(e[a]));return t;case\"Array\":return e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){var i=(r=r||n.languages)[e];if(2==arguments.length){for(var s in a=arguments[1])a.hasOwnProperty(s)&&(i[s]=a[s]);return i}var o={};for(var l in i)if(i.hasOwnProperty(l)){if(l==t)for(var s in a)a.hasOwnProperty(s)&&(o[s]=a[s]);o[l]=i[l]}return n.languages.DFS(n.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,t,a,r){for(var i in r=r||{},e)e.hasOwnProperty(i)&&(t.call(e,i,e[i],a||i),\"Object\"!==n.util.type(e[i])||r[n.util.objId(e[i])]?\"Array\"!==n.util.type(e[i])||r[n.util.objId(e[i])]||(r[n.util.objId(e[i])]=!0,n.languages.DFS(e[i],t,i,r)):(r[n.util.objId(e[i])]=!0,n.languages.DFS(e[i],t,null,r)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,a){var r={callback:a,selector:'code[class*=\"language-\"], [class*=\"language-\"] code, code[class*=\"lang-\"], [class*=\"lang-\"] code'};n.hooks.run(\"before-highlightall\",r);for(var i,s=r.elements||e.querySelectorAll(r.selector),o=0;i=s[o++];)n.highlightElement(i,!0===t,r.callback)},highlightElement:function(t,a,r){for(var i,o,l=t;l&&!e.test(l.className);)l=l.parentNode;l&&(i=(l.className.match(e)||[,\"\"])[1].toLowerCase(),o=n.languages[i]),t.className=t.className.replace(e,\"\").replace(/\\s+/g,\" \")+\" language-\"+i,t.parentNode&&(l=t.parentNode,/pre/i.test(l.nodeName)&&(l.className=l.className.replace(e,\"\").replace(/\\s+/g,\" \")+\" language-\"+i));var u={element:t,language:i,grammar:o,code:t.textContent};if(n.hooks.run(\"before-sanity-check\",u),!u.code||!u.grammar)return u.code&&(n.hooks.run(\"before-highlight\",u),u.element.textContent=u.code,n.hooks.run(\"after-highlight\",u)),void n.hooks.run(\"complete\",u);if(n.hooks.run(\"before-highlight\",u),a&&s.Worker){var c=new Worker(n.filename);c.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run(\"before-insert\",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),n.hooks.run(\"after-highlight\",u),n.hooks.run(\"complete\",u)},c.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run(\"before-insert\",u),u.element.innerHTML=u.highlightedCode,r&&r.call(t),n.hooks.run(\"after-highlight\",u),n.hooks.run(\"complete\",u)},highlight:function(e,t,r){var i=n.tokenize(e,t);return a.stringify(n.util.encode(i),r)},matchGrammar:function(e,t,a,r,i,s,o){var l=n.Token;for(var u in a)if(a.hasOwnProperty(u)&&a[u]){if(u==o)return;var c=a[u];c=\"Array\"===n.util.type(c)?c:[c];for(var g=0;g<c.length;++g){var d=c[g],p=d.inside,f=!!d.lookbehind,m=!!d.greedy,h=0,b=d.alias;if(m&&!d.pattern.global){var y=d.pattern.toString().match(/[imuy]*$/)[0];d.pattern=RegExp(d.pattern.source,y+\"g\")}d=d.pattern||d;for(var v=r,k=i;v<t.length;k+=t[v].length,++v){var w=t[v];if(t.length>e.length)return;if(!(w instanceof l)){d.lastIndex=0;var S=1;if(!(L=d.exec(w))&&m&&v!=t.length-1){if(d.lastIndex=k,!(L=d.exec(e)))break;for(var A=L.index+(f?L[1].length:0),x=L.index+L[0].length,F=v,j=k,C=t.length;C>F&&(x>j||!t[F].type&&!t[F-1].greedy);++F)A>=(j+=t[F].length)&&(++v,k=j);if(t[v]instanceof l||t[F-1].greedy)continue;S=F-v,w=e.slice(k,j),L.index-=k}if(L){f&&(h=L[1].length);x=(A=L.index+h)+(L=L[0].slice(h)).length;var L,P=w.slice(0,A),E=w.slice(x),N=[v,S];P&&(++v,k+=P.length,N.push(P));var O=new l(u,p?n.tokenize(L,p):L,b,L,m);if(N.push(O),E&&N.push(E),Array.prototype.splice.apply(t,N),1!=S&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||\"\").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if(\"string\"==typeof e)return e;if(\"Array\"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join(\"\");var i={type:e.type,content:a.stringify(e.content,t,r),tag:\"span\",classes:[\"token\",e.type],attributes:{},language:t,parent:r};if(e.alias){var s=\"Array\"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run(\"wrap\",i);var o=Object.keys(i.attributes).map(function(e){return e+'=\"'+(i.attributes[e]||\"\").replace(/\"/g,\"&quot;\")+'\"'}).join(\" \");return\"<\"+i.tag+' class=\"'+i.classes.join(\" \")+'\"'+(o?\" \"+o:\"\")+\">\"+i.content+\"</\"+i.tag+\">\"},!s.document)return s.addEventListener?(n.disableWorkerMessageHandler||s.addEventListener(\"message\",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;s.postMessage(n.highlight(r,n.languages[a],a)),i&&s.close()},!1),s.Prism):s.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName(\"script\")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute(\"data-manual\")||(\"loading\"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener(\"DOMContentLoaded\",n.highlightAll))),s.Prism}();void 0!==t&&t.exports&&(t.exports=o),void 0!==n&&(n.Prism=o),o.languages.markup={comment:/<!--[\\s\\S]*?-->/,prolog:/<\\?[\\s\\S]+?\\?>/,doctype:/<!DOCTYPE[\\s\\S]+?>/i,cdata:/<!\\[CDATA\\[[\\s\\S]*?]]>/i,tag:{pattern:/<\\/?(?!\\d)[^\\s>\\/=$<]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,inside:{tag:{pattern:/^<\\/?[^\\s>\\/]+/i,inside:{punctuation:/^<\\/?/,namespace:/^[^\\s>\\/:]+:/}},\"attr-value\":{pattern:/=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\\\])[\"']/,lookbehind:!0}]}},punctuation:/\\/?>/,\"attr-name\":{pattern:/[^\\s>\\/]+/,inside:{namespace:/^[^\\s>\\/:]+:/}}}},entity:/&#?[\\da-z]{1,8};/i},o.languages.markup.tag.inside[\"attr-value\"].inside.entity=o.languages.markup.entity,o.hooks.add(\"wrap\",function(e){\"entity\"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,\"&\"))}),o.languages.xml=o.languages.markup,o.languages.html=o.languages.markup,o.languages.mathml=o.languages.markup,o.languages.svg=o.languages.markup,o.languages.css={comment:/\\/\\*[\\s\\S]*?\\*\\//,atrule:{pattern:/@[\\w-]+?.*?(?:;|(?=\\s*\\{))/i,inside:{rule:/@[\\w-]+/}},url:/url\\((?:([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,selector:/[^{}\\s][^{};]*?(?=\\s*\\{)/,string:{pattern:/(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,greedy:!0},property:/[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,important:/\\B!important\\b/i,function:/[-a-z0-9]+(?=\\()/i,punctuation:/[(){};:]/},o.languages.css.atrule.inside.rest=o.util.clone(o.languages.css),o.languages.markup&&(o.languages.insertBefore(\"markup\",\"tag\",{style:{pattern:/(<style[\\s\\S]*?>)[\\s\\S]*?(?=<\\/style>)/i,lookbehind:!0,inside:o.languages.css,alias:\"language-css\",greedy:!0}}),o.languages.insertBefore(\"inside\",\"attr-value\",{\"style-attr\":{pattern:/\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,inside:{\"attr-name\":{pattern:/^\\s*style/i,inside:o.languages.markup.tag.inside},punctuation:/^\\s*=\\s*['\"]|['\"]\\s*$/,\"attr-value\":{pattern:/.+/i,inside:o.languages.css}},alias:\"language-css\"}},o.languages.markup.tag)),o.languages.clike={comment:[{pattern:/(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,lookbehind:!0},{pattern:/(^|[^\\\\:])\\/\\/.*/,lookbehind:!0}],string:{pattern:/([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,greedy:!0},\"class-name\":{pattern:/((?:\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+)|(?:catch\\s+\\())[\\w.\\\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\\\]/}},keyword:/\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,boolean:/\\b(?:true|false)\\b/,function:/[a-z0-9_]+(?=\\()/i,number:/\\b-?(?:0x[\\da-f]+|\\d*\\.?\\d+(?:e[+-]?\\d+)?)\\b/i,operator:/--?|\\+\\+?|!=?=?|<=?|>=?|==?=?|&&?|\\|\\|?|\\?|\\*|\\/|~|\\^|%/,punctuation:/[{}[\\];(),.:]/},o.languages.javascript=o.languages.extend(\"clike\",{keyword:/\\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\\b/,number:/\\b-?(?:0[xX][\\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\\d*\\.?\\d+(?:[Ee][+-]?\\d+)?|NaN|Infinity)\\b/,function:/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*\\()/i,operator:/-[-=]?|\\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\\|[|=]?|\\*\\*?=?|\\/=?|~|\\^=?|%=?|\\?|\\.{3}/}),o.languages.insertBefore(\"javascript\",\"keyword\",{regex:{pattern:/(^|[^\\/])\\/(?!\\/)(\\[[^\\]\\r\\n]+]|\\\\.|[^\\/\\\\\\[\\r\\n])+\\/[gimyu]{0,5}(?=\\s*($|[\\r\\n,.;})]))/,lookbehind:!0,greedy:!0},\"function-variable\":{pattern:/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=\\s*(?:function\\b|(?:\\([^()]*\\)|[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/i,alias:\"function\"}}),o.languages.insertBefore(\"javascript\",\"string\",{\"template-string\":{pattern:/`(?:\\\\[\\s\\S]|[^\\\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\\$\\{[^}]+\\}/,inside:{\"interpolation-punctuation\":{pattern:/^\\$\\{|\\}$/,alias:\"punctuation\"},rest:o.languages.javascript}},string:/[\\s\\S]+/}}}),o.languages.markup&&o.languages.insertBefore(\"markup\",\"tag\",{script:{pattern:/(<script[\\s\\S]*?>)[\\s\\S]*?(?=<\\/script>)/i,lookbehind:!0,inside:o.languages.javascript,alias:\"language-javascript\",greedy:!0}}),o.languages.js=o.languages.javascript,o.languages.scss=o.languages.extend(\"css\",{comment:{pattern:/(^|[^\\\\])(?:\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*)/,lookbehind:!0},atrule:{pattern:/@[\\w-]+(?:\\([^()]+\\)|[^(])*?(?=\\s+[{;])/,inside:{rule:/@[\\w-]+/}},url:/(?:[-a-z]+-)*url(?=\\()/i,selector:{pattern:/(?=\\S)[^@;{}()]?(?:[^@;{}()]|&|#\\{\\$[-\\w]+\\})+(?=\\s*\\{(?:\\}|\\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:\"important\"},placeholder:/%[-\\w]+/,variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}}}),o.languages.insertBefore(\"scss\",\"atrule\",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),o.languages.scss.property={pattern:/(?:[\\w-]|\\$[-\\w]+|#\\{\\$[-\\w]+\\})+(?=\\s*:)/i,inside:{variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}},o.languages.insertBefore(\"scss\",\"important\",{variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}),o.languages.insertBefore(\"scss\",\"function\",{placeholder:{pattern:/%[-\\w]+/,alias:\"selector\"},statement:{pattern:/\\B!(?:default|optional)\\b/i,alias:\"keyword\"},boolean:/\\b(?:true|false)\\b/,null:/\\bnull\\b/,operator:{pattern:/(\\s)(?:[-+*\\/%]|[=!]=|<=?|>=?|and|or|not)(?=\\s)/,lookbehind:!0}}),o.languages.scss.atrule.inside.rest=o.util.clone(o.languages.scss),function(){if(\"undefined\"!=typeof self&&self.Prism&&self.document){var e=[],t={},n=function(){};o.plugins.toolbar={};var a=o.plugins.toolbar.registerButton=function(n,a){var r;r=\"function\"==typeof a?a:function(e){var t;return\"function\"==typeof a.onClick?((t=document.createElement(\"button\")).type=\"button\",t.addEventListener(\"click\",function(){a.onClick.call(this,e)})):\"string\"==typeof a.url?(t=document.createElement(\"a\")).href=a.url:t=document.createElement(\"span\"),t.textContent=a.text,t},e.push(t[n]=r)},r=o.plugins.toolbar.hook=function(a){var r=a.element.parentNode;if(r&&/pre/i.test(r.nodeName)&&!r.classList.contains(\"code-toolbar\")){r.classList.add(\"code-toolbar\");var i=document.createElement(\"div\");i.classList.add(\"toolbar\"),document.body.hasAttribute(\"data-toolbar-order\")&&(e=document.body.getAttribute(\"data-toolbar-order\").split(\",\").map(function(e){return t[e]||n})),e.forEach(function(e){var t=e(a);if(t){var n=document.createElement(\"div\");n.classList.add(\"toolbar-item\"),n.appendChild(t),i.appendChild(n)}}),r.appendChild(i)}};a(\"label\",function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute(\"data-label\")){var n,a,r=t.getAttribute(\"data-label\");try{a=document.querySelector(\"template#\"+r)}catch(e){}return a?n=a.content:(t.hasAttribute(\"data-url\")?(n=document.createElement(\"a\")).href=t.getAttribute(\"data-url\"):n=document.createElement(\"span\"),n.textContent=r),n}}),o.hooks.add(\"complete\",r)}}(),function(){if(\"undefined\"!=typeof self&&self.Prism&&self.document){if(!o.plugins.toolbar)return void console.warn(\"Show Languages plugin loaded before Toolbar plugin.\");var e={html:\"HTML\",xml:\"XML\",svg:\"SVG\",mathml:\"MathML\",css:\"CSS\",clike:\"C-like\",javascript:\"JavaScript\",abap:\"ABAP\",actionscript:\"ActionScript\",apacheconf:\"Apache Configuration\",apl:\"APL\",applescript:\"AppleScript\",asciidoc:\"AsciiDoc\",asm6502:\"6502 Assembly\",aspnet:\"ASP.NET (C#)\",autohotkey:\"AutoHotkey\",autoit:\"AutoIt\",basic:\"BASIC\",csharp:\"C#\",cpp:\"C++\",coffeescript:\"CoffeeScript\",\"css-extras\":\"CSS Extras\",django:\"Django/Jinja2\",fsharp:\"F#\",glsl:\"GLSL\",graphql:\"GraphQL\",http:\"HTTP\",ichigojam:\"IchigoJam\",inform7:\"Inform 7\",json:\"JSON\",latex:\"LaTeX\",livescript:\"LiveScript\",lolcode:\"LOLCODE\",matlab:\"MATLAB\",mel:\"MEL\",n4js:\"N4JS\",nasm:\"NASM\",nginx:\"nginx\",nsis:\"NSIS\",objectivec:\"Objective-C\",ocaml:\"OCaml\",opencl:\"OpenCL\",parigp:\"PARI/GP\",php:\"PHP\",\"php-extras\":\"PHP Extras\",powershell:\"PowerShell\",properties:\".properties\",protobuf:\"Protocol Buffers\",jsx:\"React JSX\",renpy:\"Ren'py\",rest:\"reST (reStructuredText)\",sas:\"SAS\",sass:\"Sass (Sass)\",scss:\"Sass (Scss)\",sql:\"SQL\",typescript:\"TypeScript\",vbnet:\"VB.Net\",vhdl:\"VHDL\",vim:\"vim\",wiki:\"Wiki markup\",xojo:\"Xojo (REALbasic)\",yaml:\"YAML\"};o.plugins.toolbar.registerButton(\"show-language\",function(t){var n=t.element.parentNode;if(n&&/pre/i.test(n.nodeName)){var a=n.getAttribute(\"data-language\")||e[t.language]||t.language.substring(0,1).toUpperCase()+t.language.substring(1),r=document.createElement(\"span\");return r.textContent=a,r}})}}()}).call(this,\"undefined\"!=typeof global?global:\"undefined\"!=typeof self?self:\"undefined\"!=typeof window?window:{})},{\"./modules/activeMenu\":2,\"./modules/menu\":3,\"./modules/scrollBarWIdth\":4}],2:[function(e,t,n){\"use strict\";Object.defineProperty(n,\"__esModule\",{value:!0});n.default=function(e){var t=document.getElementById(e);if(t){var n=[].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(t.querySelectorAll(\"a\")));n&&n.map(function(e){var t=document.location.href;e.href!==t&&e.href!==t.slice(0,-1)||e.classList.add(\"active\")})}},t.exports=n.default},{}],3:[function(e,t,n){\"use strict\";Object.defineProperty(n,\"__esModule\",{value:!0});n.default=function(e,t){var n=document.getElementById(e),a=document.getElementById(t);n&&a&&a.addEventListener(\"click\",function(){n.classList.toggle(\"show\"),a.classList.toggle(\"active\")})},t.exports=n.default},{}],4:[function(e,t,n){\"use strict\";Object.defineProperty(n,\"__esModule\",{value:!0});var a=function(){return window.innerWidth-document.documentElement.getBoundingClientRect().width};document.documentElement.style.setProperty(\"--scrollbar\",a()+\"px\"),n.getScrollBarWidth=a},{}]},{},[1]);\n//# sourceMappingURL=scripts-min.js.map\n"
  },
  {
    "path": "docs/js/scripts.js",
    "content": "(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\n(function (global){\n'use strict';\n\nvar _activeMenu = require('./modules/activeMenu');\n\nvar _activeMenu2 = _interopRequireDefault(_activeMenu);\n\nvar _menu = require('./modules/menu');\n\nvar _menu2 = _interopRequireDefault(_menu);\n\nvar _scrollBarWIdth = require('./modules/scrollBarWIdth');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n(0, _activeMenu2.default)('main-menu'); // import menu from './modules/menu'\n// import migrate from './modules/migrate'\n//\n// export default { menu, migrate }\n\n(0, _activeMenu2.default)('vertical-menu');\n(0, _menu2.default)('main-menu', 'main-menu-toggle');\n(0, _menu2.default)('vertical-menu', 'vertical-menu-toggle');\n\n/* PrismJS 1.9.0\nhttp://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+scss&plugins=toolbar+show-language */\nvar _self = 'undefined' != typeof window ? window : 'undefined' != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope ? self : {},\n    Prism = function () {\n  var e = /\\blang(?:uage)?-(\\w+)\\b/i,\n      t = 0,\n      n = _self.Prism = {\n    manual: _self.Prism && _self.Prism.manual,\n    disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,\n    util: {\n      encode: function encode(e) {\n        return e instanceof r ? new r(e.type, n.util.encode(e.content), e.alias) : 'Array' === n.util.type(e) ? e.map(n.util.encode) : e.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\\u00a0/g, ' ');\n      }, type: function type(e) {\n        return Object.prototype.toString.call(e).match(/\\[object (\\w+)\\]/)[1];\n      }, objId: function objId(e) {\n        return e.__id || Object.defineProperty(e, '__id', { value: ++t }), e.__id;\n      }, clone: function clone(e) {\n        var t = n.util.type(e);\n        switch (t) {\n          case 'Object':\n            var r = {};\n            for (var a in e) {\n              e.hasOwnProperty(a) && (r[a] = n.util.clone(e[a]));\n            }return r;\n          case 'Array':\n            return e.map(function (e) {\n              return n.util.clone(e);\n            });\n        }\n        return e;\n      }\n    },\n    languages: {\n      extend: function extend(e, t) {\n        var r = n.util.clone(n.languages[e]);\n        for (var a in t) {\n          r[a] = t[a];\n        }return r;\n      }, insertBefore: function insertBefore(e, t, r, a) {\n        a = a || n.languages;\n        var l = a[e];\n        if (2 == arguments.length) {\n          r = arguments[1];\n          for (var i in r) {\n            r.hasOwnProperty(i) && (l[i] = r[i]);\n          }return l;\n        }\n        var o = {};\n        for (var s in l) {\n          if (l.hasOwnProperty(s)) {\n            if (s == t) for (var i in r) {\n              r.hasOwnProperty(i) && (o[i] = r[i]);\n            }o[s] = l[s];\n          }\n        }return n.languages.DFS(n.languages, function (t, n) {\n          n === a[e] && t != e && (this[t] = o);\n        }), a[e] = o;\n      }, DFS: function DFS(e, t, r, a) {\n        a = a || {};\n        for (var l in e) {\n          e.hasOwnProperty(l) && (t.call(e, l, e[l], r || l), 'Object' !== n.util.type(e[l]) || a[n.util.objId(e[l])] ? 'Array' !== n.util.type(e[l]) || a[n.util.objId(e[l])] || (a[n.util.objId(e[l])] = !0, n.languages.DFS(e[l], t, l, a)) : (a[n.util.objId(e[l])] = !0, n.languages.DFS(e[l], t, null, a)));\n        }\n      }\n    },\n    plugins: {},\n    highlightAll: function highlightAll(e, t) {\n      n.highlightAllUnder(document, e, t);\n    },\n    highlightAllUnder: function highlightAllUnder(e, t, r) {\n      var a = {\n        callback: r,\n        selector: 'code[class*=\"language-\"], [class*=\"language-\"] code, code[class*=\"lang-\"], [class*=\"lang-\"] code'\n      };\n      n.hooks.run('before-highlightall', a);\n      for (var l, i = a.elements || e.querySelectorAll(a.selector), o = 0; l = i[o++];) {\n        n.highlightElement(l, t === !0, a.callback);\n      }\n    },\n    highlightElement: function highlightElement(t, r, a) {\n      for (var l, i, o = t; o && !e.test(o.className);) {\n        o = o.parentNode;\n      }o && (l = (o.className.match(e) || [, ''])[1].toLowerCase(), i = n.languages[l]), t.className = t.className.replace(e, '').replace(/\\s+/g, ' ') + ' language-' + l, t.parentNode && (o = t.parentNode, /pre/i.test(o.nodeName) && (o.className = o.className.replace(e, '').replace(/\\s+/g, ' ') + ' language-' + l));\n      var s = t.textContent,\n          g = { element: t, language: l, grammar: i, code: s };\n      if (n.hooks.run('before-sanity-check', g), !g.code || !g.grammar) return g.code && (n.hooks.run('before-highlight', g), g.element.textContent = g.code, n.hooks.run('after-highlight', g)), n.hooks.run('complete', g), void 0;\n      if (n.hooks.run('before-highlight', g), r && _self.Worker) {\n        var u = new Worker(n.filename);\n        u.onmessage = function (e) {\n          g.highlightedCode = e.data, n.hooks.run('before-insert', g), g.element.innerHTML = g.highlightedCode, a && a.call(g.element), n.hooks.run('after-highlight', g), n.hooks.run('complete', g);\n        }, u.postMessage(JSON.stringify({\n          language: g.language,\n          code: g.code,\n          immediateClose: !0\n        }));\n      } else g.highlightedCode = n.highlight(g.code, g.grammar, g.language), n.hooks.run('before-insert', g), g.element.innerHTML = g.highlightedCode, a && a.call(t), n.hooks.run('after-highlight', g), n.hooks.run('complete', g);\n    },\n    highlight: function highlight(e, t, a) {\n      var l = n.tokenize(e, t);\n      return r.stringify(n.util.encode(l), a);\n    },\n    matchGrammar: function matchGrammar(e, t, r, a, l, i, o) {\n      var s = n.Token;\n      for (var g in r) {\n        if (r.hasOwnProperty(g) && r[g]) {\n          if (g == o) return;\n          var u = r[g];\n          u = 'Array' === n.util.type(u) ? u : [u];\n          for (var c = 0; c < u.length; ++c) {\n            var h = u[c],\n                f = h.inside,\n                d = !!h.lookbehind,\n                m = !!h.greedy,\n                p = 0,\n                y = h.alias;\n            if (m && !h.pattern.global) {\n              var v = h.pattern.toString().match(/[imuy]*$/)[0];\n              h.pattern = RegExp(h.pattern.source, v + 'g');\n            }\n            h = h.pattern || h;\n            for (var b = a, k = l; b < t.length; k += t[b].length, ++b) {\n              var w = t[b];\n              if (t.length > e.length) return;\n              if (!(w instanceof s)) {\n                h.lastIndex = 0;\n                var _ = h.exec(w),\n                    P = 1;\n                if (!_ && m && b != t.length - 1) {\n                  if (h.lastIndex = k, _ = h.exec(e), !_) break;\n                  for (var A = _.index + (d ? _[1].length : 0), j = _.index + _[0].length, x = b, O = k, N = t.length; N > x && (j > O || !t[x].type && !t[x - 1].greedy); ++x) {\n                    O += t[x].length, A >= O && (++b, k = O);\n                  }if (t[b] instanceof s || t[x - 1].greedy) continue;\n                  P = x - b, w = e.slice(k, O), _.index -= k;\n                }\n                if (_) {\n                  d && (p = _[1].length);\n                  var A = _.index + p,\n                      _ = _[0].slice(p),\n                      j = A + _.length,\n                      S = w.slice(0, A),\n                      C = w.slice(j),\n                      M = [b, P];\n                  S && (++b, k += S.length, M.push(S));\n                  var E = new s(g, f ? n.tokenize(_, f) : _, y, _, m);\n                  if (M.push(E), C && M.push(C), Array.prototype.splice.apply(t, M), 1 != P && n.matchGrammar(e, t, r, b, k, !0, g), i) break;\n                } else if (i) break;\n              }\n            }\n          }\n        }\n      }\n    },\n    tokenize: function tokenize(e, t) {\n      var r = [e],\n          a = t.rest;\n      if (a) {\n        for (var l in a) {\n          t[l] = a[l];\n        }delete t.rest;\n      }\n      return n.matchGrammar(e, r, t, 0, 0, !1), r;\n    },\n    hooks: {\n      all: {}, add: function add(e, t) {\n        var r = n.hooks.all;\n        r[e] = r[e] || [], r[e].push(t);\n      }, run: function run(e, t) {\n        var r = n.hooks.all[e];\n        if (r && r.length) for (var a, l = 0; a = r[l++];) {\n          a(t);\n        }\n      }\n    }\n  },\n      r = n.Token = function (e, t, n, r, a) {\n    this.type = e, this.content = t, this.alias = n, this.length = 0 | (r || '').length, this.greedy = !!a;\n  };\n  if (r.stringify = function (e, t, a) {\n    if ('string' == typeof e) return e;\n    if ('Array' === n.util.type(e)) return e.map(function (n) {\n      return r.stringify(n, t, e);\n    }).join('');\n    var l = {\n      type: e.type,\n      content: r.stringify(e.content, t, a),\n      tag: 'span',\n      classes: ['token', e.type],\n      attributes: {},\n      language: t,\n      parent: a\n    };\n    if (e.alias) {\n      var i = 'Array' === n.util.type(e.alias) ? e.alias : [e.alias];\n      Array.prototype.push.apply(l.classes, i);\n    }\n    n.hooks.run('wrap', l);\n    var o = Object.keys(l.attributes).map(function (e) {\n      return e + '=\"' + (l.attributes[e] || '').replace(/\"/g, '&quot;') + '\"';\n    }).join(' ');\n    return '<' + l.tag + ' class=\"' + l.classes.join(' ') + '\"' + (o ? ' ' + o : '') + '>' + l.content + '</' + l.tag + '>';\n  }, !_self.document) return _self.addEventListener ? (n.disableWorkerMessageHandler || _self.addEventListener('message', function (e) {\n    var t = JSON.parse(e.data),\n        r = t.language,\n        a = t.code,\n        l = t.immediateClose;\n    _self.postMessage(n.highlight(a, n.languages[r], r)), l && _self.close();\n  }, !1), _self.Prism) : _self.Prism;\n  var a = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();\n  return a && (n.filename = a.src, n.manual || a.hasAttribute('data-manual') || ('loading' !== document.readyState ? window.requestAnimationFrame ? window.requestAnimationFrame(n.highlightAll) : window.setTimeout(n.highlightAll, 16) : document.addEventListener('DOMContentLoaded', n.highlightAll))), _self.Prism;\n}();\n'undefined' != typeof module && module.exports && (module.exports = Prism), 'undefined' != typeof global && (global.Prism = Prism);\nPrism.languages.markup = {\n  comment: /<!--[\\s\\S]*?-->/,\n  prolog: /<\\?[\\s\\S]+?\\?>/,\n  doctype: /<!DOCTYPE[\\s\\S]+?>/i,\n  cdata: /<!\\[CDATA\\[[\\s\\S]*?]]>/i,\n  tag: {\n    pattern: /<\\/?(?!\\d)[^\\s>\\/=$<]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,\n    inside: {\n      tag: {\n        pattern: /^<\\/?[^\\s>\\/]+/i,\n        inside: { punctuation: /^<\\/?/, namespace: /^[^\\s>\\/:]+:/ }\n      },\n      'attr-value': {\n        pattern: /=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+)/i,\n        inside: {\n          punctuation: [/^=/, {\n            pattern: /(^|[^\\\\])[\"']/,\n            lookbehind: !0\n          }]\n        }\n      },\n      punctuation: /\\/?>/,\n      'attr-name': { pattern: /[^\\s>\\/]+/, inside: { namespace: /^[^\\s>\\/:]+:/ } }\n    }\n  },\n  entity: /&#?[\\da-z]{1,8};/i\n}, Prism.languages.markup.tag.inside['attr-value'].inside.entity = Prism.languages.markup.entity, Prism.hooks.add('wrap', function (a) {\n  'entity' === a.type && (a.attributes.title = a.content.replace(/&amp;/, '&'));\n}), Prism.languages.xml = Prism.languages.markup, Prism.languages.html = Prism.languages.markup, Prism.languages.mathml = Prism.languages.markup, Prism.languages.svg = Prism.languages.markup;\nPrism.languages.css = {\n  comment: /\\/\\*[\\s\\S]*?\\*\\//,\n  atrule: { pattern: /@[\\w-]+?.*?(?:;|(?=\\s*\\{))/i, inside: { rule: /@[\\w-]+/ } },\n  url: /url\\((?:([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,\n  selector: /[^{}\\s][^{};]*?(?=\\s*\\{)/,\n  string: {\n    pattern: /(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n    greedy: !0\n  },\n  property: /[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,\n  important: /\\B!important\\b/i,\n  'function': /[-a-z0-9]+(?=\\()/i,\n  punctuation: /[(){};:]/\n}, Prism.languages.css.atrule.inside.rest = Prism.util.clone(Prism.languages.css), Prism.languages.markup && (Prism.languages.insertBefore('markup', 'tag', {\n  style: {\n    pattern: /(<style[\\s\\S]*?>)[\\s\\S]*?(?=<\\/style>)/i,\n    lookbehind: !0,\n    inside: Prism.languages.css,\n    alias: 'language-css',\n    greedy: !0\n  }\n}), Prism.languages.insertBefore('inside', 'attr-value', {\n  'style-attr': {\n    pattern: /\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,\n    inside: {\n      'attr-name': {\n        pattern: /^\\s*style/i,\n        inside: Prism.languages.markup.tag.inside\n      },\n      punctuation: /^\\s*=\\s*['\"]|['\"]\\s*$/,\n      'attr-value': { pattern: /.+/i, inside: Prism.languages.css }\n    },\n    alias: 'language-css'\n  }\n}, Prism.languages.markup.tag));\nPrism.languages.clike = {\n  comment: [{\n    pattern: /(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,\n    lookbehind: !0\n  }, { pattern: /(^|[^\\\\:])\\/\\/.*/, lookbehind: !0 }],\n  string: {\n    pattern: /([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n    greedy: !0\n  },\n  'class-name': {\n    pattern: /((?:\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+)|(?:catch\\s+\\())[\\w.\\\\]+/i,\n    lookbehind: !0,\n    inside: { punctuation: /[.\\\\]/ }\n  },\n  keyword: /\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,\n  'boolean': /\\b(?:true|false)\\b/,\n  'function': /[a-z0-9_]+(?=\\()/i,\n  number: /\\b-?(?:0x[\\da-f]+|\\d*\\.?\\d+(?:e[+-]?\\d+)?)\\b/i,\n  operator: /--?|\\+\\+?|!=?=?|<=?|>=?|==?=?|&&?|\\|\\|?|\\?|\\*|\\/|~|\\^|%/,\n  punctuation: /[{}[\\];(),.:]/\n};\nPrism.languages.javascript = Prism.languages.extend('clike', {\n  keyword: /\\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\\b/,\n  number: /\\b-?(?:0[xX][\\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\\d*\\.?\\d+(?:[Ee][+-]?\\d+)?|NaN|Infinity)\\b/,\n  'function': /[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*\\()/i,\n  operator: /-[-=]?|\\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\\|[|=]?|\\*\\*?=?|\\/=?|~|\\^=?|%=?|\\?|\\.{3}/\n}), Prism.languages.insertBefore('javascript', 'keyword', {\n  regex: {\n    pattern: /(^|[^\\/])\\/(?!\\/)(\\[[^\\]\\r\\n]+]|\\\\.|[^\\/\\\\\\[\\r\\n])+\\/[gimyu]{0,5}(?=\\s*($|[\\r\\n,.;})]))/,\n    lookbehind: !0,\n    greedy: !0\n  },\n  'function-variable': {\n    pattern: /[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=\\s*(?:function\\b|(?:\\([^()]*\\)|[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/i,\n    alias: 'function'\n  }\n}), Prism.languages.insertBefore('javascript', 'string', {\n  'template-string': {\n    pattern: /`(?:\\\\[\\s\\S]|[^\\\\`])*`/,\n    greedy: !0,\n    inside: {\n      interpolation: {\n        pattern: /\\$\\{[^}]+\\}/,\n        inside: {\n          'interpolation-punctuation': {\n            pattern: /^\\$\\{|\\}$/,\n            alias: 'punctuation'\n          }, rest: Prism.languages.javascript\n        }\n      }, string: /[\\s\\S]+/\n    }\n  }\n}), Prism.languages.markup && Prism.languages.insertBefore('markup', 'tag', {\n  script: {\n    pattern: /(<script[\\s\\S]*?>)[\\s\\S]*?(?=<\\/script>)/i,\n    lookbehind: !0,\n    inside: Prism.languages.javascript,\n    alias: 'language-javascript',\n    greedy: !0\n  }\n}), Prism.languages.js = Prism.languages.javascript;\nPrism.languages.scss = Prism.languages.extend('css', {\n  comment: {\n    pattern: /(^|[^\\\\])(?:\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*)/,\n    lookbehind: !0\n  },\n  atrule: {\n    pattern: /@[\\w-]+(?:\\([^()]+\\)|[^(])*?(?=\\s+[{;])/,\n    inside: { rule: /@[\\w-]+/ }\n  },\n  url: /(?:[-a-z]+-)*url(?=\\()/i,\n  selector: {\n    pattern: /(?=\\S)[^@;{}()]?(?:[^@;{}()]|&|#\\{\\$[-\\w]+\\})+(?=\\s*\\{(?:\\}|\\s|[^}]+[:{][^}]+))/m,\n    inside: {\n      parent: { pattern: /&/, alias: 'important' },\n      placeholder: /%[-\\w]+/,\n      variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/\n    }\n  }\n}), Prism.languages.insertBefore('scss', 'atrule', {\n  keyword: [/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i, {\n    pattern: /( +)(?:from|through)(?= )/,\n    lookbehind: !0\n  }]\n}), Prism.languages.scss.property = {\n  pattern: /(?:[\\w-]|\\$[-\\w]+|#\\{\\$[-\\w]+\\})+(?=\\s*:)/i,\n  inside: { variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/ }\n}, Prism.languages.insertBefore('scss', 'important', { variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/ }), Prism.languages.insertBefore('scss', 'function', {\n  placeholder: {\n    pattern: /%[-\\w]+/,\n    alias: 'selector'\n  },\n  statement: { pattern: /\\B!(?:default|optional)\\b/i, alias: 'keyword' },\n  'boolean': /\\b(?:true|false)\\b/,\n  'null': /\\bnull\\b/,\n  operator: {\n    pattern: /(\\s)(?:[-+*\\/%]|[=!]=|<=?|>=?|and|or|not)(?=\\s)/,\n    lookbehind: !0\n  }\n}), Prism.languages.scss.atrule.inside.rest = Prism.util.clone(Prism.languages.scss);\n!function () {\n  if ('undefined' != typeof self && self.Prism && self.document) {\n    var t = [],\n        e = {},\n        n = function n() {};\n    Prism.plugins.toolbar = {};\n    var a = Prism.plugins.toolbar.registerButton = function (n, a) {\n      var o;\n      o = 'function' == typeof a ? a : function (t) {\n        var e;\n        return 'function' == typeof a.onClick ? (e = document.createElement('button'), e.type = 'button', e.addEventListener('click', function () {\n          a.onClick.call(this, t);\n        })) : 'string' == typeof a.url ? (e = document.createElement('a'), e.href = a.url) : e = document.createElement('span'), e.textContent = a.text, e;\n      }, t.push(e[n] = o);\n    },\n        o = Prism.plugins.toolbar.hook = function (a) {\n      var o = a.element.parentNode;\n      if (o && /pre/i.test(o.nodeName) && !o.classList.contains('code-toolbar')) {\n        o.classList.add('code-toolbar');\n        var r = document.createElement('div');\n        r.classList.add('toolbar'), document.body.hasAttribute('data-toolbar-order') && (t = document.body.getAttribute('data-toolbar-order').split(',').map(function (t) {\n          return e[t] || n;\n        })), t.forEach(function (t) {\n          var e = t(a);\n          if (e) {\n            var n = document.createElement('div');\n            n.classList.add('toolbar-item'), n.appendChild(e), r.appendChild(n);\n          }\n        }), o.appendChild(r);\n      }\n    };\n    a('label', function (t) {\n      var e = t.element.parentNode;\n      if (e && /pre/i.test(e.nodeName) && e.hasAttribute('data-label')) {\n        var n,\n            a,\n            o = e.getAttribute('data-label');\n        try {\n          a = document.querySelector('template#' + o);\n        } catch (r) {}\n        return a ? n = a.content : (e.hasAttribute('data-url') ? (n = document.createElement('a'), n.href = e.getAttribute('data-url')) : n = document.createElement('span'), n.textContent = o), n;\n      }\n    }), Prism.hooks.add('complete', o);\n  }\n}();\n!function () {\n  if ('undefined' != typeof self && self.Prism && self.document) {\n    if (!Prism.plugins.toolbar) return console.warn('Show Languages plugin loaded before Toolbar plugin.'), void 0;\n    var e = {\n      html: 'HTML',\n      xml: 'XML',\n      svg: 'SVG',\n      mathml: 'MathML',\n      css: 'CSS',\n      clike: 'C-like',\n      javascript: 'JavaScript',\n      abap: 'ABAP',\n      actionscript: 'ActionScript',\n      apacheconf: 'Apache Configuration',\n      apl: 'APL',\n      applescript: 'AppleScript',\n      asciidoc: 'AsciiDoc',\n      asm6502: '6502 Assembly',\n      aspnet: 'ASP.NET (C#)',\n      autohotkey: 'AutoHotkey',\n      autoit: 'AutoIt',\n      basic: 'BASIC',\n      csharp: 'C#',\n      cpp: 'C++',\n      coffeescript: 'CoffeeScript',\n      'css-extras': 'CSS Extras',\n      django: 'Django/Jinja2',\n      fsharp: 'F#',\n      glsl: 'GLSL',\n      graphql: 'GraphQL',\n      http: 'HTTP',\n      ichigojam: 'IchigoJam',\n      inform7: 'Inform 7',\n      json: 'JSON',\n      latex: 'LaTeX',\n      livescript: 'LiveScript',\n      lolcode: 'LOLCODE',\n      matlab: 'MATLAB',\n      mel: 'MEL',\n      n4js: 'N4JS',\n      nasm: 'NASM',\n      nginx: 'nginx',\n      nsis: 'NSIS',\n      objectivec: 'Objective-C',\n      ocaml: 'OCaml',\n      opencl: 'OpenCL',\n      parigp: 'PARI/GP',\n      php: 'PHP',\n      'php-extras': 'PHP Extras',\n      powershell: 'PowerShell',\n      properties: '.properties',\n      protobuf: 'Protocol Buffers',\n      jsx: 'React JSX',\n      renpy: 'Ren\\'py',\n      rest: 'reST (reStructuredText)',\n      sas: 'SAS',\n      sass: 'Sass (Sass)',\n      scss: 'Sass (Scss)',\n      sql: 'SQL',\n      typescript: 'TypeScript',\n      vbnet: 'VB.Net',\n      vhdl: 'VHDL',\n      vim: 'vim',\n      wiki: 'Wiki markup',\n      xojo: 'Xojo (REALbasic)',\n      yaml: 'YAML'\n    };\n    Prism.plugins.toolbar.registerButton('show-language', function (t) {\n      var a = t.element.parentNode;\n      if (a && /pre/i.test(a.nodeName)) {\n        var s = a.getAttribute('data-language') || e[t.language] || t.language.substring(0, 1).toUpperCase() + t.language.substring(1),\n            i = document.createElement('span');\n        return i.textContent = s, i;\n      }\n    });\n  }\n}();\n\n}).call(this,typeof global !== \"undefined\" ? global : typeof self !== \"undefined\" ? self : typeof window !== \"undefined\" ? window : {})\n},{\"./modules/activeMenu\":2,\"./modules/menu\":3,\"./modules/scrollBarWIdth\":4}],2:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nvar activeMenu = function activeMenu(menuId) {\n  var menu = document.getElementById(menuId);\n  if (!menu) return;\n  var links = [].concat(_toConsumableArray(menu.querySelectorAll('a')));\n  if (!links) return;\n  links.map(function (link) {\n    var url = document.location.href;\n    if (link.href === url || link.href === url.slice(0, -1)) link.classList.add('active');\n  });\n};\n\nexports.default = activeMenu;\nmodule.exports = exports['default'];\n\n},{}],3:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar openMenu = function openMenu(navId, toggleId) {\n  var nav = document.getElementById(navId);\n  var toggle = document.getElementById(toggleId);\n\n  if (!nav || !toggle) return;\n\n  toggle.addEventListener('click', function () {\n    nav.classList.toggle('show');\n    toggle.classList.toggle('active');\n  });\n};\n\nexports.default = openMenu;\nmodule.exports = exports['default'];\n\n},{}],4:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar getScrollBarWidth = function getScrollBarWidth() {\n  return window.innerWidth - document.documentElement.getBoundingClientRect().width;\n};\n\ndocument.documentElement.style.setProperty('--scrollbar', getScrollBarWidth() + 'px');\n\nexports.getScrollBarWidth = getScrollBarWidth;\n\n},{}]},{},[1]);\n\n//# sourceMappingURL=scripts.js.map\n"
  },
  {
    "path": "docs/sitemap.xml",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n    <url>\n        <loc>https://ed-grid.com/</loc>\n        <lastmod>2020-09-05T17:07:46.413Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/test.html</loc>\n        <lastmod>2020-09-05T17:06:26.756Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/casos-de-exito/</loc>\n        <lastmod>2020-09-05T17:07:46.648Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/changelog/</loc>\n        <lastmod>2020-09-05T17:07:46.922Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/creditos/</loc>\n        <lastmod>2020-09-05T17:07:47.147Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/alineacion.1.html</loc>\n        <lastmod>2020-08-06T20:27:42.665Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/alineacion.html</loc>\n        <lastmod>2020-09-05T17:07:47.380Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/banner.html</loc>\n        <lastmod>2020-09-05T17:07:47.668Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/base.1.html</loc>\n        <lastmod>2020-08-06T20:27:42.665Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/base.html</loc>\n        <lastmod>2020-09-05T17:07:47.962Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/botones.html</loc>\n        <lastmod>2020-08-06T20:27:42.681Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/breakpoints.html</loc>\n        <lastmod>2020-09-05T17:07:48.114Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/cards.html</loc>\n        <lastmod>2020-09-05T17:07:48.383Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/css.html</loc>\n        <lastmod>2020-08-06T20:27:42.681Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/distribucion.html</loc>\n        <lastmod>2020-09-05T17:07:48.484Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/estructura.html</loc>\n        <lastmod>2020-09-05T17:07:48.486Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/flexbox-helpers.html</loc>\n        <lastmod>2020-09-05T17:07:48.488Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/funciones.html</loc>\n        <lastmod>2020-09-05T17:07:48.489Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/grids.html</loc>\n        <lastmod>2020-09-05T17:07:48.491Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/helpers.html</loc>\n        <lastmod>2020-09-05T17:07:48.493Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/imagenes.html</loc>\n        <lastmod>2020-08-20T23:27:34.658Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/</loc>\n        <lastmod>2020-09-05T17:07:48.495Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/instalacion.html</loc>\n        <lastmod>2020-09-05T17:07:48.497Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/layout-css-grid.html</loc>\n        <lastmod>2020-09-05T17:07:48.499Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/layout-flexbox.html</loc>\n        <lastmod>2020-09-05T17:07:48.500Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/layout.html</loc>\n        <lastmod>2020-09-05T17:07:48.502Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/mediaqueries.html</loc>\n        <lastmod>2020-09-05T17:07:48.504Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/menu-responsive.html</loc>\n        <lastmod>2020-09-05T17:07:48.506Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/menus.html</loc>\n        <lastmod>2020-09-05T17:07:48.508Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/modo-dev.html</loc>\n        <lastmod>2020-09-05T17:07:48.509Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/offset.html</loc>\n        <lastmod>2020-09-05T17:07:48.511Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/personalizar.html</loc>\n        <lastmod>2020-09-05T17:07:48.513Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/prototipado-avanzado.html</loc>\n        <lastmod>2020-09-05T17:07:48.514Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/prototipado.html</loc>\n        <lastmod>2020-09-05T17:07:48.516Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/ratios.html</loc>\n        <lastmod>2020-09-05T17:07:48.518Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/sass.html</loc>\n        <lastmod>2020-09-05T17:07:48.520Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/skeleton.html</loc>\n        <lastmod>2020-09-05T17:07:48.521Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/videos.html</loc>\n        <lastmod>2020-09-05T17:07:48.523Z</lastmod>\n    </url>\n    <url>\n        <loc>https://ed-grid.com/documentacion/visibilidad.html</loc>\n        <lastmod>2020-09-05T17:07:48.526Z</lastmod>\n    </url>\n</urlset>"
  },
  {
    "path": "docs/test.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Title</title>\n  <link rel=\"stylesheet\" href=\"css/styles.css?t=1599325711742\">\n  <style>\n    .dev .ed-grid {\n      outline: 1px solid hsl(0,100%,80%);\n      padding : 5px;\n      position : relative;\n    }\n    .dev .ed-grid::before {\n      content: attr(class);\n      position : absolute;\n      bottom : 0;\n      right : 0;\n      background : hsl(0,100%,80%);\n      color: #fff;\n      padding : 2px 6px;\n      opacity : .9;\n    }\n    .dev .ed-grid > * {\n      outline: 1px solid hsl(120,100%,40%);\n      position : relative;\n    }\n\n    .dev .ed-grid > *::before {\n      font-size : 14px;\n      font-weight : normal;\n      content: attr(class);\n      position : absolute;\n      bottom : 0;\n      right : 0;\n      background : hsl(120,100%,40%);\n      color: #fff;\n      padding : 2px 6px;\n      opacity : .9;\n    }\n  </style>\n</head>\n<body>\n\n</body>\n</html>\n"
  },
  {
    "path": "ed-grid.scss",
    "content": "@import \"src/scss/ed-grid\";\n"
  },
  {
    "path": "gulpfile.babel.js",
    "content": "import gulp from 'gulp'\nimport sass from 'gulp-sass'\nimport plumber from 'gulp-plumber'\nimport postcss from 'gulp-postcss'\nimport autoprefixer from 'autoprefixer'\nimport browserSync from 'browser-sync'\nimport sourcemaps from 'gulp-sourcemaps'\nimport browserify from 'browserify'\nimport babelify from 'babelify'\nimport buffer from 'vinyl-buffer'\nimport source from 'vinyl-source-stream'\nimport rename from 'gulp-rename'\nimport pug from 'gulp-pug'\nimport watch from 'gulp-watch'\nimport minify from 'gulp-minify'\nimport imagemin from 'gulp-imagemin'\nimport sitemap from 'gulp-sitemap'\nimport cachebust from 'gulp-cache-bust'\nimport tildeImporter from 'node-sass-tilde-importer'\nimport data from 'gulp-data'\nimport fs from 'fs'\n\n\nconst server = browserSync.create()\n\nconst postcssPlugins = [\n  autoprefixer({browsers: '> 1%, last 2 versions, Firefox ESR, Opera 12.1'})\n]\n\n// Compila Sass para desarrollo\ngulp.task('styles-dev', () => {\n  gulp.src('./src/scss/styles.scss')\n    .pipe(sourcemaps.init())\n    .pipe(plumber())\n    .pipe(sass({\n      importer: tildeImporter,\n      sourceComments: true,\n      outputStyle: 'expanded'\n    }))\n    .pipe(postcss(postcssPlugins))\n    .pipe(sourcemaps.write())\n    .pipe(gulp.dest('./docs/css/'))\n    .pipe(server.stream({match: '**/*.css'}))\n})\n\n// Compila Sass para producción\ngulp.task('styles-build', () => {\n  gulp.src('./src/scss/styles.scss')\n    .pipe(plumber())\n    .pipe(sass({\n      importer: tildeImporter,\n      outputStyle: 'compressed'\n    }))\n    .pipe(postcss(postcssPlugins))\n    .pipe(gulp.dest('./docs/css/'))\n    .pipe(server.stream({match: '**/*.css'}))\n})\n\n// Compila versión CSS minificada\ngulp.task('css-build-min', () => {\n  gulp.src('./src/scss/ed-grid-css.scss')\n    .pipe(plumber())\n    .pipe(sass({\n      outputStyle: 'compressed'\n    }))\n    .pipe(postcss(postcssPlugins))\n    .pipe(rename('ed-grid.min.css'))\n    .pipe(gulp.dest('./src/css/'))\n})\n\n// Compila versión CSS sin minificar\ngulp.task('css-build', () => {\n  gulp.src('./src/scss/ed-grid-css.scss')\n    .pipe(plumber())\n    .pipe(sass({\n      outputStyle: 'expanded'\n    }))\n    .pipe(postcss(postcssPlugins))\n    .pipe(rename('ed-grid.css'))\n    .pipe(gulp.dest('./src/css/'))\n})\n\n// Compila páginas internas\ngulp.task('pug-dev', () =>\n  gulp.src('./src/pug/pages/**/*.pug')\n    .pipe(plumber())\n    .pipe(data(function () {\n      return JSON.parse(fs.readFileSync('./src/data/casos-de-exito.json'))\n    }))\n    .pipe(pug({\n      pretty: true,\n      basedir: './'\n    }))\n    .pipe(gulp.dest('./docs'))\n)\n\n// Compila páginas internas minificadas\ngulp.task('pug-build', () =>\n  gulp.src('./src/pug/pages/**/*.pug')\n    .pipe(plumber())\n    .pipe(data(function () {\n      return JSON.parse(fs.readFileSync('./src/data/casos-de-exito.json'))\n    }))\n    .pipe(pug({\n      basedir: './'\n    }))\n    .pipe(gulp.dest('./docs'))\n)\n\n// Compila JavaScript sin minificar\ngulp.task('scripts-dev', () =>\n  browserify('./src/js/index.js')\n    .transform(babelify, {\n      global: true // permite importar desde afuera (como node_modules)\n    })\n    .bundle()\n    .on('error', function (err) {\n      console.error(err)\n      this.emit('end')\n    })\n    .pipe(source('scripts.js'))\n    .pipe(buffer())\n    .pipe(minify({\n      ext: {\n        src: '-min.js',\n        min: '.js'\n      }\n    }))\n    .pipe(sourcemaps.init({loadMaps: true}))\n    .pipe(sourcemaps.write('.'))\n    .pipe(gulp.dest('./docs/js'))\n)\n\n// Compila JavaScript minificado\ngulp.task('scripts-build', () =>\n  browserify('./src/js/index.js')\n    .transform(babelify, {\n      global: true // permite importar desde afuera (como node_modules)\n    })\n    .bundle()\n    .on('error', function (err) {\n      console.error(err)\n      this.emit('end')\n    })\n    .pipe(source('scripts.js'))\n    .pipe(buffer())\n    .pipe(minify({\n      ext: {\n        src: '.js',\n        min: '-min.js'\n      }\n    }))\n    .pipe(sourcemaps.init({loadMaps: true}))\n    .pipe(sourcemaps.write('.'))\n    .pipe(gulp.dest('./docs/js'))\n)\n\n// Copia y comprime imágenes\ngulp.task('images-build', () => {\n  gulp.src('./src/img/**/**')\n    .pipe(imagemin([\n      imagemin.gifsicle({interlaced: true}),\n      imagemin.jpegtran({progressive: true}),\n      imagemin.optipng({optimizationLevel: 5}),\n      imagemin.svgo()\n    ]))\n    .pipe(gulp.dest('./docs/assets/img'))\n})\n\n// Copia imágenes para desarrollo\ngulp.task('images-dev', () => {\n  gulp.src('./src/img/**/**')\n    .pipe(gulp.dest('./docs/assets/img'))\n})\n\n// Copia html de testing\ngulp.task('html', () => {\n  gulp.src('./test.html')\n    .pipe(gulp.dest('./docs/'))\n})\n\ngulp.task('sitemap', () => {\n  gulp.src('./docs/**/*.html', {\n    read: false\n  })\n    .pipe(sitemap({\n      siteUrl: 'https://ed-grid.com' // remplazar por tu dominio\n    }))\n    .pipe(gulp.dest('./docs'))\n})\n\ngulp.task('cache', () => {\n  gulp.src('./docs/**/*.html')\n    .pipe(cachebust({\n      type: 'timestamp'\n    }))\n    .pipe(gulp.dest('./docs'))\n})\n\ngulp.task('dev', ['styles-dev', 'pug-dev', 'scripts-dev', 'images-dev', 'html'], () => {\n  server.init({\n    server: {\n      baseDir: './docs'\n    }\n  })\n\n  gulp.watch('./src/scss/**/**', () => gulp.start('styles-dev'))\n  gulp.watch('./src/js/**/**', () => gulp.start('scripts-dev', server.reload))\n  gulp.watch('./src/pug/**/**', () => gulp.start('pug-dev', server.reload))\n  gulp.watch('./src/data/**/**', () => gulp.start('pug-dev', server.reload))\n  gulp.watch('./src/md/**/**', () => gulp.start('pug-dev', server.reload))\n  gulp.watch('./test.html', () => gulp.start('html', server.reload))\n  gulp.watch('./src/img/**/**', () => gulp.start('images-dev'))\n})\n\n// Compila versión CSS para producción\ngulp.task('css', ['css-build', 'css-build-min'])\ngulp.task('build', ['styles-build', 'pug-build', 'scripts-build', 'images-build', 'cache', 'sitemap'])\n"
  },
  {
    "path": "index.js",
    "content": "import { getScrollBarWidth } from './src/js/modules/scrollBarWIdth'\n\nmodule.exports = getScrollBarWidth\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"ed-grid\",\n  \"version\": \"3.0.2\",\n  \"description\": \"EDgrid (aka ed-grid) is a minimalist Sass/CSS library for building responsive web layouts.\",\n  \"style\": \"ed-grid.scss\",\n  \"main\": \"ed-grid.scss\",\n  \"author\": \"Alvaro Felipe <alvaro@ed.team>\",\n  \"contributors\": [\n    {\n      \"name\": \"Alexis Mora Angulo\",\n      \"email\": \"juanalexismoraangulo@hotmail.com\",\n      \"url\": \"https://twitter.com/Jopzik\"\n    }\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/escueladigital/ED-GRID\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/escueladigital/ED-GRID/issues\"\n  },\n  \"scripts\": {\n    \"start\": \"./node_modules/.bin/gulp\"\n  },\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.4.1\",\n    \"babel-cli\": \"^6.16.0\",\n    \"babel-core\": \"^6.26.0\",\n    \"babel-plugin-add-module-exports\": \"^0.2.1\",\n    \"babel-preset-env\": \"^1.6.0\",\n    \"babel-register\": \"^6.18.0\",\n    \"babelify\": \"^7.3.0\",\n    \"browser-sync\": \"^2.16.0\",\n    \"browserify\": \"^13.1.1\",\n    \"cssnano\": \"^3.7.5\",\n    \"edteam-style-guides\": \"0.0.68\",\n    \"gulp\": \"^3.9.1\",\n    \"gulp-babel\": \"^8.0.0\",\n    \"gulp-cache-bust\": \"^1.4.0\",\n    \"gulp-data\": \"^1.3.1\",\n    \"gulp-imagemin\": \"^4.1.0\",\n    \"gulp-minify\": \"^3.1.0\",\n    \"gulp-plumber\": \"^1.1.0\",\n    \"gulp-postcss\": \"^6.2.0\",\n    \"gulp-pug\": \"^4.0.1\",\n    \"gulp-rename\": \"^1.2.3\",\n    \"gulp-sass\": \"^3.1.0\",\n    \"gulp-sitemap\": \"^5.1.0\",\n    \"gulp-sourcemaps\": \"^1.6.0\",\n    \"gulp-watch\": \"^5.0.1\",\n    \"jstransformer-markdown-it\": \"^2.1.0\",\n    \"node-sass-tilde-importer\": \"^1.0.2\",\n    \"vinyl-buffer\": \"^1.0.0\",\n    \"vinyl-source-stream\": \"^1.1.0\"\n  }\n}\n"
  },
  {
    "path": "src/css/ed-grid.css",
    "content": "@charset \"UTF-8\";\n/*\n* $names - Lista de nombres que usaremos para nombrar nuestras clases.\n*          Recorremos una lista por si queremos múltiples selectores con el mismo valor\n*          Ejemplo: (red-color, color-red)\n*          sería igual a .red-color { color : red; } .color-red { color : red; }\n*\n* $property, $value - Propiedad CSS con su respectivo valor\n*\n* $concact - En ocasiones necesitaremos concadenar para crear clases más específicas.\n*            Por la forma en que funciona el mixin no podemos usar concadenar desde los names.\n*            Para ver un ejemplo práctico vaya a la parte de los gaps en _core-grid.scss\n*\n* $debug - Ver cómo sería el resultado en la construcción de la clase y el CSS de salida.\n*          Por defecto está desactivado\n*/\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: sans-serif;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\na {\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}\n\nbody.dev:before,\nbody.desarrollo:before, body.dev .ed-container:before, body.dev .ed-grid:before,\nbody.desarrollo .ed-container:before,\nbody.desarrollo .ed-grid:before, body.dev .ed-item:before, body.dev .ed-grid > *:before,\nbody.desarrollo .ed-item:before,\nbody.desarrollo .ed-grid > *:before, body.dev-hover .ed-container:hover:before, body.dev-hover .ed-grid:hover:before,\nbody.desarrollo-hover .ed-container:hover:before,\nbody.desarrollo-hover .ed-grid:hover:before, body.dev-hover .ed-item:hover:before, body.dev-hover .ed-grid > *:hover:before,\nbody.desarrollo-hover .ed-item:hover:before,\nbody.desarrollo-hover .ed-grid > *:hover:before {\n  content: attr(class);\n  font-style: italic;\n  font-size: 0.75rem;\n  font-weight: normal;\n  z-index: 1;\n  right: 0;\n  position: absolute;\n  display: table;\n  width: 100%;\n  padding: 0 0.3125em;\n  height: 1.25rem;\n  line-height: 1.25rem;\n}\n\nbody.dev,\nbody.desarrollo {\n  margin: 0 !important;\n  position: relative;\n  top: 66px;\n}\n\nbody.dev:before,\nbody.desarrollo:before {\n  position: fixed;\n  background: steelblue;\n  color: #FFF;\n  font-size: 0.875rem;\n  text-align: center;\n  line-height: 36px;\n  height: 36px;\n  top: 0;\n}\n\nbody.dev:before,\nbody.desarrollo:before {\n  content: \"ed-grid: size s, from 0 (ed-containers: red, ed-items: blue, yellow)\";\n}\n\n@media screen and (min-width: 640px) {\n  body.dev:before,\n  body.desarrollo:before {\n    content: \"ed-grid: size m, from 640px (ed-containers: red, ed-items: blue, yellow)\";\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  body.dev:before,\n  body.desarrollo:before {\n    content: \"ed-grid: size l, from 1024px (ed-containers: red, ed-items: blue, yellow)\";\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  body.dev:before,\n  body.desarrollo:before {\n    content: \"ed-grid: size lg, from 1024px (ed-containers: red, ed-items: blue, yellow)\";\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  body.dev:before,\n  body.desarrollo:before {\n    content: \"ed-grid: size xl, from 1440px (ed-containers: red, ed-items: blue, yellow)\";\n  }\n}\n\nbody.dev .ed-container, body.dev .ed-grid,\nbody.desarrollo .ed-container,\nbody.desarrollo .ed-grid {\n  padding-top: 1.25rem;\n  margin-bottom: 10px;\n  outline: 1px solid tomato;\n  position: relative;\n}\n\nbody.dev .ed-container .ed-container,\nbody.dev .ed-container .ed-grid, body.dev .ed-grid .ed-container,\nbody.dev .ed-grid .ed-grid,\nbody.desarrollo .ed-container .ed-container,\nbody.desarrollo .ed-container .ed-grid,\nbody.desarrollo .ed-grid .ed-container,\nbody.desarrollo .ed-grid .ed-grid {\n  margin-bottom: 0;\n}\n\nbody.dev .ed-container:before, body.dev .ed-grid:before,\nbody.desarrollo .ed-container:before,\nbody.desarrollo .ed-grid:before {\n  top: 0;\n  background: rgba(255, 99, 71, 0.3);\n  color: tomato;\n}\n\nbody.dev .ed-item, body.dev .ed-grid > *,\nbody.desarrollo .ed-item,\nbody.desarrollo .ed-grid > * {\n  position: relative;\n  padding-bottom: 1.25rem;\n  background-color: rgba(70, 130, 180, 0.1);\n  outline: 1px solid steelblue;\n  background-clip: content-box;\n}\n\nbody.dev .ed-item:before, body.dev .ed-grid > *:before,\nbody.desarrollo .ed-item:before,\nbody.desarrollo .ed-grid > *:before {\n  background: rgba(70, 130, 180, 0.8);\n  color: #FFF;\n  bottom: 0;\n}\n\nbody.dev-hover .ed-container:hover, body.dev-hover .ed-grid:hover,\nbody.desarrollo-hover .ed-container:hover,\nbody.desarrollo-hover .ed-grid:hover {\n  padding-top: 1.25rem;\n  margin-bottom: 10px;\n  outline: 1px solid tomato;\n  position: relative;\n}\n\nbody.dev-hover .ed-container:hover .ed-container,\nbody.dev-hover .ed-container:hover .ed-grid, body.dev-hover .ed-grid:hover .ed-container,\nbody.dev-hover .ed-grid:hover .ed-grid,\nbody.desarrollo-hover .ed-container:hover .ed-container,\nbody.desarrollo-hover .ed-container:hover .ed-grid,\nbody.desarrollo-hover .ed-grid:hover .ed-container,\nbody.desarrollo-hover .ed-grid:hover .ed-grid {\n  margin-bottom: 0;\n}\n\nbody.dev-hover .ed-container:hover:before, body.dev-hover .ed-grid:hover:before,\nbody.desarrollo-hover .ed-container:hover:before,\nbody.desarrollo-hover .ed-grid:hover:before {\n  top: 0;\n  background: rgba(255, 99, 71, 0.3);\n  color: tomato;\n}\n\nbody.dev-hover .ed-item:hover, body.dev-hover .ed-grid > *:hover,\nbody.desarrollo-hover .ed-item:hover,\nbody.desarrollo-hover .ed-grid > *:hover {\n  position: relative;\n  padding-bottom: 1.25rem;\n  background-color: rgba(70, 130, 180, 0.1);\n  outline: 1px solid steelblue;\n  background-clip: content-box;\n}\n\nbody.dev-hover .ed-item:hover:before, body.dev-hover .ed-grid > *:hover:before,\nbody.desarrollo-hover .ed-item:hover:before,\nbody.desarrollo-hover .ed-grid > *:hover:before {\n  background: rgba(70, 130, 180, 0.8);\n  color: #FFF;\n  bottom: 0;\n}\n\n.ed-container {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  max-width: var(--max-width);\n  margin-left: auto;\n  margin-right: auto;\n  width: 100%;\n}\n\n.ed-item {\n  margin: 0;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.ed-container.full {\n  max-width: 100%;\n}\n\n.ed-item {\n  width: 100%;\n}\n\n.ed-item.ed-container {\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.s-5,\n.ed-item.s-5 {\n  width: 5%;\n}\n\n.s-10,\n.ed-item.s-10 {\n  width: 10%;\n}\n\n.s-15,\n.ed-item.s-15 {\n  width: 15%;\n}\n\n.s-20,\n.ed-item.s-20 {\n  width: 20%;\n}\n\n.s-25,\n.ed-item.s-25 {\n  width: 25%;\n}\n\n.s-30,\n.ed-item.s-30 {\n  width: 30%;\n}\n\n.s-35,\n.ed-item.s-35 {\n  width: 35%;\n}\n\n.s-40,\n.ed-item.s-40 {\n  width: 40%;\n}\n\n.s-45,\n.ed-item.s-45 {\n  width: 45%;\n}\n\n.s-50,\n.ed-item.s-50 {\n  width: 50%;\n}\n\n.s-55,\n.ed-item.s-55 {\n  width: 55%;\n}\n\n.s-60,\n.ed-item.s-60 {\n  width: 60%;\n}\n\n.s-65,\n.ed-item.s-65 {\n  width: 65%;\n}\n\n.s-70,\n.ed-item.s-70 {\n  width: 70%;\n}\n\n.s-75,\n.ed-item.s-75 {\n  width: 75%;\n}\n\n.s-80,\n.ed-item.s-80 {\n  width: 80%;\n}\n\n.s-85,\n.ed-item.s-85 {\n  width: 85%;\n}\n\n.s-90,\n.ed-item.s-90 {\n  width: 90%;\n}\n\n.s-95,\n.ed-item.s-95 {\n  width: 95%;\n}\n\n.s-100,\n.ed-item.s-100 {\n  width: 100%;\n}\n\n.s-1-3,\n.ed-item.s-1-3 {\n  width: 33.33333%;\n}\n\n.s-2-3,\n.ed-item.s-2-3 {\n  width: 66.66667%;\n}\n\n.s-3-3,\n.ed-item.s-3-3 {\n  width: 100%;\n}\n\n.s-1-6,\n.ed-item.s-1-6 {\n  width: 16.66667%;\n}\n\n.s-2-6,\n.ed-item.s-2-6 {\n  width: 33.33333%;\n}\n\n.s-3-6,\n.ed-item.s-3-6 {\n  width: 50%;\n}\n\n.s-4-6,\n.ed-item.s-4-6 {\n  width: 66.66667%;\n}\n\n.s-5-6,\n.ed-item.s-5-6 {\n  width: 83.33333%;\n}\n\n.s-6-6,\n.ed-item.s-6-6 {\n  width: 100%;\n}\n\n@media screen and (min-width: 640px) {\n  .m-5,\n  .ed-item.m-5 {\n    width: 5%;\n  }\n  .m-10,\n  .ed-item.m-10 {\n    width: 10%;\n  }\n  .m-15,\n  .ed-item.m-15 {\n    width: 15%;\n  }\n  .m-20,\n  .ed-item.m-20 {\n    width: 20%;\n  }\n  .m-25,\n  .ed-item.m-25 {\n    width: 25%;\n  }\n  .m-30,\n  .ed-item.m-30 {\n    width: 30%;\n  }\n  .m-35,\n  .ed-item.m-35 {\n    width: 35%;\n  }\n  .m-40,\n  .ed-item.m-40 {\n    width: 40%;\n  }\n  .m-45,\n  .ed-item.m-45 {\n    width: 45%;\n  }\n  .m-50,\n  .ed-item.m-50 {\n    width: 50%;\n  }\n  .m-55,\n  .ed-item.m-55 {\n    width: 55%;\n  }\n  .m-60,\n  .ed-item.m-60 {\n    width: 60%;\n  }\n  .m-65,\n  .ed-item.m-65 {\n    width: 65%;\n  }\n  .m-70,\n  .ed-item.m-70 {\n    width: 70%;\n  }\n  .m-75,\n  .ed-item.m-75 {\n    width: 75%;\n  }\n  .m-80,\n  .ed-item.m-80 {\n    width: 80%;\n  }\n  .m-85,\n  .ed-item.m-85 {\n    width: 85%;\n  }\n  .m-90,\n  .ed-item.m-90 {\n    width: 90%;\n  }\n  .m-95,\n  .ed-item.m-95 {\n    width: 95%;\n  }\n  .m-100,\n  .ed-item.m-100 {\n    width: 100%;\n  }\n  .m-1-3,\n  .ed-item.m-1-3 {\n    width: 33.33333%;\n  }\n  .m-2-3,\n  .ed-item.m-2-3 {\n    width: 66.66667%;\n  }\n  .m-3-3,\n  .ed-item.m-3-3 {\n    width: 100%;\n  }\n  .m-1-6,\n  .ed-item.m-1-6 {\n    width: 16.66667%;\n  }\n  .m-2-6,\n  .ed-item.m-2-6 {\n    width: 33.33333%;\n  }\n  .m-3-6,\n  .ed-item.m-3-6 {\n    width: 50%;\n  }\n  .m-4-6,\n  .ed-item.m-4-6 {\n    width: 66.66667%;\n  }\n  .m-5-6,\n  .ed-item.m-5-6 {\n    width: 83.33333%;\n  }\n  .m-6-6,\n  .ed-item.m-6-6 {\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-5,\n  .ed-item.l-5 {\n    width: 5%;\n  }\n  .l-10,\n  .ed-item.l-10 {\n    width: 10%;\n  }\n  .l-15,\n  .ed-item.l-15 {\n    width: 15%;\n  }\n  .l-20,\n  .ed-item.l-20 {\n    width: 20%;\n  }\n  .l-25,\n  .ed-item.l-25 {\n    width: 25%;\n  }\n  .l-30,\n  .ed-item.l-30 {\n    width: 30%;\n  }\n  .l-35,\n  .ed-item.l-35 {\n    width: 35%;\n  }\n  .l-40,\n  .ed-item.l-40 {\n    width: 40%;\n  }\n  .l-45,\n  .ed-item.l-45 {\n    width: 45%;\n  }\n  .l-50,\n  .ed-item.l-50 {\n    width: 50%;\n  }\n  .l-55,\n  .ed-item.l-55 {\n    width: 55%;\n  }\n  .l-60,\n  .ed-item.l-60 {\n    width: 60%;\n  }\n  .l-65,\n  .ed-item.l-65 {\n    width: 65%;\n  }\n  .l-70,\n  .ed-item.l-70 {\n    width: 70%;\n  }\n  .l-75,\n  .ed-item.l-75 {\n    width: 75%;\n  }\n  .l-80,\n  .ed-item.l-80 {\n    width: 80%;\n  }\n  .l-85,\n  .ed-item.l-85 {\n    width: 85%;\n  }\n  .l-90,\n  .ed-item.l-90 {\n    width: 90%;\n  }\n  .l-95,\n  .ed-item.l-95 {\n    width: 95%;\n  }\n  .l-100,\n  .ed-item.l-100 {\n    width: 100%;\n  }\n  .l-1-3,\n  .ed-item.l-1-3 {\n    width: 33.33333%;\n  }\n  .l-2-3,\n  .ed-item.l-2-3 {\n    width: 66.66667%;\n  }\n  .l-3-3,\n  .ed-item.l-3-3 {\n    width: 100%;\n  }\n  .l-1-6,\n  .ed-item.l-1-6 {\n    width: 16.66667%;\n  }\n  .l-2-6,\n  .ed-item.l-2-6 {\n    width: 33.33333%;\n  }\n  .l-3-6,\n  .ed-item.l-3-6 {\n    width: 50%;\n  }\n  .l-4-6,\n  .ed-item.l-4-6 {\n    width: 66.66667%;\n  }\n  .l-5-6,\n  .ed-item.l-5-6 {\n    width: 83.33333%;\n  }\n  .l-6-6,\n  .ed-item.l-6-6 {\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-5,\n  .ed-item.lg-5 {\n    width: 5%;\n  }\n  .lg-10,\n  .ed-item.lg-10 {\n    width: 10%;\n  }\n  .lg-15,\n  .ed-item.lg-15 {\n    width: 15%;\n  }\n  .lg-20,\n  .ed-item.lg-20 {\n    width: 20%;\n  }\n  .lg-25,\n  .ed-item.lg-25 {\n    width: 25%;\n  }\n  .lg-30,\n  .ed-item.lg-30 {\n    width: 30%;\n  }\n  .lg-35,\n  .ed-item.lg-35 {\n    width: 35%;\n  }\n  .lg-40,\n  .ed-item.lg-40 {\n    width: 40%;\n  }\n  .lg-45,\n  .ed-item.lg-45 {\n    width: 45%;\n  }\n  .lg-50,\n  .ed-item.lg-50 {\n    width: 50%;\n  }\n  .lg-55,\n  .ed-item.lg-55 {\n    width: 55%;\n  }\n  .lg-60,\n  .ed-item.lg-60 {\n    width: 60%;\n  }\n  .lg-65,\n  .ed-item.lg-65 {\n    width: 65%;\n  }\n  .lg-70,\n  .ed-item.lg-70 {\n    width: 70%;\n  }\n  .lg-75,\n  .ed-item.lg-75 {\n    width: 75%;\n  }\n  .lg-80,\n  .ed-item.lg-80 {\n    width: 80%;\n  }\n  .lg-85,\n  .ed-item.lg-85 {\n    width: 85%;\n  }\n  .lg-90,\n  .ed-item.lg-90 {\n    width: 90%;\n  }\n  .lg-95,\n  .ed-item.lg-95 {\n    width: 95%;\n  }\n  .lg-100,\n  .ed-item.lg-100 {\n    width: 100%;\n  }\n  .lg-1-3,\n  .ed-item.lg-1-3 {\n    width: 33.33333%;\n  }\n  .lg-2-3,\n  .ed-item.lg-2-3 {\n    width: 66.66667%;\n  }\n  .lg-3-3,\n  .ed-item.lg-3-3 {\n    width: 100%;\n  }\n  .lg-1-6,\n  .ed-item.lg-1-6 {\n    width: 16.66667%;\n  }\n  .lg-2-6,\n  .ed-item.lg-2-6 {\n    width: 33.33333%;\n  }\n  .lg-3-6,\n  .ed-item.lg-3-6 {\n    width: 50%;\n  }\n  .lg-4-6,\n  .ed-item.lg-4-6 {\n    width: 66.66667%;\n  }\n  .lg-5-6,\n  .ed-item.lg-5-6 {\n    width: 83.33333%;\n  }\n  .lg-6-6,\n  .ed-item.lg-6-6 {\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-5,\n  .ed-item.xl-5 {\n    width: 5%;\n  }\n  .xl-10,\n  .ed-item.xl-10 {\n    width: 10%;\n  }\n  .xl-15,\n  .ed-item.xl-15 {\n    width: 15%;\n  }\n  .xl-20,\n  .ed-item.xl-20 {\n    width: 20%;\n  }\n  .xl-25,\n  .ed-item.xl-25 {\n    width: 25%;\n  }\n  .xl-30,\n  .ed-item.xl-30 {\n    width: 30%;\n  }\n  .xl-35,\n  .ed-item.xl-35 {\n    width: 35%;\n  }\n  .xl-40,\n  .ed-item.xl-40 {\n    width: 40%;\n  }\n  .xl-45,\n  .ed-item.xl-45 {\n    width: 45%;\n  }\n  .xl-50,\n  .ed-item.xl-50 {\n    width: 50%;\n  }\n  .xl-55,\n  .ed-item.xl-55 {\n    width: 55%;\n  }\n  .xl-60,\n  .ed-item.xl-60 {\n    width: 60%;\n  }\n  .xl-65,\n  .ed-item.xl-65 {\n    width: 65%;\n  }\n  .xl-70,\n  .ed-item.xl-70 {\n    width: 70%;\n  }\n  .xl-75,\n  .ed-item.xl-75 {\n    width: 75%;\n  }\n  .xl-80,\n  .ed-item.xl-80 {\n    width: 80%;\n  }\n  .xl-85,\n  .ed-item.xl-85 {\n    width: 85%;\n  }\n  .xl-90,\n  .ed-item.xl-90 {\n    width: 90%;\n  }\n  .xl-95,\n  .ed-item.xl-95 {\n    width: 95%;\n  }\n  .xl-100,\n  .ed-item.xl-100 {\n    width: 100%;\n  }\n  .xl-1-3,\n  .ed-item.xl-1-3 {\n    width: 33.33333%;\n  }\n  .xl-2-3,\n  .ed-item.xl-2-3 {\n    width: 66.66667%;\n  }\n  .xl-3-3,\n  .ed-item.xl-3-3 {\n    width: 100%;\n  }\n  .xl-1-6,\n  .ed-item.xl-1-6 {\n    width: 16.66667%;\n  }\n  .xl-2-6,\n  .ed-item.xl-2-6 {\n    width: 33.33333%;\n  }\n  .xl-3-6,\n  .ed-item.xl-3-6 {\n    width: 50%;\n  }\n  .xl-4-6,\n  .ed-item.xl-4-6 {\n    width: 66.66667%;\n  }\n  .xl-5-6,\n  .ed-item.xl-5-6 {\n    width: 83.33333%;\n  }\n  .xl-6-6,\n  .ed-item.xl-6-6 {\n    width: 100%;\n  }\n}\n\n.ed-grid.s-gap-0 {\n  --gap: 0rem;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.m-gap-0 {\n    --gap: 0rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.l-gap-0 {\n    --gap: 0rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.lg-gap-0 {\n    --gap: 0rem;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.xl-gap-0 {\n    --gap: 0rem;\n  }\n}\n\n.ed-grid.s-gap-1 {\n  --gap: 0.5rem;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.m-gap-1 {\n    --gap: 0.5rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.l-gap-1 {\n    --gap: 0.5rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.lg-gap-1 {\n    --gap: 0.5rem;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.xl-gap-1 {\n    --gap: 0.5rem;\n  }\n}\n\n.ed-grid.s-gap-2 {\n  --gap: 1rem;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.m-gap-2 {\n    --gap: 1rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.l-gap-2 {\n    --gap: 1rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.lg-gap-2 {\n    --gap: 1rem;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.xl-gap-2 {\n    --gap: 1rem;\n  }\n}\n\n.ed-grid.s-gap-3 {\n  --gap: 1.5rem;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.m-gap-3 {\n    --gap: 1.5rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.l-gap-3 {\n    --gap: 1.5rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.lg-gap-3 {\n    --gap: 1.5rem;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.xl-gap-3 {\n    --gap: 1.5rem;\n  }\n}\n\n.ed-grid.s-gap-4 {\n  --gap: 2rem;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.m-gap-4 {\n    --gap: 2rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.l-gap-4 {\n    --gap: 2rem;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.lg-gap-4 {\n    --gap: 2rem;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.xl-gap-4 {\n    --gap: 2rem;\n  }\n}\n\n.ed-grid {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: 100%;\n      grid-template-columns: 100%;\n  column-gap: var(--gap);\n  width: calc(100% - 2rem);\n  margin-left: 1rem;\n  margin-right: 1rem;\n  max-width: var(--max-width);\n}\n\n.ed-grid.gap-0 {\n  --gap: 0rem;\n}\n\n.ed-grid.gap-1 {\n  --gap: 0.5rem;\n}\n\n.ed-grid.gap-2 {\n  --gap: 1rem;\n}\n\n.ed-grid.gap-3 {\n  --gap: 1.5rem;\n}\n\n.ed-grid.gap-4 {\n  --gap: 2rem;\n}\n\n@media screen and (min-width: 1200px) {\n  .ed-grid {\n    width: 100%;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n.ed-grid.row-gap, .ed-grid.rows-gap {\n  row-gap: var(--gap);\n}\n\n.ed-grid .ed-grid, .ed-grid.full {\n  width: 100%;\n  max-width: 100%;\n  margin-right: 0;\n  margin-left: 0;\n}\n\n.ed-grid .ed-grid.s-5,\n.ed-grid .ed-grid .ed-grid.s-5 {\n  width: 5%;\n}\n\n.ed-grid .ed-grid.s-10,\n.ed-grid .ed-grid .ed-grid.s-10 {\n  width: 10%;\n}\n\n.ed-grid .ed-grid.s-15,\n.ed-grid .ed-grid .ed-grid.s-15 {\n  width: 15%;\n}\n\n.ed-grid .ed-grid.s-20,\n.ed-grid .ed-grid .ed-grid.s-20 {\n  width: 20%;\n}\n\n.ed-grid .ed-grid.s-25,\n.ed-grid .ed-grid .ed-grid.s-25 {\n  width: 25%;\n}\n\n.ed-grid .ed-grid.s-30,\n.ed-grid .ed-grid .ed-grid.s-30 {\n  width: 30%;\n}\n\n.ed-grid .ed-grid.s-35,\n.ed-grid .ed-grid .ed-grid.s-35 {\n  width: 35%;\n}\n\n.ed-grid .ed-grid.s-40,\n.ed-grid .ed-grid .ed-grid.s-40 {\n  width: 40%;\n}\n\n.ed-grid .ed-grid.s-45,\n.ed-grid .ed-grid .ed-grid.s-45 {\n  width: 45%;\n}\n\n.ed-grid .ed-grid.s-50,\n.ed-grid .ed-grid .ed-grid.s-50 {\n  width: 50%;\n}\n\n.ed-grid .ed-grid.s-55,\n.ed-grid .ed-grid .ed-grid.s-55 {\n  width: 55%;\n}\n\n.ed-grid .ed-grid.s-60,\n.ed-grid .ed-grid .ed-grid.s-60 {\n  width: 60%;\n}\n\n.ed-grid .ed-grid.s-65,\n.ed-grid .ed-grid .ed-grid.s-65 {\n  width: 65%;\n}\n\n.ed-grid .ed-grid.s-70,\n.ed-grid .ed-grid .ed-grid.s-70 {\n  width: 70%;\n}\n\n.ed-grid .ed-grid.s-75,\n.ed-grid .ed-grid .ed-grid.s-75 {\n  width: 75%;\n}\n\n.ed-grid .ed-grid.s-80,\n.ed-grid .ed-grid .ed-grid.s-80 {\n  width: 80%;\n}\n\n.ed-grid .ed-grid.s-85,\n.ed-grid .ed-grid .ed-grid.s-85 {\n  width: 85%;\n}\n\n.ed-grid .ed-grid.s-90,\n.ed-grid .ed-grid .ed-grid.s-90 {\n  width: 90%;\n}\n\n.ed-grid .ed-grid.s-95,\n.ed-grid .ed-grid .ed-grid.s-95 {\n  width: 95%;\n}\n\n.ed-grid .ed-grid.s-100,\n.ed-grid .ed-grid .ed-grid.s-100 {\n  width: 100%;\n}\n\n.ed-grid .ed-grid.s-to-center,\n.ed-grid .ed-grid .ed-grid.s-to-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.ed-grid .ed-grid.s-to-right,\n.ed-grid .ed-grid .ed-grid.s-to-right {\n  margin-left: auto;\n  margin-right: 0;\n}\n\n.ed-grid .ed-grid.s-to-left,\n.ed-grid .ed-grid .ed-grid.s-to-left {\n  margin-left: 0;\n  margin-right: auto;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid .ed-grid.m-5,\n  .ed-grid .ed-grid .ed-grid.m-5 {\n    width: 5%;\n  }\n  .ed-grid .ed-grid.m-10,\n  .ed-grid .ed-grid .ed-grid.m-10 {\n    width: 10%;\n  }\n  .ed-grid .ed-grid.m-15,\n  .ed-grid .ed-grid .ed-grid.m-15 {\n    width: 15%;\n  }\n  .ed-grid .ed-grid.m-20,\n  .ed-grid .ed-grid .ed-grid.m-20 {\n    width: 20%;\n  }\n  .ed-grid .ed-grid.m-25,\n  .ed-grid .ed-grid .ed-grid.m-25 {\n    width: 25%;\n  }\n  .ed-grid .ed-grid.m-30,\n  .ed-grid .ed-grid .ed-grid.m-30 {\n    width: 30%;\n  }\n  .ed-grid .ed-grid.m-35,\n  .ed-grid .ed-grid .ed-grid.m-35 {\n    width: 35%;\n  }\n  .ed-grid .ed-grid.m-40,\n  .ed-grid .ed-grid .ed-grid.m-40 {\n    width: 40%;\n  }\n  .ed-grid .ed-grid.m-45,\n  .ed-grid .ed-grid .ed-grid.m-45 {\n    width: 45%;\n  }\n  .ed-grid .ed-grid.m-50,\n  .ed-grid .ed-grid .ed-grid.m-50 {\n    width: 50%;\n  }\n  .ed-grid .ed-grid.m-55,\n  .ed-grid .ed-grid .ed-grid.m-55 {\n    width: 55%;\n  }\n  .ed-grid .ed-grid.m-60,\n  .ed-grid .ed-grid .ed-grid.m-60 {\n    width: 60%;\n  }\n  .ed-grid .ed-grid.m-65,\n  .ed-grid .ed-grid .ed-grid.m-65 {\n    width: 65%;\n  }\n  .ed-grid .ed-grid.m-70,\n  .ed-grid .ed-grid .ed-grid.m-70 {\n    width: 70%;\n  }\n  .ed-grid .ed-grid.m-75,\n  .ed-grid .ed-grid .ed-grid.m-75 {\n    width: 75%;\n  }\n  .ed-grid .ed-grid.m-80,\n  .ed-grid .ed-grid .ed-grid.m-80 {\n    width: 80%;\n  }\n  .ed-grid .ed-grid.m-85,\n  .ed-grid .ed-grid .ed-grid.m-85 {\n    width: 85%;\n  }\n  .ed-grid .ed-grid.m-90,\n  .ed-grid .ed-grid .ed-grid.m-90 {\n    width: 90%;\n  }\n  .ed-grid .ed-grid.m-95,\n  .ed-grid .ed-grid .ed-grid.m-95 {\n    width: 95%;\n  }\n  .ed-grid .ed-grid.m-100,\n  .ed-grid .ed-grid .ed-grid.m-100 {\n    width: 100%;\n  }\n  .ed-grid .ed-grid.m-to-center,\n  .ed-grid .ed-grid .ed-grid.m-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .ed-grid .ed-grid.m-to-right,\n  .ed-grid .ed-grid .ed-grid.m-to-right {\n    margin-left: auto;\n    margin-right: 0;\n  }\n  .ed-grid .ed-grid.m-to-left,\n  .ed-grid .ed-grid .ed-grid.m-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid .ed-grid.l-5,\n  .ed-grid .ed-grid .ed-grid.l-5 {\n    width: 5%;\n  }\n  .ed-grid .ed-grid.l-10,\n  .ed-grid .ed-grid .ed-grid.l-10 {\n    width: 10%;\n  }\n  .ed-grid .ed-grid.l-15,\n  .ed-grid .ed-grid .ed-grid.l-15 {\n    width: 15%;\n  }\n  .ed-grid .ed-grid.l-20,\n  .ed-grid .ed-grid .ed-grid.l-20 {\n    width: 20%;\n  }\n  .ed-grid .ed-grid.l-25,\n  .ed-grid .ed-grid .ed-grid.l-25 {\n    width: 25%;\n  }\n  .ed-grid .ed-grid.l-30,\n  .ed-grid .ed-grid .ed-grid.l-30 {\n    width: 30%;\n  }\n  .ed-grid .ed-grid.l-35,\n  .ed-grid .ed-grid .ed-grid.l-35 {\n    width: 35%;\n  }\n  .ed-grid .ed-grid.l-40,\n  .ed-grid .ed-grid .ed-grid.l-40 {\n    width: 40%;\n  }\n  .ed-grid .ed-grid.l-45,\n  .ed-grid .ed-grid .ed-grid.l-45 {\n    width: 45%;\n  }\n  .ed-grid .ed-grid.l-50,\n  .ed-grid .ed-grid .ed-grid.l-50 {\n    width: 50%;\n  }\n  .ed-grid .ed-grid.l-55,\n  .ed-grid .ed-grid .ed-grid.l-55 {\n    width: 55%;\n  }\n  .ed-grid .ed-grid.l-60,\n  .ed-grid .ed-grid .ed-grid.l-60 {\n    width: 60%;\n  }\n  .ed-grid .ed-grid.l-65,\n  .ed-grid .ed-grid .ed-grid.l-65 {\n    width: 65%;\n  }\n  .ed-grid .ed-grid.l-70,\n  .ed-grid .ed-grid .ed-grid.l-70 {\n    width: 70%;\n  }\n  .ed-grid .ed-grid.l-75,\n  .ed-grid .ed-grid .ed-grid.l-75 {\n    width: 75%;\n  }\n  .ed-grid .ed-grid.l-80,\n  .ed-grid .ed-grid .ed-grid.l-80 {\n    width: 80%;\n  }\n  .ed-grid .ed-grid.l-85,\n  .ed-grid .ed-grid .ed-grid.l-85 {\n    width: 85%;\n  }\n  .ed-grid .ed-grid.l-90,\n  .ed-grid .ed-grid .ed-grid.l-90 {\n    width: 90%;\n  }\n  .ed-grid .ed-grid.l-95,\n  .ed-grid .ed-grid .ed-grid.l-95 {\n    width: 95%;\n  }\n  .ed-grid .ed-grid.l-100,\n  .ed-grid .ed-grid .ed-grid.l-100 {\n    width: 100%;\n  }\n  .ed-grid .ed-grid.l-to-center,\n  .ed-grid .ed-grid .ed-grid.l-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .ed-grid .ed-grid.l-to-right,\n  .ed-grid .ed-grid .ed-grid.l-to-right {\n    margin-left: auto;\n    margin-right: 0;\n  }\n  .ed-grid .ed-grid.l-to-left,\n  .ed-grid .ed-grid .ed-grid.l-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid .ed-grid.lg-5,\n  .ed-grid .ed-grid .ed-grid.lg-5 {\n    width: 5%;\n  }\n  .ed-grid .ed-grid.lg-10,\n  .ed-grid .ed-grid .ed-grid.lg-10 {\n    width: 10%;\n  }\n  .ed-grid .ed-grid.lg-15,\n  .ed-grid .ed-grid .ed-grid.lg-15 {\n    width: 15%;\n  }\n  .ed-grid .ed-grid.lg-20,\n  .ed-grid .ed-grid .ed-grid.lg-20 {\n    width: 20%;\n  }\n  .ed-grid .ed-grid.lg-25,\n  .ed-grid .ed-grid .ed-grid.lg-25 {\n    width: 25%;\n  }\n  .ed-grid .ed-grid.lg-30,\n  .ed-grid .ed-grid .ed-grid.lg-30 {\n    width: 30%;\n  }\n  .ed-grid .ed-grid.lg-35,\n  .ed-grid .ed-grid .ed-grid.lg-35 {\n    width: 35%;\n  }\n  .ed-grid .ed-grid.lg-40,\n  .ed-grid .ed-grid .ed-grid.lg-40 {\n    width: 40%;\n  }\n  .ed-grid .ed-grid.lg-45,\n  .ed-grid .ed-grid .ed-grid.lg-45 {\n    width: 45%;\n  }\n  .ed-grid .ed-grid.lg-50,\n  .ed-grid .ed-grid .ed-grid.lg-50 {\n    width: 50%;\n  }\n  .ed-grid .ed-grid.lg-55,\n  .ed-grid .ed-grid .ed-grid.lg-55 {\n    width: 55%;\n  }\n  .ed-grid .ed-grid.lg-60,\n  .ed-grid .ed-grid .ed-grid.lg-60 {\n    width: 60%;\n  }\n  .ed-grid .ed-grid.lg-65,\n  .ed-grid .ed-grid .ed-grid.lg-65 {\n    width: 65%;\n  }\n  .ed-grid .ed-grid.lg-70,\n  .ed-grid .ed-grid .ed-grid.lg-70 {\n    width: 70%;\n  }\n  .ed-grid .ed-grid.lg-75,\n  .ed-grid .ed-grid .ed-grid.lg-75 {\n    width: 75%;\n  }\n  .ed-grid .ed-grid.lg-80,\n  .ed-grid .ed-grid .ed-grid.lg-80 {\n    width: 80%;\n  }\n  .ed-grid .ed-grid.lg-85,\n  .ed-grid .ed-grid .ed-grid.lg-85 {\n    width: 85%;\n  }\n  .ed-grid .ed-grid.lg-90,\n  .ed-grid .ed-grid .ed-grid.lg-90 {\n    width: 90%;\n  }\n  .ed-grid .ed-grid.lg-95,\n  .ed-grid .ed-grid .ed-grid.lg-95 {\n    width: 95%;\n  }\n  .ed-grid .ed-grid.lg-100,\n  .ed-grid .ed-grid .ed-grid.lg-100 {\n    width: 100%;\n  }\n  .ed-grid .ed-grid.lg-to-center,\n  .ed-grid .ed-grid .ed-grid.lg-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .ed-grid .ed-grid.lg-to-right,\n  .ed-grid .ed-grid .ed-grid.lg-to-right {\n    margin-left: auto;\n    margin-right: 0;\n  }\n  .ed-grid .ed-grid.lg-to-left,\n  .ed-grid .ed-grid .ed-grid.lg-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid .ed-grid.xl-5,\n  .ed-grid .ed-grid .ed-grid.xl-5 {\n    width: 5%;\n  }\n  .ed-grid .ed-grid.xl-10,\n  .ed-grid .ed-grid .ed-grid.xl-10 {\n    width: 10%;\n  }\n  .ed-grid .ed-grid.xl-15,\n  .ed-grid .ed-grid .ed-grid.xl-15 {\n    width: 15%;\n  }\n  .ed-grid .ed-grid.xl-20,\n  .ed-grid .ed-grid .ed-grid.xl-20 {\n    width: 20%;\n  }\n  .ed-grid .ed-grid.xl-25,\n  .ed-grid .ed-grid .ed-grid.xl-25 {\n    width: 25%;\n  }\n  .ed-grid .ed-grid.xl-30,\n  .ed-grid .ed-grid .ed-grid.xl-30 {\n    width: 30%;\n  }\n  .ed-grid .ed-grid.xl-35,\n  .ed-grid .ed-grid .ed-grid.xl-35 {\n    width: 35%;\n  }\n  .ed-grid .ed-grid.xl-40,\n  .ed-grid .ed-grid .ed-grid.xl-40 {\n    width: 40%;\n  }\n  .ed-grid .ed-grid.xl-45,\n  .ed-grid .ed-grid .ed-grid.xl-45 {\n    width: 45%;\n  }\n  .ed-grid .ed-grid.xl-50,\n  .ed-grid .ed-grid .ed-grid.xl-50 {\n    width: 50%;\n  }\n  .ed-grid .ed-grid.xl-55,\n  .ed-grid .ed-grid .ed-grid.xl-55 {\n    width: 55%;\n  }\n  .ed-grid .ed-grid.xl-60,\n  .ed-grid .ed-grid .ed-grid.xl-60 {\n    width: 60%;\n  }\n  .ed-grid .ed-grid.xl-65,\n  .ed-grid .ed-grid .ed-grid.xl-65 {\n    width: 65%;\n  }\n  .ed-grid .ed-grid.xl-70,\n  .ed-grid .ed-grid .ed-grid.xl-70 {\n    width: 70%;\n  }\n  .ed-grid .ed-grid.xl-75,\n  .ed-grid .ed-grid .ed-grid.xl-75 {\n    width: 75%;\n  }\n  .ed-grid .ed-grid.xl-80,\n  .ed-grid .ed-grid .ed-grid.xl-80 {\n    width: 80%;\n  }\n  .ed-grid .ed-grid.xl-85,\n  .ed-grid .ed-grid .ed-grid.xl-85 {\n    width: 85%;\n  }\n  .ed-grid .ed-grid.xl-90,\n  .ed-grid .ed-grid .ed-grid.xl-90 {\n    width: 90%;\n  }\n  .ed-grid .ed-grid.xl-95,\n  .ed-grid .ed-grid .ed-grid.xl-95 {\n    width: 95%;\n  }\n  .ed-grid .ed-grid.xl-100,\n  .ed-grid .ed-grid .ed-grid.xl-100 {\n    width: 100%;\n  }\n  .ed-grid .ed-grid.xl-to-center,\n  .ed-grid .ed-grid .ed-grid.xl-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .ed-grid .ed-grid.xl-to-right,\n  .ed-grid .ed-grid .ed-grid.xl-to-right {\n    margin-left: auto;\n    margin-right: 0;\n  }\n  .ed-grid .ed-grid.xl-to-left,\n  .ed-grid .ed-grid .ed-grid.xl-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n\n.ed-grid.cols-s-1, .ed-grid.s-grid-1 {\n  -ms-grid-columns: 100%;\n      grid-template-columns: 100%;\n}\n\n.ed-grid > .span-s-1,\n.ed-grid > .s-cols-1 {\n  -ms-grid-column-span: 1;\n      grid-column-end: span 1;\n}\n\n.ed-grid > .s-rows-1 {\n  -ms-grid-row-span: 1;\n      grid-row-end: span 1;\n}\n\n.ed-grid > .s-x-1 {\n  -ms-grid-column: 1;\n      grid-column-start: 1;\n}\n\n.ed-grid > .s-y-1 {\n  -ms-grid-row: 1;\n      grid-row-start: 1;\n}\n\n.ed-grid.cols-s-2, .ed-grid.s-grid-2 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 1) / 2))[2];\n      grid-template-columns: repeat(2, calc((100% - var(--gap) * 1) / 2));\n}\n\n.ed-grid > .span-s-2,\n.ed-grid > .s-cols-2 {\n  -ms-grid-column-span: 2;\n      grid-column-end: span 2;\n}\n\n.ed-grid > .s-rows-2 {\n  -ms-grid-row-span: 2;\n      grid-row-end: span 2;\n}\n\n.ed-grid > .s-x-2 {\n  -ms-grid-column: 2;\n      grid-column-start: 2;\n}\n\n.ed-grid > .s-y-2 {\n  -ms-grid-row: 2;\n      grid-row-start: 2;\n}\n\n.ed-grid.cols-s-3, .ed-grid.s-grid-3 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 2) / 3))[3];\n      grid-template-columns: repeat(3, calc((100% - var(--gap) * 2) / 3));\n}\n\n.ed-grid > .span-s-3,\n.ed-grid > .s-cols-3 {\n  -ms-grid-column-span: 3;\n      grid-column-end: span 3;\n}\n\n.ed-grid > .s-rows-3 {\n  -ms-grid-row-span: 3;\n      grid-row-end: span 3;\n}\n\n.ed-grid > .s-x-3 {\n  -ms-grid-column: 3;\n      grid-column-start: 3;\n}\n\n.ed-grid > .s-y-3 {\n  -ms-grid-row: 3;\n      grid-row-start: 3;\n}\n\n.ed-grid.cols-s-4, .ed-grid.s-grid-4 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 3) / 4))[4];\n      grid-template-columns: repeat(4, calc((100% - var(--gap) * 3) / 4));\n}\n\n.ed-grid > .span-s-4,\n.ed-grid > .s-cols-4 {\n  -ms-grid-column-span: 4;\n      grid-column-end: span 4;\n}\n\n.ed-grid > .s-rows-4 {\n  -ms-grid-row-span: 4;\n      grid-row-end: span 4;\n}\n\n.ed-grid > .s-x-4 {\n  -ms-grid-column: 4;\n      grid-column-start: 4;\n}\n\n.ed-grid > .s-y-4 {\n  -ms-grid-row: 4;\n      grid-row-start: 4;\n}\n\n.ed-grid.cols-s-5, .ed-grid.s-grid-5 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 4) / 5))[5];\n      grid-template-columns: repeat(5, calc((100% - var(--gap) * 4) / 5));\n}\n\n.ed-grid > .span-s-5,\n.ed-grid > .s-cols-5 {\n  -ms-grid-column-span: 5;\n      grid-column-end: span 5;\n}\n\n.ed-grid > .s-rows-5 {\n  -ms-grid-row-span: 5;\n      grid-row-end: span 5;\n}\n\n.ed-grid > .s-x-5 {\n  -ms-grid-column: 5;\n      grid-column-start: 5;\n}\n\n.ed-grid > .s-y-5 {\n  -ms-grid-row: 5;\n      grid-row-start: 5;\n}\n\n.ed-grid.cols-s-6, .ed-grid.s-grid-6 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 5) / 6))[6];\n      grid-template-columns: repeat(6, calc((100% - var(--gap) * 5) / 6));\n}\n\n.ed-grid > .span-s-6,\n.ed-grid > .s-cols-6 {\n  -ms-grid-column-span: 6;\n      grid-column-end: span 6;\n}\n\n.ed-grid > .s-rows-6 {\n  -ms-grid-row-span: 6;\n      grid-row-end: span 6;\n}\n\n.ed-grid > .s-x-6 {\n  -ms-grid-column: 6;\n      grid-column-start: 6;\n}\n\n.ed-grid > .s-y-6 {\n  -ms-grid-row: 6;\n      grid-row-start: 6;\n}\n\n.ed-grid.cols-s-7, .ed-grid.s-grid-7 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 6) / 7))[7];\n      grid-template-columns: repeat(7, calc((100% - var(--gap) * 6) / 7));\n}\n\n.ed-grid > .span-s-7,\n.ed-grid > .s-cols-7 {\n  -ms-grid-column-span: 7;\n      grid-column-end: span 7;\n}\n\n.ed-grid > .s-rows-7 {\n  -ms-grid-row-span: 7;\n      grid-row-end: span 7;\n}\n\n.ed-grid > .s-x-7 {\n  -ms-grid-column: 7;\n      grid-column-start: 7;\n}\n\n.ed-grid > .s-y-7 {\n  -ms-grid-row: 7;\n      grid-row-start: 7;\n}\n\n.ed-grid.cols-s-8, .ed-grid.s-grid-8 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 7) / 8))[8];\n      grid-template-columns: repeat(8, calc((100% - var(--gap) * 7) / 8));\n}\n\n.ed-grid > .span-s-8,\n.ed-grid > .s-cols-8 {\n  -ms-grid-column-span: 8;\n      grid-column-end: span 8;\n}\n\n.ed-grid > .s-rows-8 {\n  -ms-grid-row-span: 8;\n      grid-row-end: span 8;\n}\n\n.ed-grid > .s-x-8 {\n  -ms-grid-column: 8;\n      grid-column-start: 8;\n}\n\n.ed-grid > .s-y-8 {\n  -ms-grid-row: 8;\n      grid-row-start: 8;\n}\n\n.ed-grid.cols-s-9, .ed-grid.s-grid-9 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 8) / 9))[9];\n      grid-template-columns: repeat(9, calc((100% - var(--gap) * 8) / 9));\n}\n\n.ed-grid > .span-s-9,\n.ed-grid > .s-cols-9 {\n  -ms-grid-column-span: 9;\n      grid-column-end: span 9;\n}\n\n.ed-grid > .s-rows-9 {\n  -ms-grid-row-span: 9;\n      grid-row-end: span 9;\n}\n\n.ed-grid > .s-x-9 {\n  -ms-grid-column: 9;\n      grid-column-start: 9;\n}\n\n.ed-grid > .s-y-9 {\n  -ms-grid-row: 9;\n      grid-row-start: 9;\n}\n\n.ed-grid.cols-s-10, .ed-grid.s-grid-10 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 9) / 10))[10];\n      grid-template-columns: repeat(10, calc((100% - var(--gap) * 9) / 10));\n}\n\n.ed-grid > .span-s-10,\n.ed-grid > .s-cols-10 {\n  -ms-grid-column-span: 10;\n      grid-column-end: span 10;\n}\n\n.ed-grid > .s-rows-10 {\n  -ms-grid-row-span: 10;\n      grid-row-end: span 10;\n}\n\n.ed-grid > .s-x-10 {\n  -ms-grid-column: 10;\n      grid-column-start: 10;\n}\n\n.ed-grid > .s-y-10 {\n  -ms-grid-row: 10;\n      grid-row-start: 10;\n}\n\n.ed-grid.cols-s-11, .ed-grid.s-grid-11 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 10) / 11))[11];\n      grid-template-columns: repeat(11, calc((100% - var(--gap) * 10) / 11));\n}\n\n.ed-grid > .span-s-11,\n.ed-grid > .s-cols-11 {\n  -ms-grid-column-span: 11;\n      grid-column-end: span 11;\n}\n\n.ed-grid > .s-rows-11 {\n  -ms-grid-row-span: 11;\n      grid-row-end: span 11;\n}\n\n.ed-grid > .s-x-11 {\n  -ms-grid-column: 11;\n      grid-column-start: 11;\n}\n\n.ed-grid > .s-y-11 {\n  -ms-grid-row: 11;\n      grid-row-start: 11;\n}\n\n.ed-grid.cols-s-12, .ed-grid.s-grid-12 {\n  -ms-grid-columns: (calc((100% - var(--gap) * 11) / 12))[12];\n      grid-template-columns: repeat(12, calc((100% - var(--gap) * 11) / 12));\n}\n\n.ed-grid > .span-s-12,\n.ed-grid > .s-cols-12 {\n  -ms-grid-column-span: 12;\n      grid-column-end: span 12;\n}\n\n.ed-grid > .s-rows-12 {\n  -ms-grid-row-span: 12;\n      grid-row-end: span 12;\n}\n\n.ed-grid > .s-x-12 {\n  -ms-grid-column: 12;\n      grid-column-start: 12;\n}\n\n.ed-grid > .s-y-12 {\n  -ms-grid-row: 12;\n      grid-row-start: 12;\n}\n\n@media screen and (min-width: 640px) {\n  .ed-grid.cols-m-1, .ed-grid.m-grid-1 {\n    -ms-grid-columns: 100%;\n        grid-template-columns: 100%;\n  }\n  .ed-grid > .span-m-1,\n  .ed-grid > .m-cols-1 {\n    -ms-grid-column-span: 1;\n        grid-column-end: span 1;\n  }\n  .ed-grid > .m-rows-1 {\n    -ms-grid-row-span: 1;\n        grid-row-end: span 1;\n  }\n  .ed-grid > .m-x-1 {\n    -ms-grid-column: 1;\n        grid-column-start: 1;\n  }\n  .ed-grid > .m-y-1 {\n    -ms-grid-row: 1;\n        grid-row-start: 1;\n  }\n  .ed-grid.cols-m-2, .ed-grid.m-grid-2 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 1) / 2))[2];\n        grid-template-columns: repeat(2, calc((100% - var(--gap) * 1) / 2));\n  }\n  .ed-grid > .span-m-2,\n  .ed-grid > .m-cols-2 {\n    -ms-grid-column-span: 2;\n        grid-column-end: span 2;\n  }\n  .ed-grid > .m-rows-2 {\n    -ms-grid-row-span: 2;\n        grid-row-end: span 2;\n  }\n  .ed-grid > .m-x-2 {\n    -ms-grid-column: 2;\n        grid-column-start: 2;\n  }\n  .ed-grid > .m-y-2 {\n    -ms-grid-row: 2;\n        grid-row-start: 2;\n  }\n  .ed-grid.cols-m-3, .ed-grid.m-grid-3 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 2) / 3))[3];\n        grid-template-columns: repeat(3, calc((100% - var(--gap) * 2) / 3));\n  }\n  .ed-grid > .span-m-3,\n  .ed-grid > .m-cols-3 {\n    -ms-grid-column-span: 3;\n        grid-column-end: span 3;\n  }\n  .ed-grid > .m-rows-3 {\n    -ms-grid-row-span: 3;\n        grid-row-end: span 3;\n  }\n  .ed-grid > .m-x-3 {\n    -ms-grid-column: 3;\n        grid-column-start: 3;\n  }\n  .ed-grid > .m-y-3 {\n    -ms-grid-row: 3;\n        grid-row-start: 3;\n  }\n  .ed-grid.cols-m-4, .ed-grid.m-grid-4 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 3) / 4))[4];\n        grid-template-columns: repeat(4, calc((100% - var(--gap) * 3) / 4));\n  }\n  .ed-grid > .span-m-4,\n  .ed-grid > .m-cols-4 {\n    -ms-grid-column-span: 4;\n        grid-column-end: span 4;\n  }\n  .ed-grid > .m-rows-4 {\n    -ms-grid-row-span: 4;\n        grid-row-end: span 4;\n  }\n  .ed-grid > .m-x-4 {\n    -ms-grid-column: 4;\n        grid-column-start: 4;\n  }\n  .ed-grid > .m-y-4 {\n    -ms-grid-row: 4;\n        grid-row-start: 4;\n  }\n  .ed-grid.cols-m-5, .ed-grid.m-grid-5 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 4) / 5))[5];\n        grid-template-columns: repeat(5, calc((100% - var(--gap) * 4) / 5));\n  }\n  .ed-grid > .span-m-5,\n  .ed-grid > .m-cols-5 {\n    -ms-grid-column-span: 5;\n        grid-column-end: span 5;\n  }\n  .ed-grid > .m-rows-5 {\n    -ms-grid-row-span: 5;\n        grid-row-end: span 5;\n  }\n  .ed-grid > .m-x-5 {\n    -ms-grid-column: 5;\n        grid-column-start: 5;\n  }\n  .ed-grid > .m-y-5 {\n    -ms-grid-row: 5;\n        grid-row-start: 5;\n  }\n  .ed-grid.cols-m-6, .ed-grid.m-grid-6 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 5) / 6))[6];\n        grid-template-columns: repeat(6, calc((100% - var(--gap) * 5) / 6));\n  }\n  .ed-grid > .span-m-6,\n  .ed-grid > .m-cols-6 {\n    -ms-grid-column-span: 6;\n        grid-column-end: span 6;\n  }\n  .ed-grid > .m-rows-6 {\n    -ms-grid-row-span: 6;\n        grid-row-end: span 6;\n  }\n  .ed-grid > .m-x-6 {\n    -ms-grid-column: 6;\n        grid-column-start: 6;\n  }\n  .ed-grid > .m-y-6 {\n    -ms-grid-row: 6;\n        grid-row-start: 6;\n  }\n  .ed-grid.cols-m-7, .ed-grid.m-grid-7 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 6) / 7))[7];\n        grid-template-columns: repeat(7, calc((100% - var(--gap) * 6) / 7));\n  }\n  .ed-grid > .span-m-7,\n  .ed-grid > .m-cols-7 {\n    -ms-grid-column-span: 7;\n        grid-column-end: span 7;\n  }\n  .ed-grid > .m-rows-7 {\n    -ms-grid-row-span: 7;\n        grid-row-end: span 7;\n  }\n  .ed-grid > .m-x-7 {\n    -ms-grid-column: 7;\n        grid-column-start: 7;\n  }\n  .ed-grid > .m-y-7 {\n    -ms-grid-row: 7;\n        grid-row-start: 7;\n  }\n  .ed-grid.cols-m-8, .ed-grid.m-grid-8 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 7) / 8))[8];\n        grid-template-columns: repeat(8, calc((100% - var(--gap) * 7) / 8));\n  }\n  .ed-grid > .span-m-8,\n  .ed-grid > .m-cols-8 {\n    -ms-grid-column-span: 8;\n        grid-column-end: span 8;\n  }\n  .ed-grid > .m-rows-8 {\n    -ms-grid-row-span: 8;\n        grid-row-end: span 8;\n  }\n  .ed-grid > .m-x-8 {\n    -ms-grid-column: 8;\n        grid-column-start: 8;\n  }\n  .ed-grid > .m-y-8 {\n    -ms-grid-row: 8;\n        grid-row-start: 8;\n  }\n  .ed-grid.cols-m-9, .ed-grid.m-grid-9 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 8) / 9))[9];\n        grid-template-columns: repeat(9, calc((100% - var(--gap) * 8) / 9));\n  }\n  .ed-grid > .span-m-9,\n  .ed-grid > .m-cols-9 {\n    -ms-grid-column-span: 9;\n        grid-column-end: span 9;\n  }\n  .ed-grid > .m-rows-9 {\n    -ms-grid-row-span: 9;\n        grid-row-end: span 9;\n  }\n  .ed-grid > .m-x-9 {\n    -ms-grid-column: 9;\n        grid-column-start: 9;\n  }\n  .ed-grid > .m-y-9 {\n    -ms-grid-row: 9;\n        grid-row-start: 9;\n  }\n  .ed-grid.cols-m-10, .ed-grid.m-grid-10 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 9) / 10))[10];\n        grid-template-columns: repeat(10, calc((100% - var(--gap) * 9) / 10));\n  }\n  .ed-grid > .span-m-10,\n  .ed-grid > .m-cols-10 {\n    -ms-grid-column-span: 10;\n        grid-column-end: span 10;\n  }\n  .ed-grid > .m-rows-10 {\n    -ms-grid-row-span: 10;\n        grid-row-end: span 10;\n  }\n  .ed-grid > .m-x-10 {\n    -ms-grid-column: 10;\n        grid-column-start: 10;\n  }\n  .ed-grid > .m-y-10 {\n    -ms-grid-row: 10;\n        grid-row-start: 10;\n  }\n  .ed-grid.cols-m-11, .ed-grid.m-grid-11 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 10) / 11))[11];\n        grid-template-columns: repeat(11, calc((100% - var(--gap) * 10) / 11));\n  }\n  .ed-grid > .span-m-11,\n  .ed-grid > .m-cols-11 {\n    -ms-grid-column-span: 11;\n        grid-column-end: span 11;\n  }\n  .ed-grid > .m-rows-11 {\n    -ms-grid-row-span: 11;\n        grid-row-end: span 11;\n  }\n  .ed-grid > .m-x-11 {\n    -ms-grid-column: 11;\n        grid-column-start: 11;\n  }\n  .ed-grid > .m-y-11 {\n    -ms-grid-row: 11;\n        grid-row-start: 11;\n  }\n  .ed-grid.cols-m-12, .ed-grid.m-grid-12 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 11) / 12))[12];\n        grid-template-columns: repeat(12, calc((100% - var(--gap) * 11) / 12));\n  }\n  .ed-grid > .span-m-12,\n  .ed-grid > .m-cols-12 {\n    -ms-grid-column-span: 12;\n        grid-column-end: span 12;\n  }\n  .ed-grid > .m-rows-12 {\n    -ms-grid-row-span: 12;\n        grid-row-end: span 12;\n  }\n  .ed-grid > .m-x-12 {\n    -ms-grid-column: 12;\n        grid-column-start: 12;\n  }\n  .ed-grid > .m-y-12 {\n    -ms-grid-row: 12;\n        grid-row-start: 12;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.cols-l-1, .ed-grid.l-grid-1 {\n    -ms-grid-columns: 100%;\n        grid-template-columns: 100%;\n  }\n  .ed-grid > .span-l-1,\n  .ed-grid > .l-cols-1 {\n    -ms-grid-column-span: 1;\n        grid-column-end: span 1;\n  }\n  .ed-grid > .l-rows-1 {\n    -ms-grid-row-span: 1;\n        grid-row-end: span 1;\n  }\n  .ed-grid > .l-x-1 {\n    -ms-grid-column: 1;\n        grid-column-start: 1;\n  }\n  .ed-grid > .l-y-1 {\n    -ms-grid-row: 1;\n        grid-row-start: 1;\n  }\n  .ed-grid.cols-l-2, .ed-grid.l-grid-2 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 1) / 2))[2];\n        grid-template-columns: repeat(2, calc((100% - var(--gap) * 1) / 2));\n  }\n  .ed-grid > .span-l-2,\n  .ed-grid > .l-cols-2 {\n    -ms-grid-column-span: 2;\n        grid-column-end: span 2;\n  }\n  .ed-grid > .l-rows-2 {\n    -ms-grid-row-span: 2;\n        grid-row-end: span 2;\n  }\n  .ed-grid > .l-x-2 {\n    -ms-grid-column: 2;\n        grid-column-start: 2;\n  }\n  .ed-grid > .l-y-2 {\n    -ms-grid-row: 2;\n        grid-row-start: 2;\n  }\n  .ed-grid.cols-l-3, .ed-grid.l-grid-3 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 2) / 3))[3];\n        grid-template-columns: repeat(3, calc((100% - var(--gap) * 2) / 3));\n  }\n  .ed-grid > .span-l-3,\n  .ed-grid > .l-cols-3 {\n    -ms-grid-column-span: 3;\n        grid-column-end: span 3;\n  }\n  .ed-grid > .l-rows-3 {\n    -ms-grid-row-span: 3;\n        grid-row-end: span 3;\n  }\n  .ed-grid > .l-x-3 {\n    -ms-grid-column: 3;\n        grid-column-start: 3;\n  }\n  .ed-grid > .l-y-3 {\n    -ms-grid-row: 3;\n        grid-row-start: 3;\n  }\n  .ed-grid.cols-l-4, .ed-grid.l-grid-4 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 3) / 4))[4];\n        grid-template-columns: repeat(4, calc((100% - var(--gap) * 3) / 4));\n  }\n  .ed-grid > .span-l-4,\n  .ed-grid > .l-cols-4 {\n    -ms-grid-column-span: 4;\n        grid-column-end: span 4;\n  }\n  .ed-grid > .l-rows-4 {\n    -ms-grid-row-span: 4;\n        grid-row-end: span 4;\n  }\n  .ed-grid > .l-x-4 {\n    -ms-grid-column: 4;\n        grid-column-start: 4;\n  }\n  .ed-grid > .l-y-4 {\n    -ms-grid-row: 4;\n        grid-row-start: 4;\n  }\n  .ed-grid.cols-l-5, .ed-grid.l-grid-5 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 4) / 5))[5];\n        grid-template-columns: repeat(5, calc((100% - var(--gap) * 4) / 5));\n  }\n  .ed-grid > .span-l-5,\n  .ed-grid > .l-cols-5 {\n    -ms-grid-column-span: 5;\n        grid-column-end: span 5;\n  }\n  .ed-grid > .l-rows-5 {\n    -ms-grid-row-span: 5;\n        grid-row-end: span 5;\n  }\n  .ed-grid > .l-x-5 {\n    -ms-grid-column: 5;\n        grid-column-start: 5;\n  }\n  .ed-grid > .l-y-5 {\n    -ms-grid-row: 5;\n        grid-row-start: 5;\n  }\n  .ed-grid.cols-l-6, .ed-grid.l-grid-6 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 5) / 6))[6];\n        grid-template-columns: repeat(6, calc((100% - var(--gap) * 5) / 6));\n  }\n  .ed-grid > .span-l-6,\n  .ed-grid > .l-cols-6 {\n    -ms-grid-column-span: 6;\n        grid-column-end: span 6;\n  }\n  .ed-grid > .l-rows-6 {\n    -ms-grid-row-span: 6;\n        grid-row-end: span 6;\n  }\n  .ed-grid > .l-x-6 {\n    -ms-grid-column: 6;\n        grid-column-start: 6;\n  }\n  .ed-grid > .l-y-6 {\n    -ms-grid-row: 6;\n        grid-row-start: 6;\n  }\n  .ed-grid.cols-l-7, .ed-grid.l-grid-7 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 6) / 7))[7];\n        grid-template-columns: repeat(7, calc((100% - var(--gap) * 6) / 7));\n  }\n  .ed-grid > .span-l-7,\n  .ed-grid > .l-cols-7 {\n    -ms-grid-column-span: 7;\n        grid-column-end: span 7;\n  }\n  .ed-grid > .l-rows-7 {\n    -ms-grid-row-span: 7;\n        grid-row-end: span 7;\n  }\n  .ed-grid > .l-x-7 {\n    -ms-grid-column: 7;\n        grid-column-start: 7;\n  }\n  .ed-grid > .l-y-7 {\n    -ms-grid-row: 7;\n        grid-row-start: 7;\n  }\n  .ed-grid.cols-l-8, .ed-grid.l-grid-8 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 7) / 8))[8];\n        grid-template-columns: repeat(8, calc((100% - var(--gap) * 7) / 8));\n  }\n  .ed-grid > .span-l-8,\n  .ed-grid > .l-cols-8 {\n    -ms-grid-column-span: 8;\n        grid-column-end: span 8;\n  }\n  .ed-grid > .l-rows-8 {\n    -ms-grid-row-span: 8;\n        grid-row-end: span 8;\n  }\n  .ed-grid > .l-x-8 {\n    -ms-grid-column: 8;\n        grid-column-start: 8;\n  }\n  .ed-grid > .l-y-8 {\n    -ms-grid-row: 8;\n        grid-row-start: 8;\n  }\n  .ed-grid.cols-l-9, .ed-grid.l-grid-9 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 8) / 9))[9];\n        grid-template-columns: repeat(9, calc((100% - var(--gap) * 8) / 9));\n  }\n  .ed-grid > .span-l-9,\n  .ed-grid > .l-cols-9 {\n    -ms-grid-column-span: 9;\n        grid-column-end: span 9;\n  }\n  .ed-grid > .l-rows-9 {\n    -ms-grid-row-span: 9;\n        grid-row-end: span 9;\n  }\n  .ed-grid > .l-x-9 {\n    -ms-grid-column: 9;\n        grid-column-start: 9;\n  }\n  .ed-grid > .l-y-9 {\n    -ms-grid-row: 9;\n        grid-row-start: 9;\n  }\n  .ed-grid.cols-l-10, .ed-grid.l-grid-10 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 9) / 10))[10];\n        grid-template-columns: repeat(10, calc((100% - var(--gap) * 9) / 10));\n  }\n  .ed-grid > .span-l-10,\n  .ed-grid > .l-cols-10 {\n    -ms-grid-column-span: 10;\n        grid-column-end: span 10;\n  }\n  .ed-grid > .l-rows-10 {\n    -ms-grid-row-span: 10;\n        grid-row-end: span 10;\n  }\n  .ed-grid > .l-x-10 {\n    -ms-grid-column: 10;\n        grid-column-start: 10;\n  }\n  .ed-grid > .l-y-10 {\n    -ms-grid-row: 10;\n        grid-row-start: 10;\n  }\n  .ed-grid.cols-l-11, .ed-grid.l-grid-11 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 10) / 11))[11];\n        grid-template-columns: repeat(11, calc((100% - var(--gap) * 10) / 11));\n  }\n  .ed-grid > .span-l-11,\n  .ed-grid > .l-cols-11 {\n    -ms-grid-column-span: 11;\n        grid-column-end: span 11;\n  }\n  .ed-grid > .l-rows-11 {\n    -ms-grid-row-span: 11;\n        grid-row-end: span 11;\n  }\n  .ed-grid > .l-x-11 {\n    -ms-grid-column: 11;\n        grid-column-start: 11;\n  }\n  .ed-grid > .l-y-11 {\n    -ms-grid-row: 11;\n        grid-row-start: 11;\n  }\n  .ed-grid.cols-l-12, .ed-grid.l-grid-12 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 11) / 12))[12];\n        grid-template-columns: repeat(12, calc((100% - var(--gap) * 11) / 12));\n  }\n  .ed-grid > .span-l-12,\n  .ed-grid > .l-cols-12 {\n    -ms-grid-column-span: 12;\n        grid-column-end: span 12;\n  }\n  .ed-grid > .l-rows-12 {\n    -ms-grid-row-span: 12;\n        grid-row-end: span 12;\n  }\n  .ed-grid > .l-x-12 {\n    -ms-grid-column: 12;\n        grid-column-start: 12;\n  }\n  .ed-grid > .l-y-12 {\n    -ms-grid-row: 12;\n        grid-row-start: 12;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .ed-grid.cols-lg-1, .ed-grid.lg-grid-1 {\n    -ms-grid-columns: 100%;\n        grid-template-columns: 100%;\n  }\n  .ed-grid > .span-lg-1,\n  .ed-grid > .lg-cols-1 {\n    -ms-grid-column-span: 1;\n        grid-column-end: span 1;\n  }\n  .ed-grid > .lg-rows-1 {\n    -ms-grid-row-span: 1;\n        grid-row-end: span 1;\n  }\n  .ed-grid > .lg-x-1 {\n    -ms-grid-column: 1;\n        grid-column-start: 1;\n  }\n  .ed-grid > .lg-y-1 {\n    -ms-grid-row: 1;\n        grid-row-start: 1;\n  }\n  .ed-grid.cols-lg-2, .ed-grid.lg-grid-2 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 1) / 2))[2];\n        grid-template-columns: repeat(2, calc((100% - var(--gap) * 1) / 2));\n  }\n  .ed-grid > .span-lg-2,\n  .ed-grid > .lg-cols-2 {\n    -ms-grid-column-span: 2;\n        grid-column-end: span 2;\n  }\n  .ed-grid > .lg-rows-2 {\n    -ms-grid-row-span: 2;\n        grid-row-end: span 2;\n  }\n  .ed-grid > .lg-x-2 {\n    -ms-grid-column: 2;\n        grid-column-start: 2;\n  }\n  .ed-grid > .lg-y-2 {\n    -ms-grid-row: 2;\n        grid-row-start: 2;\n  }\n  .ed-grid.cols-lg-3, .ed-grid.lg-grid-3 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 2) / 3))[3];\n        grid-template-columns: repeat(3, calc((100% - var(--gap) * 2) / 3));\n  }\n  .ed-grid > .span-lg-3,\n  .ed-grid > .lg-cols-3 {\n    -ms-grid-column-span: 3;\n        grid-column-end: span 3;\n  }\n  .ed-grid > .lg-rows-3 {\n    -ms-grid-row-span: 3;\n        grid-row-end: span 3;\n  }\n  .ed-grid > .lg-x-3 {\n    -ms-grid-column: 3;\n        grid-column-start: 3;\n  }\n  .ed-grid > .lg-y-3 {\n    -ms-grid-row: 3;\n        grid-row-start: 3;\n  }\n  .ed-grid.cols-lg-4, .ed-grid.lg-grid-4 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 3) / 4))[4];\n        grid-template-columns: repeat(4, calc((100% - var(--gap) * 3) / 4));\n  }\n  .ed-grid > .span-lg-4,\n  .ed-grid > .lg-cols-4 {\n    -ms-grid-column-span: 4;\n        grid-column-end: span 4;\n  }\n  .ed-grid > .lg-rows-4 {\n    -ms-grid-row-span: 4;\n        grid-row-end: span 4;\n  }\n  .ed-grid > .lg-x-4 {\n    -ms-grid-column: 4;\n        grid-column-start: 4;\n  }\n  .ed-grid > .lg-y-4 {\n    -ms-grid-row: 4;\n        grid-row-start: 4;\n  }\n  .ed-grid.cols-lg-5, .ed-grid.lg-grid-5 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 4) / 5))[5];\n        grid-template-columns: repeat(5, calc((100% - var(--gap) * 4) / 5));\n  }\n  .ed-grid > .span-lg-5,\n  .ed-grid > .lg-cols-5 {\n    -ms-grid-column-span: 5;\n        grid-column-end: span 5;\n  }\n  .ed-grid > .lg-rows-5 {\n    -ms-grid-row-span: 5;\n        grid-row-end: span 5;\n  }\n  .ed-grid > .lg-x-5 {\n    -ms-grid-column: 5;\n        grid-column-start: 5;\n  }\n  .ed-grid > .lg-y-5 {\n    -ms-grid-row: 5;\n        grid-row-start: 5;\n  }\n  .ed-grid.cols-lg-6, .ed-grid.lg-grid-6 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 5) / 6))[6];\n        grid-template-columns: repeat(6, calc((100% - var(--gap) * 5) / 6));\n  }\n  .ed-grid > .span-lg-6,\n  .ed-grid > .lg-cols-6 {\n    -ms-grid-column-span: 6;\n        grid-column-end: span 6;\n  }\n  .ed-grid > .lg-rows-6 {\n    -ms-grid-row-span: 6;\n        grid-row-end: span 6;\n  }\n  .ed-grid > .lg-x-6 {\n    -ms-grid-column: 6;\n        grid-column-start: 6;\n  }\n  .ed-grid > .lg-y-6 {\n    -ms-grid-row: 6;\n        grid-row-start: 6;\n  }\n  .ed-grid.cols-lg-7, .ed-grid.lg-grid-7 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 6) / 7))[7];\n        grid-template-columns: repeat(7, calc((100% - var(--gap) * 6) / 7));\n  }\n  .ed-grid > .span-lg-7,\n  .ed-grid > .lg-cols-7 {\n    -ms-grid-column-span: 7;\n        grid-column-end: span 7;\n  }\n  .ed-grid > .lg-rows-7 {\n    -ms-grid-row-span: 7;\n        grid-row-end: span 7;\n  }\n  .ed-grid > .lg-x-7 {\n    -ms-grid-column: 7;\n        grid-column-start: 7;\n  }\n  .ed-grid > .lg-y-7 {\n    -ms-grid-row: 7;\n        grid-row-start: 7;\n  }\n  .ed-grid.cols-lg-8, .ed-grid.lg-grid-8 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 7) / 8))[8];\n        grid-template-columns: repeat(8, calc((100% - var(--gap) * 7) / 8));\n  }\n  .ed-grid > .span-lg-8,\n  .ed-grid > .lg-cols-8 {\n    -ms-grid-column-span: 8;\n        grid-column-end: span 8;\n  }\n  .ed-grid > .lg-rows-8 {\n    -ms-grid-row-span: 8;\n        grid-row-end: span 8;\n  }\n  .ed-grid > .lg-x-8 {\n    -ms-grid-column: 8;\n        grid-column-start: 8;\n  }\n  .ed-grid > .lg-y-8 {\n    -ms-grid-row: 8;\n        grid-row-start: 8;\n  }\n  .ed-grid.cols-lg-9, .ed-grid.lg-grid-9 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 8) / 9))[9];\n        grid-template-columns: repeat(9, calc((100% - var(--gap) * 8) / 9));\n  }\n  .ed-grid > .span-lg-9,\n  .ed-grid > .lg-cols-9 {\n    -ms-grid-column-span: 9;\n        grid-column-end: span 9;\n  }\n  .ed-grid > .lg-rows-9 {\n    -ms-grid-row-span: 9;\n        grid-row-end: span 9;\n  }\n  .ed-grid > .lg-x-9 {\n    -ms-grid-column: 9;\n        grid-column-start: 9;\n  }\n  .ed-grid > .lg-y-9 {\n    -ms-grid-row: 9;\n        grid-row-start: 9;\n  }\n  .ed-grid.cols-lg-10, .ed-grid.lg-grid-10 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 9) / 10))[10];\n        grid-template-columns: repeat(10, calc((100% - var(--gap) * 9) / 10));\n  }\n  .ed-grid > .span-lg-10,\n  .ed-grid > .lg-cols-10 {\n    -ms-grid-column-span: 10;\n        grid-column-end: span 10;\n  }\n  .ed-grid > .lg-rows-10 {\n    -ms-grid-row-span: 10;\n        grid-row-end: span 10;\n  }\n  .ed-grid > .lg-x-10 {\n    -ms-grid-column: 10;\n        grid-column-start: 10;\n  }\n  .ed-grid > .lg-y-10 {\n    -ms-grid-row: 10;\n        grid-row-start: 10;\n  }\n  .ed-grid.cols-lg-11, .ed-grid.lg-grid-11 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 10) / 11))[11];\n        grid-template-columns: repeat(11, calc((100% - var(--gap) * 10) / 11));\n  }\n  .ed-grid > .span-lg-11,\n  .ed-grid > .lg-cols-11 {\n    -ms-grid-column-span: 11;\n        grid-column-end: span 11;\n  }\n  .ed-grid > .lg-rows-11 {\n    -ms-grid-row-span: 11;\n        grid-row-end: span 11;\n  }\n  .ed-grid > .lg-x-11 {\n    -ms-grid-column: 11;\n        grid-column-start: 11;\n  }\n  .ed-grid > .lg-y-11 {\n    -ms-grid-row: 11;\n        grid-row-start: 11;\n  }\n  .ed-grid.cols-lg-12, .ed-grid.lg-grid-12 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 11) / 12))[12];\n        grid-template-columns: repeat(12, calc((100% - var(--gap) * 11) / 12));\n  }\n  .ed-grid > .span-lg-12,\n  .ed-grid > .lg-cols-12 {\n    -ms-grid-column-span: 12;\n        grid-column-end: span 12;\n  }\n  .ed-grid > .lg-rows-12 {\n    -ms-grid-row-span: 12;\n        grid-row-end: span 12;\n  }\n  .ed-grid > .lg-x-12 {\n    -ms-grid-column: 12;\n        grid-column-start: 12;\n  }\n  .ed-grid > .lg-y-12 {\n    -ms-grid-row: 12;\n        grid-row-start: 12;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .ed-grid.cols-xl-1, .ed-grid.xl-grid-1 {\n    -ms-grid-columns: 100%;\n        grid-template-columns: 100%;\n  }\n  .ed-grid > .span-xl-1,\n  .ed-grid > .xl-cols-1 {\n    -ms-grid-column-span: 1;\n        grid-column-end: span 1;\n  }\n  .ed-grid > .xl-rows-1 {\n    -ms-grid-row-span: 1;\n        grid-row-end: span 1;\n  }\n  .ed-grid > .xl-x-1 {\n    -ms-grid-column: 1;\n        grid-column-start: 1;\n  }\n  .ed-grid > .xl-y-1 {\n    -ms-grid-row: 1;\n        grid-row-start: 1;\n  }\n  .ed-grid.cols-xl-2, .ed-grid.xl-grid-2 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 1) / 2))[2];\n        grid-template-columns: repeat(2, calc((100% - var(--gap) * 1) / 2));\n  }\n  .ed-grid > .span-xl-2,\n  .ed-grid > .xl-cols-2 {\n    -ms-grid-column-span: 2;\n        grid-column-end: span 2;\n  }\n  .ed-grid > .xl-rows-2 {\n    -ms-grid-row-span: 2;\n        grid-row-end: span 2;\n  }\n  .ed-grid > .xl-x-2 {\n    -ms-grid-column: 2;\n        grid-column-start: 2;\n  }\n  .ed-grid > .xl-y-2 {\n    -ms-grid-row: 2;\n        grid-row-start: 2;\n  }\n  .ed-grid.cols-xl-3, .ed-grid.xl-grid-3 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 2) / 3))[3];\n        grid-template-columns: repeat(3, calc((100% - var(--gap) * 2) / 3));\n  }\n  .ed-grid > .span-xl-3,\n  .ed-grid > .xl-cols-3 {\n    -ms-grid-column-span: 3;\n        grid-column-end: span 3;\n  }\n  .ed-grid > .xl-rows-3 {\n    -ms-grid-row-span: 3;\n        grid-row-end: span 3;\n  }\n  .ed-grid > .xl-x-3 {\n    -ms-grid-column: 3;\n        grid-column-start: 3;\n  }\n  .ed-grid > .xl-y-3 {\n    -ms-grid-row: 3;\n        grid-row-start: 3;\n  }\n  .ed-grid.cols-xl-4, .ed-grid.xl-grid-4 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 3) / 4))[4];\n        grid-template-columns: repeat(4, calc((100% - var(--gap) * 3) / 4));\n  }\n  .ed-grid > .span-xl-4,\n  .ed-grid > .xl-cols-4 {\n    -ms-grid-column-span: 4;\n        grid-column-end: span 4;\n  }\n  .ed-grid > .xl-rows-4 {\n    -ms-grid-row-span: 4;\n        grid-row-end: span 4;\n  }\n  .ed-grid > .xl-x-4 {\n    -ms-grid-column: 4;\n        grid-column-start: 4;\n  }\n  .ed-grid > .xl-y-4 {\n    -ms-grid-row: 4;\n        grid-row-start: 4;\n  }\n  .ed-grid.cols-xl-5, .ed-grid.xl-grid-5 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 4) / 5))[5];\n        grid-template-columns: repeat(5, calc((100% - var(--gap) * 4) / 5));\n  }\n  .ed-grid > .span-xl-5,\n  .ed-grid > .xl-cols-5 {\n    -ms-grid-column-span: 5;\n        grid-column-end: span 5;\n  }\n  .ed-grid > .xl-rows-5 {\n    -ms-grid-row-span: 5;\n        grid-row-end: span 5;\n  }\n  .ed-grid > .xl-x-5 {\n    -ms-grid-column: 5;\n        grid-column-start: 5;\n  }\n  .ed-grid > .xl-y-5 {\n    -ms-grid-row: 5;\n        grid-row-start: 5;\n  }\n  .ed-grid.cols-xl-6, .ed-grid.xl-grid-6 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 5) / 6))[6];\n        grid-template-columns: repeat(6, calc((100% - var(--gap) * 5) / 6));\n  }\n  .ed-grid > .span-xl-6,\n  .ed-grid > .xl-cols-6 {\n    -ms-grid-column-span: 6;\n        grid-column-end: span 6;\n  }\n  .ed-grid > .xl-rows-6 {\n    -ms-grid-row-span: 6;\n        grid-row-end: span 6;\n  }\n  .ed-grid > .xl-x-6 {\n    -ms-grid-column: 6;\n        grid-column-start: 6;\n  }\n  .ed-grid > .xl-y-6 {\n    -ms-grid-row: 6;\n        grid-row-start: 6;\n  }\n  .ed-grid.cols-xl-7, .ed-grid.xl-grid-7 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 6) / 7))[7];\n        grid-template-columns: repeat(7, calc((100% - var(--gap) * 6) / 7));\n  }\n  .ed-grid > .span-xl-7,\n  .ed-grid > .xl-cols-7 {\n    -ms-grid-column-span: 7;\n        grid-column-end: span 7;\n  }\n  .ed-grid > .xl-rows-7 {\n    -ms-grid-row-span: 7;\n        grid-row-end: span 7;\n  }\n  .ed-grid > .xl-x-7 {\n    -ms-grid-column: 7;\n        grid-column-start: 7;\n  }\n  .ed-grid > .xl-y-7 {\n    -ms-grid-row: 7;\n        grid-row-start: 7;\n  }\n  .ed-grid.cols-xl-8, .ed-grid.xl-grid-8 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 7) / 8))[8];\n        grid-template-columns: repeat(8, calc((100% - var(--gap) * 7) / 8));\n  }\n  .ed-grid > .span-xl-8,\n  .ed-grid > .xl-cols-8 {\n    -ms-grid-column-span: 8;\n        grid-column-end: span 8;\n  }\n  .ed-grid > .xl-rows-8 {\n    -ms-grid-row-span: 8;\n        grid-row-end: span 8;\n  }\n  .ed-grid > .xl-x-8 {\n    -ms-grid-column: 8;\n        grid-column-start: 8;\n  }\n  .ed-grid > .xl-y-8 {\n    -ms-grid-row: 8;\n        grid-row-start: 8;\n  }\n  .ed-grid.cols-xl-9, .ed-grid.xl-grid-9 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 8) / 9))[9];\n        grid-template-columns: repeat(9, calc((100% - var(--gap) * 8) / 9));\n  }\n  .ed-grid > .span-xl-9,\n  .ed-grid > .xl-cols-9 {\n    -ms-grid-column-span: 9;\n        grid-column-end: span 9;\n  }\n  .ed-grid > .xl-rows-9 {\n    -ms-grid-row-span: 9;\n        grid-row-end: span 9;\n  }\n  .ed-grid > .xl-x-9 {\n    -ms-grid-column: 9;\n        grid-column-start: 9;\n  }\n  .ed-grid > .xl-y-9 {\n    -ms-grid-row: 9;\n        grid-row-start: 9;\n  }\n  .ed-grid.cols-xl-10, .ed-grid.xl-grid-10 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 9) / 10))[10];\n        grid-template-columns: repeat(10, calc((100% - var(--gap) * 9) / 10));\n  }\n  .ed-grid > .span-xl-10,\n  .ed-grid > .xl-cols-10 {\n    -ms-grid-column-span: 10;\n        grid-column-end: span 10;\n  }\n  .ed-grid > .xl-rows-10 {\n    -ms-grid-row-span: 10;\n        grid-row-end: span 10;\n  }\n  .ed-grid > .xl-x-10 {\n    -ms-grid-column: 10;\n        grid-column-start: 10;\n  }\n  .ed-grid > .xl-y-10 {\n    -ms-grid-row: 10;\n        grid-row-start: 10;\n  }\n  .ed-grid.cols-xl-11, .ed-grid.xl-grid-11 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 10) / 11))[11];\n        grid-template-columns: repeat(11, calc((100% - var(--gap) * 10) / 11));\n  }\n  .ed-grid > .span-xl-11,\n  .ed-grid > .xl-cols-11 {\n    -ms-grid-column-span: 11;\n        grid-column-end: span 11;\n  }\n  .ed-grid > .xl-rows-11 {\n    -ms-grid-row-span: 11;\n        grid-row-end: span 11;\n  }\n  .ed-grid > .xl-x-11 {\n    -ms-grid-column: 11;\n        grid-column-start: 11;\n  }\n  .ed-grid > .xl-y-11 {\n    -ms-grid-row: 11;\n        grid-row-start: 11;\n  }\n  .ed-grid.cols-xl-12, .ed-grid.xl-grid-12 {\n    -ms-grid-columns: (calc((100% - var(--gap) * 11) / 12))[12];\n        grid-template-columns: repeat(12, calc((100% - var(--gap) * 11) / 12));\n  }\n  .ed-grid > .span-xl-12,\n  .ed-grid > .xl-cols-12 {\n    -ms-grid-column-span: 12;\n        grid-column-end: span 12;\n  }\n  .ed-grid > .xl-rows-12 {\n    -ms-grid-row-span: 12;\n        grid-row-end: span 12;\n  }\n  .ed-grid > .xl-x-12 {\n    -ms-grid-column: 12;\n        grid-column-start: 12;\n  }\n  .ed-grid > .xl-y-12 {\n    -ms-grid-row: 12;\n        grid-row-start: 12;\n  }\n}\n\n.ed-grid[class*=\"-main-\"], .ed-grid[class*=\"-cross-\"] {\n  display: -ms-grid;\n  display: grid;\n}\n\n.l-block,\n.cancel-l-block,\n.l-section,\n.cancel-l-section,\n.l-big-section,\n.cancel-l-big-section {\n  margin-top: 0;\n}\n\n.l-block {\n  margin-bottom: var(--vertical-block-space);\n}\n\n.cancel-l-block {\n  margin-top: calc(var(--vertical-block-space) * -1);\n}\n\n.l-section {\n  margin-bottom: calc(var(--vertical-block-space) * 2);\n}\n\n.cancel-l-section {\n  margin-top: calc(var(--vertical-block-space) * -2);\n}\n\n.l-big-section {\n  margin-bottom: calc(var(--vertical-block-space) * 4);\n}\n\n.cancel-l-big-section {\n  margin-top: calc(var(--vertical-block-space) * -4);\n}\n\nbody {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-height: 100vh;\n}\n\n.main-footer {\n  margin-top: auto;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  margin-top: 0;\n  margin-bottom: var(--vertical-content-space);\n}\n\nh1 {\n  margin-bottom: calc(var(--vertical-content-space) * 1.5);\n}\n\np,\nvideo,\nblockquote,\narticle,\nsection,\nform,\nfigure,\niframe,\nul,\nol,\npre,\nhr,\ndl,\naddress,\ntable {\n  margin-top: 0;\n  margin-bottom: calc(var(--vertical-content-space) * 1.5);\n}\n\np + h2,\nvideo + h2,\nblockquote + h2,\narticle + h2,\nsection + h2,\nform + h2,\nfigure + h2,\niframe + h2,\nul + h2,\nol + h2,\npre + h2,\nhr + h2,\ndl + h2,\naddress + h2,\ntable + h2 {\n  padding-top: calc(var(--vertical-content-space) * 1.5);\n}\n\np + h3,\nvideo + h3,\nblockquote + h3,\narticle + h3,\nsection + h3,\nform + h3,\nfigure + h3,\niframe + h3,\nul + h3,\nol + h3,\npre + h3,\nhr + h3,\ndl + h3,\naddress + h3,\ntable + h3 {\n  padding-top: var(--vertical-content-space);\n}\n\nul ul,\nol ol,\nul ol,\nol ul {\n  margin-bottom: 0;\n}\n\n.s-pt-0 {\n  padding-top: 0;\n}\n\n.s-pl-0 {\n  padding-left: 0;\n}\n\n.s-pb-0 {\n  padding-bottom: 0;\n}\n\n.s-pr-0 {\n  padding-right: 0;\n}\n\n.s-py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.s-px-0 {\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.s-pxy-0 {\n  padding: 0;\n}\n\n.s-mr-0 {\n  margin-right: 0;\n}\n\n.s-mb-0 {\n  margin-bottom: 0;\n}\n\n.s-mt-0 {\n  margin-top: 0;\n}\n\n.s-ml-0 {\n  margin-left: 0;\n}\n\n.s-sticky-0 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 0);\n}\n\n.s-pt-1 {\n  padding-top: 0.5rem;\n}\n\n.s-pl-1 {\n  padding-left: 0.5rem;\n}\n\n.s-pb-1 {\n  padding-bottom: 0.5rem;\n}\n\n.s-pr-1 {\n  padding-right: 0.5rem;\n}\n\n.s-py-1 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.s-px-1 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.s-pxy-1 {\n  padding: 0.5rem;\n}\n\n.s-mr-1 {\n  margin-right: 0.5rem;\n}\n\n.s-mb-1 {\n  margin-bottom: 0.5rem;\n}\n\n.s-mt-1 {\n  margin-top: -0.5rem;\n}\n\n.s-ml-1 {\n  margin-left: -0.5rem;\n}\n\n.s-sticky-1 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 0.5rem);\n}\n\n.s-pt-2 {\n  padding-top: 1rem;\n}\n\n.s-pl-2 {\n  padding-left: 1rem;\n}\n\n.s-pb-2 {\n  padding-bottom: 1rem;\n}\n\n.s-pr-2 {\n  padding-right: 1rem;\n}\n\n.s-py-2 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.s-px-2 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.s-pxy-2 {\n  padding: 1rem;\n}\n\n.s-mr-2 {\n  margin-right: 1rem;\n}\n\n.s-mb-2 {\n  margin-bottom: 1rem;\n}\n\n.s-mt-2 {\n  margin-top: -1rem;\n}\n\n.s-ml-2 {\n  margin-left: -1rem;\n}\n\n.s-sticky-2 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 1rem);\n}\n\n.s-pt-3 {\n  padding-top: 1.5rem;\n}\n\n.s-pl-3 {\n  padding-left: 1.5rem;\n}\n\n.s-pb-3 {\n  padding-bottom: 1.5rem;\n}\n\n.s-pr-3 {\n  padding-right: 1.5rem;\n}\n\n.s-py-3 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.s-px-3 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.s-pxy-3 {\n  padding: 1.5rem;\n}\n\n.s-mr-3 {\n  margin-right: 1.5rem;\n}\n\n.s-mb-3 {\n  margin-bottom: 1.5rem;\n}\n\n.s-mt-3 {\n  margin-top: -1.5rem;\n}\n\n.s-ml-3 {\n  margin-left: -1.5rem;\n}\n\n.s-sticky-3 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 1.5rem);\n}\n\n.s-pt-4 {\n  padding-top: 2rem;\n}\n\n.s-pl-4 {\n  padding-left: 2rem;\n}\n\n.s-pb-4 {\n  padding-bottom: 2rem;\n}\n\n.s-pr-4 {\n  padding-right: 2rem;\n}\n\n.s-py-4 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.s-px-4 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.s-pxy-4 {\n  padding: 2rem;\n}\n\n.s-mr-4 {\n  margin-right: 2rem;\n}\n\n.s-mb-4 {\n  margin-bottom: 2rem;\n}\n\n.s-mt-4 {\n  margin-top: -2rem;\n}\n\n.s-ml-4 {\n  margin-left: -2rem;\n}\n\n.s-sticky-4 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 2rem);\n}\n\n.s-pt-05 {\n  padding-top: 0.25rem;\n}\n\n.s-pl-05 {\n  padding-left: 0.25rem;\n}\n\n.s-pb-05 {\n  padding-bottom: 0.25rem;\n}\n\n.s-pr-05 {\n  padding-right: 0.25rem;\n}\n\n.s-py-05 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.s-px-05 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.s-pxy-05 {\n  padding: 0.25rem;\n}\n\n.s-mr-05 {\n  margin-right: 0.25rem;\n}\n\n.s-mb-05 {\n  margin-bottom: 0.25rem;\n}\n\n.s-mt-05 {\n  margin-top: -0.25rem;\n}\n\n.s-ml-05 {\n  margin-left: -0.25rem;\n}\n\n.s-sticky-05 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: calc(var(--header-height) + 0.25rem);\n}\n\n.s-sticky-none {\n  position: static;\n}\n\n@media screen and (min-width: 640px) {\n  .m-pt-0 {\n    padding-top: 0;\n  }\n  .m-pl-0 {\n    padding-left: 0;\n  }\n  .m-pb-0 {\n    padding-bottom: 0;\n  }\n  .m-pr-0 {\n    padding-right: 0;\n  }\n  .m-py-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .m-px-0 {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .m-pxy-0 {\n    padding: 0;\n  }\n  .m-mr-0 {\n    margin-right: 0;\n  }\n  .m-mb-0 {\n    margin-bottom: 0;\n  }\n  .m-mt-0 {\n    margin-top: 0;\n  }\n  .m-ml-0 {\n    margin-left: 0;\n  }\n  .m-sticky-0 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0);\n  }\n  .m-pt-1 {\n    padding-top: 0.5rem;\n  }\n  .m-pl-1 {\n    padding-left: 0.5rem;\n  }\n  .m-pb-1 {\n    padding-bottom: 0.5rem;\n  }\n  .m-pr-1 {\n    padding-right: 0.5rem;\n  }\n  .m-py-1 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .m-px-1 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .m-pxy-1 {\n    padding: 0.5rem;\n  }\n  .m-mr-1 {\n    margin-right: 0.5rem;\n  }\n  .m-mb-1 {\n    margin-bottom: 0.5rem;\n  }\n  .m-mt-1 {\n    margin-top: -0.5rem;\n  }\n  .m-ml-1 {\n    margin-left: -0.5rem;\n  }\n  .m-sticky-1 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.5rem);\n  }\n  .m-pt-2 {\n    padding-top: 1rem;\n  }\n  .m-pl-2 {\n    padding-left: 1rem;\n  }\n  .m-pb-2 {\n    padding-bottom: 1rem;\n  }\n  .m-pr-2 {\n    padding-right: 1rem;\n  }\n  .m-py-2 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .m-px-2 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .m-pxy-2 {\n    padding: 1rem;\n  }\n  .m-mr-2 {\n    margin-right: 1rem;\n  }\n  .m-mb-2 {\n    margin-bottom: 1rem;\n  }\n  .m-mt-2 {\n    margin-top: -1rem;\n  }\n  .m-ml-2 {\n    margin-left: -1rem;\n  }\n  .m-sticky-2 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1rem);\n  }\n  .m-pt-3 {\n    padding-top: 1.5rem;\n  }\n  .m-pl-3 {\n    padding-left: 1.5rem;\n  }\n  .m-pb-3 {\n    padding-bottom: 1.5rem;\n  }\n  .m-pr-3 {\n    padding-right: 1.5rem;\n  }\n  .m-py-3 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .m-px-3 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .m-pxy-3 {\n    padding: 1.5rem;\n  }\n  .m-mr-3 {\n    margin-right: 1.5rem;\n  }\n  .m-mb-3 {\n    margin-bottom: 1.5rem;\n  }\n  .m-mt-3 {\n    margin-top: -1.5rem;\n  }\n  .m-ml-3 {\n    margin-left: -1.5rem;\n  }\n  .m-sticky-3 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1.5rem);\n  }\n  .m-pt-4 {\n    padding-top: 2rem;\n  }\n  .m-pl-4 {\n    padding-left: 2rem;\n  }\n  .m-pb-4 {\n    padding-bottom: 2rem;\n  }\n  .m-pr-4 {\n    padding-right: 2rem;\n  }\n  .m-py-4 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n  .m-px-4 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .m-pxy-4 {\n    padding: 2rem;\n  }\n  .m-mr-4 {\n    margin-right: 2rem;\n  }\n  .m-mb-4 {\n    margin-bottom: 2rem;\n  }\n  .m-mt-4 {\n    margin-top: -2rem;\n  }\n  .m-ml-4 {\n    margin-left: -2rem;\n  }\n  .m-sticky-4 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 2rem);\n  }\n  .m-pt-05 {\n    padding-top: 0.25rem;\n  }\n  .m-pl-05 {\n    padding-left: 0.25rem;\n  }\n  .m-pb-05 {\n    padding-bottom: 0.25rem;\n  }\n  .m-pr-05 {\n    padding-right: 0.25rem;\n  }\n  .m-py-05 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .m-px-05 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n  .m-pxy-05 {\n    padding: 0.25rem;\n  }\n  .m-mr-05 {\n    margin-right: 0.25rem;\n  }\n  .m-mb-05 {\n    margin-bottom: 0.25rem;\n  }\n  .m-mt-05 {\n    margin-top: -0.25rem;\n  }\n  .m-ml-05 {\n    margin-left: -0.25rem;\n  }\n  .m-sticky-05 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.25rem);\n  }\n  .m-sticky-none {\n    position: static;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-pt-0 {\n    padding-top: 0;\n  }\n  .l-pl-0 {\n    padding-left: 0;\n  }\n  .l-pb-0 {\n    padding-bottom: 0;\n  }\n  .l-pr-0 {\n    padding-right: 0;\n  }\n  .l-py-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .l-px-0 {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .l-pxy-0 {\n    padding: 0;\n  }\n  .l-mr-0 {\n    margin-right: 0;\n  }\n  .l-mb-0 {\n    margin-bottom: 0;\n  }\n  .l-mt-0 {\n    margin-top: 0;\n  }\n  .l-ml-0 {\n    margin-left: 0;\n  }\n  .l-sticky-0 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0);\n  }\n  .l-pt-1 {\n    padding-top: 0.5rem;\n  }\n  .l-pl-1 {\n    padding-left: 0.5rem;\n  }\n  .l-pb-1 {\n    padding-bottom: 0.5rem;\n  }\n  .l-pr-1 {\n    padding-right: 0.5rem;\n  }\n  .l-py-1 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .l-px-1 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .l-pxy-1 {\n    padding: 0.5rem;\n  }\n  .l-mr-1 {\n    margin-right: 0.5rem;\n  }\n  .l-mb-1 {\n    margin-bottom: 0.5rem;\n  }\n  .l-mt-1 {\n    margin-top: -0.5rem;\n  }\n  .l-ml-1 {\n    margin-left: -0.5rem;\n  }\n  .l-sticky-1 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.5rem);\n  }\n  .l-pt-2 {\n    padding-top: 1rem;\n  }\n  .l-pl-2 {\n    padding-left: 1rem;\n  }\n  .l-pb-2 {\n    padding-bottom: 1rem;\n  }\n  .l-pr-2 {\n    padding-right: 1rem;\n  }\n  .l-py-2 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .l-px-2 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .l-pxy-2 {\n    padding: 1rem;\n  }\n  .l-mr-2 {\n    margin-right: 1rem;\n  }\n  .l-mb-2 {\n    margin-bottom: 1rem;\n  }\n  .l-mt-2 {\n    margin-top: -1rem;\n  }\n  .l-ml-2 {\n    margin-left: -1rem;\n  }\n  .l-sticky-2 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1rem);\n  }\n  .l-pt-3 {\n    padding-top: 1.5rem;\n  }\n  .l-pl-3 {\n    padding-left: 1.5rem;\n  }\n  .l-pb-3 {\n    padding-bottom: 1.5rem;\n  }\n  .l-pr-3 {\n    padding-right: 1.5rem;\n  }\n  .l-py-3 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .l-px-3 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .l-pxy-3 {\n    padding: 1.5rem;\n  }\n  .l-mr-3 {\n    margin-right: 1.5rem;\n  }\n  .l-mb-3 {\n    margin-bottom: 1.5rem;\n  }\n  .l-mt-3 {\n    margin-top: -1.5rem;\n  }\n  .l-ml-3 {\n    margin-left: -1.5rem;\n  }\n  .l-sticky-3 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1.5rem);\n  }\n  .l-pt-4 {\n    padding-top: 2rem;\n  }\n  .l-pl-4 {\n    padding-left: 2rem;\n  }\n  .l-pb-4 {\n    padding-bottom: 2rem;\n  }\n  .l-pr-4 {\n    padding-right: 2rem;\n  }\n  .l-py-4 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n  .l-px-4 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .l-pxy-4 {\n    padding: 2rem;\n  }\n  .l-mr-4 {\n    margin-right: 2rem;\n  }\n  .l-mb-4 {\n    margin-bottom: 2rem;\n  }\n  .l-mt-4 {\n    margin-top: -2rem;\n  }\n  .l-ml-4 {\n    margin-left: -2rem;\n  }\n  .l-sticky-4 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 2rem);\n  }\n  .l-pt-05 {\n    padding-top: 0.25rem;\n  }\n  .l-pl-05 {\n    padding-left: 0.25rem;\n  }\n  .l-pb-05 {\n    padding-bottom: 0.25rem;\n  }\n  .l-pr-05 {\n    padding-right: 0.25rem;\n  }\n  .l-py-05 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .l-px-05 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n  .l-pxy-05 {\n    padding: 0.25rem;\n  }\n  .l-mr-05 {\n    margin-right: 0.25rem;\n  }\n  .l-mb-05 {\n    margin-bottom: 0.25rem;\n  }\n  .l-mt-05 {\n    margin-top: -0.25rem;\n  }\n  .l-ml-05 {\n    margin-left: -0.25rem;\n  }\n  .l-sticky-05 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.25rem);\n  }\n  .l-sticky-none {\n    position: static;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-pt-0 {\n    padding-top: 0;\n  }\n  .lg-pl-0 {\n    padding-left: 0;\n  }\n  .lg-pb-0 {\n    padding-bottom: 0;\n  }\n  .lg-pr-0 {\n    padding-right: 0;\n  }\n  .lg-py-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .lg-px-0 {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .lg-pxy-0 {\n    padding: 0;\n  }\n  .lg-mr-0 {\n    margin-right: 0;\n  }\n  .lg-mb-0 {\n    margin-bottom: 0;\n  }\n  .lg-mt-0 {\n    margin-top: 0;\n  }\n  .lg-ml-0 {\n    margin-left: 0;\n  }\n  .lg-sticky-0 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0);\n  }\n  .lg-pt-1 {\n    padding-top: 0.5rem;\n  }\n  .lg-pl-1 {\n    padding-left: 0.5rem;\n  }\n  .lg-pb-1 {\n    padding-bottom: 0.5rem;\n  }\n  .lg-pr-1 {\n    padding-right: 0.5rem;\n  }\n  .lg-py-1 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .lg-px-1 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .lg-pxy-1 {\n    padding: 0.5rem;\n  }\n  .lg-mr-1 {\n    margin-right: 0.5rem;\n  }\n  .lg-mb-1 {\n    margin-bottom: 0.5rem;\n  }\n  .lg-mt-1 {\n    margin-top: -0.5rem;\n  }\n  .lg-ml-1 {\n    margin-left: -0.5rem;\n  }\n  .lg-sticky-1 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.5rem);\n  }\n  .lg-pt-2 {\n    padding-top: 1rem;\n  }\n  .lg-pl-2 {\n    padding-left: 1rem;\n  }\n  .lg-pb-2 {\n    padding-bottom: 1rem;\n  }\n  .lg-pr-2 {\n    padding-right: 1rem;\n  }\n  .lg-py-2 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .lg-px-2 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .lg-pxy-2 {\n    padding: 1rem;\n  }\n  .lg-mr-2 {\n    margin-right: 1rem;\n  }\n  .lg-mb-2 {\n    margin-bottom: 1rem;\n  }\n  .lg-mt-2 {\n    margin-top: -1rem;\n  }\n  .lg-ml-2 {\n    margin-left: -1rem;\n  }\n  .lg-sticky-2 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1rem);\n  }\n  .lg-pt-3 {\n    padding-top: 1.5rem;\n  }\n  .lg-pl-3 {\n    padding-left: 1.5rem;\n  }\n  .lg-pb-3 {\n    padding-bottom: 1.5rem;\n  }\n  .lg-pr-3 {\n    padding-right: 1.5rem;\n  }\n  .lg-py-3 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .lg-px-3 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .lg-pxy-3 {\n    padding: 1.5rem;\n  }\n  .lg-mr-3 {\n    margin-right: 1.5rem;\n  }\n  .lg-mb-3 {\n    margin-bottom: 1.5rem;\n  }\n  .lg-mt-3 {\n    margin-top: -1.5rem;\n  }\n  .lg-ml-3 {\n    margin-left: -1.5rem;\n  }\n  .lg-sticky-3 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1.5rem);\n  }\n  .lg-pt-4 {\n    padding-top: 2rem;\n  }\n  .lg-pl-4 {\n    padding-left: 2rem;\n  }\n  .lg-pb-4 {\n    padding-bottom: 2rem;\n  }\n  .lg-pr-4 {\n    padding-right: 2rem;\n  }\n  .lg-py-4 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n  .lg-px-4 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .lg-pxy-4 {\n    padding: 2rem;\n  }\n  .lg-mr-4 {\n    margin-right: 2rem;\n  }\n  .lg-mb-4 {\n    margin-bottom: 2rem;\n  }\n  .lg-mt-4 {\n    margin-top: -2rem;\n  }\n  .lg-ml-4 {\n    margin-left: -2rem;\n  }\n  .lg-sticky-4 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 2rem);\n  }\n  .lg-pt-05 {\n    padding-top: 0.25rem;\n  }\n  .lg-pl-05 {\n    padding-left: 0.25rem;\n  }\n  .lg-pb-05 {\n    padding-bottom: 0.25rem;\n  }\n  .lg-pr-05 {\n    padding-right: 0.25rem;\n  }\n  .lg-py-05 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .lg-px-05 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n  .lg-pxy-05 {\n    padding: 0.25rem;\n  }\n  .lg-mr-05 {\n    margin-right: 0.25rem;\n  }\n  .lg-mb-05 {\n    margin-bottom: 0.25rem;\n  }\n  .lg-mt-05 {\n    margin-top: -0.25rem;\n  }\n  .lg-ml-05 {\n    margin-left: -0.25rem;\n  }\n  .lg-sticky-05 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.25rem);\n  }\n  .lg-sticky-none {\n    position: static;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-pt-0 {\n    padding-top: 0;\n  }\n  .xl-pl-0 {\n    padding-left: 0;\n  }\n  .xl-pb-0 {\n    padding-bottom: 0;\n  }\n  .xl-pr-0 {\n    padding-right: 0;\n  }\n  .xl-py-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .xl-px-0 {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .xl-pxy-0 {\n    padding: 0;\n  }\n  .xl-mr-0 {\n    margin-right: 0;\n  }\n  .xl-mb-0 {\n    margin-bottom: 0;\n  }\n  .xl-mt-0 {\n    margin-top: 0;\n  }\n  .xl-ml-0 {\n    margin-left: 0;\n  }\n  .xl-sticky-0 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0);\n  }\n  .xl-pt-1 {\n    padding-top: 0.5rem;\n  }\n  .xl-pl-1 {\n    padding-left: 0.5rem;\n  }\n  .xl-pb-1 {\n    padding-bottom: 0.5rem;\n  }\n  .xl-pr-1 {\n    padding-right: 0.5rem;\n  }\n  .xl-py-1 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .xl-px-1 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .xl-pxy-1 {\n    padding: 0.5rem;\n  }\n  .xl-mr-1 {\n    margin-right: 0.5rem;\n  }\n  .xl-mb-1 {\n    margin-bottom: 0.5rem;\n  }\n  .xl-mt-1 {\n    margin-top: -0.5rem;\n  }\n  .xl-ml-1 {\n    margin-left: -0.5rem;\n  }\n  .xl-sticky-1 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.5rem);\n  }\n  .xl-pt-2 {\n    padding-top: 1rem;\n  }\n  .xl-pl-2 {\n    padding-left: 1rem;\n  }\n  .xl-pb-2 {\n    padding-bottom: 1rem;\n  }\n  .xl-pr-2 {\n    padding-right: 1rem;\n  }\n  .xl-py-2 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .xl-px-2 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .xl-pxy-2 {\n    padding: 1rem;\n  }\n  .xl-mr-2 {\n    margin-right: 1rem;\n  }\n  .xl-mb-2 {\n    margin-bottom: 1rem;\n  }\n  .xl-mt-2 {\n    margin-top: -1rem;\n  }\n  .xl-ml-2 {\n    margin-left: -1rem;\n  }\n  .xl-sticky-2 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1rem);\n  }\n  .xl-pt-3 {\n    padding-top: 1.5rem;\n  }\n  .xl-pl-3 {\n    padding-left: 1.5rem;\n  }\n  .xl-pb-3 {\n    padding-bottom: 1.5rem;\n  }\n  .xl-pr-3 {\n    padding-right: 1.5rem;\n  }\n  .xl-py-3 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .xl-px-3 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .xl-pxy-3 {\n    padding: 1.5rem;\n  }\n  .xl-mr-3 {\n    margin-right: 1.5rem;\n  }\n  .xl-mb-3 {\n    margin-bottom: 1.5rem;\n  }\n  .xl-mt-3 {\n    margin-top: -1.5rem;\n  }\n  .xl-ml-3 {\n    margin-left: -1.5rem;\n  }\n  .xl-sticky-3 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 1.5rem);\n  }\n  .xl-pt-4 {\n    padding-top: 2rem;\n  }\n  .xl-pl-4 {\n    padding-left: 2rem;\n  }\n  .xl-pb-4 {\n    padding-bottom: 2rem;\n  }\n  .xl-pr-4 {\n    padding-right: 2rem;\n  }\n  .xl-py-4 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n  .xl-px-4 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .xl-pxy-4 {\n    padding: 2rem;\n  }\n  .xl-mr-4 {\n    margin-right: 2rem;\n  }\n  .xl-mb-4 {\n    margin-bottom: 2rem;\n  }\n  .xl-mt-4 {\n    margin-top: -2rem;\n  }\n  .xl-ml-4 {\n    margin-left: -2rem;\n  }\n  .xl-sticky-4 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 2rem);\n  }\n  .xl-pt-05 {\n    padding-top: 0.25rem;\n  }\n  .xl-pl-05 {\n    padding-left: 0.25rem;\n  }\n  .xl-pb-05 {\n    padding-bottom: 0.25rem;\n  }\n  .xl-pr-05 {\n    padding-right: 0.25rem;\n  }\n  .xl-py-05 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .xl-px-05 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n  .xl-pxy-05 {\n    padding: 0.25rem;\n  }\n  .xl-mr-05 {\n    margin-right: 0.25rem;\n  }\n  .xl-mb-05 {\n    margin-bottom: 0.25rem;\n  }\n  .xl-mt-05 {\n    margin-top: -0.25rem;\n  }\n  .xl-ml-05 {\n    margin-left: -0.25rem;\n  }\n  .xl-sticky-05 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: calc(var(--header-height) + 0.25rem);\n  }\n  .xl-sticky-none {\n    position: static;\n  }\n}\n\n/* Alineación de contenido */\n.s-left {\n  text-align: left;\n}\n\n.s-center {\n  text-align: center;\n}\n\n.s-right {\n  text-align: right;\n}\n\n.s-to-left {\n  margin-left: 0;\n  margin-right: auto;\n}\n\n.s-to-left[class*=button] {\n  display: table;\n}\n\n.s-to-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.s-to-center[class*=button] {\n  display: table;\n}\n\n.s-to-right {\n  margin-right: 0;\n  margin-left: auto;\n}\n\n.s-to-right[class*=button] {\n  display: table;\n}\n\n.s-block-left {\n  display: block;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n.s-block-center {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.s-block-right {\n  display: block;\n  margin-right: 0;\n  margin-left: auto;\n}\n\n@media screen and (min-width: 640px) {\n  .m-left {\n    text-align: left;\n  }\n  .m-center {\n    text-align: center;\n  }\n  .m-right {\n    text-align: right;\n  }\n  .m-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .m-to-left[class*=button] {\n    display: table;\n  }\n  .m-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .m-to-center[class*=button] {\n    display: table;\n  }\n  .m-to-right {\n    margin-right: 0;\n    margin-left: auto;\n  }\n  .m-to-right[class*=button] {\n    display: table;\n  }\n  .m-block-left {\n    display: block;\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .m-block-center {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .m-block-right {\n    display: block;\n    margin-right: 0;\n    margin-left: auto;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-left {\n    text-align: left;\n  }\n  .l-center {\n    text-align: center;\n  }\n  .l-right {\n    text-align: right;\n  }\n  .l-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .l-to-left[class*=button] {\n    display: table;\n  }\n  .l-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .l-to-center[class*=button] {\n    display: table;\n  }\n  .l-to-right {\n    margin-right: 0;\n    margin-left: auto;\n  }\n  .l-to-right[class*=button] {\n    display: table;\n  }\n  .l-block-left {\n    display: block;\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .l-block-center {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .l-block-right {\n    display: block;\n    margin-right: 0;\n    margin-left: auto;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-left {\n    text-align: left;\n  }\n  .lg-center {\n    text-align: center;\n  }\n  .lg-right {\n    text-align: right;\n  }\n  .lg-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .lg-to-left[class*=button] {\n    display: table;\n  }\n  .lg-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .lg-to-center[class*=button] {\n    display: table;\n  }\n  .lg-to-right {\n    margin-right: 0;\n    margin-left: auto;\n  }\n  .lg-to-right[class*=button] {\n    display: table;\n  }\n  .lg-block-left {\n    display: block;\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .lg-block-center {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .lg-block-right {\n    display: block;\n    margin-right: 0;\n    margin-left: auto;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-left {\n    text-align: left;\n  }\n  .xl-center {\n    text-align: center;\n  }\n  .xl-right {\n    text-align: right;\n  }\n  .xl-to-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .xl-to-left[class*=button] {\n    display: table;\n  }\n  .xl-to-center {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .xl-to-center[class*=button] {\n    display: table;\n  }\n  .xl-to-right {\n    margin-right: 0;\n    margin-left: auto;\n  }\n  .xl-to-right[class*=button] {\n    display: table;\n  }\n  .xl-block-left {\n    display: block;\n    margin-left: 0;\n    margin-right: auto;\n  }\n  .xl-block-center {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .xl-block-right {\n    display: block;\n    margin-right: 0;\n    margin-left: auto;\n  }\n}\n\n.s-order-1 {\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.s-order-2 {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.s-order-3 {\n  -ms-flex-order: 3;\n      order: 3;\n}\n\n.s-order-4 {\n  -ms-flex-order: 4;\n      order: 4;\n}\n\n.s-order-5 {\n  -ms-flex-order: 5;\n      order: 5;\n}\n\n.s-order-6 {\n  -ms-flex-order: 6;\n      order: 6;\n}\n\n.s-order-7 {\n  -ms-flex-order: 7;\n      order: 7;\n}\n\n.s-order-8 {\n  -ms-flex-order: 8;\n      order: 8;\n}\n\n.s-order-9 {\n  -ms-flex-order: 9;\n      order: 9;\n}\n\n.s-order-10 {\n  -ms-flex-order: 10;\n      order: 10;\n}\n\n.s-order-11 {\n  -ms-flex-order: 11;\n      order: 11;\n}\n\n.s-order-12 {\n  -ms-flex-order: 12;\n      order: 12;\n}\n\n@media screen and (min-width: 640px) {\n  .m-order-1 {\n    -ms-flex-order: 1;\n        order: 1;\n  }\n  .m-order-2 {\n    -ms-flex-order: 2;\n        order: 2;\n  }\n  .m-order-3 {\n    -ms-flex-order: 3;\n        order: 3;\n  }\n  .m-order-4 {\n    -ms-flex-order: 4;\n        order: 4;\n  }\n  .m-order-5 {\n    -ms-flex-order: 5;\n        order: 5;\n  }\n  .m-order-6 {\n    -ms-flex-order: 6;\n        order: 6;\n  }\n  .m-order-7 {\n    -ms-flex-order: 7;\n        order: 7;\n  }\n  .m-order-8 {\n    -ms-flex-order: 8;\n        order: 8;\n  }\n  .m-order-9 {\n    -ms-flex-order: 9;\n        order: 9;\n  }\n  .m-order-10 {\n    -ms-flex-order: 10;\n        order: 10;\n  }\n  .m-order-11 {\n    -ms-flex-order: 11;\n        order: 11;\n  }\n  .m-order-12 {\n    -ms-flex-order: 12;\n        order: 12;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-order-1 {\n    -ms-flex-order: 1;\n        order: 1;\n  }\n  .l-order-2 {\n    -ms-flex-order: 2;\n        order: 2;\n  }\n  .l-order-3 {\n    -ms-flex-order: 3;\n        order: 3;\n  }\n  .l-order-4 {\n    -ms-flex-order: 4;\n        order: 4;\n  }\n  .l-order-5 {\n    -ms-flex-order: 5;\n        order: 5;\n  }\n  .l-order-6 {\n    -ms-flex-order: 6;\n        order: 6;\n  }\n  .l-order-7 {\n    -ms-flex-order: 7;\n        order: 7;\n  }\n  .l-order-8 {\n    -ms-flex-order: 8;\n        order: 8;\n  }\n  .l-order-9 {\n    -ms-flex-order: 9;\n        order: 9;\n  }\n  .l-order-10 {\n    -ms-flex-order: 10;\n        order: 10;\n  }\n  .l-order-11 {\n    -ms-flex-order: 11;\n        order: 11;\n  }\n  .l-order-12 {\n    -ms-flex-order: 12;\n        order: 12;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-order-1 {\n    -ms-flex-order: 1;\n        order: 1;\n  }\n  .lg-order-2 {\n    -ms-flex-order: 2;\n        order: 2;\n  }\n  .lg-order-3 {\n    -ms-flex-order: 3;\n        order: 3;\n  }\n  .lg-order-4 {\n    -ms-flex-order: 4;\n        order: 4;\n  }\n  .lg-order-5 {\n    -ms-flex-order: 5;\n        order: 5;\n  }\n  .lg-order-6 {\n    -ms-flex-order: 6;\n        order: 6;\n  }\n  .lg-order-7 {\n    -ms-flex-order: 7;\n        order: 7;\n  }\n  .lg-order-8 {\n    -ms-flex-order: 8;\n        order: 8;\n  }\n  .lg-order-9 {\n    -ms-flex-order: 9;\n        order: 9;\n  }\n  .lg-order-10 {\n    -ms-flex-order: 10;\n        order: 10;\n  }\n  .lg-order-11 {\n    -ms-flex-order: 11;\n        order: 11;\n  }\n  .lg-order-12 {\n    -ms-flex-order: 12;\n        order: 12;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-order-1 {\n    -ms-flex-order: 1;\n        order: 1;\n  }\n  .xl-order-2 {\n    -ms-flex-order: 2;\n        order: 2;\n  }\n  .xl-order-3 {\n    -ms-flex-order: 3;\n        order: 3;\n  }\n  .xl-order-4 {\n    -ms-flex-order: 4;\n        order: 4;\n  }\n  .xl-order-5 {\n    -ms-flex-order: 5;\n        order: 5;\n  }\n  .xl-order-6 {\n    -ms-flex-order: 6;\n        order: 6;\n  }\n  .xl-order-7 {\n    -ms-flex-order: 7;\n        order: 7;\n  }\n  .xl-order-8 {\n    -ms-flex-order: 8;\n        order: 8;\n  }\n  .xl-order-9 {\n    -ms-flex-order: 9;\n        order: 9;\n  }\n  .xl-order-10 {\n    -ms-flex-order: 10;\n        order: 10;\n  }\n  .xl-order-11 {\n    -ms-flex-order: 11;\n        order: 11;\n  }\n  .xl-order-12 {\n    -ms-flex-order: 12;\n        order: 12;\n  }\n}\n\n/* Crea selectores agrupados para propiedades básicas de flexbox*/\n.flex, .s-row, .s-row-reverse, .s-column, .s-column-reverse, .s-main-start, .s-main-center, .s-main-end, .s-main-justify, .s-main-distribute, .s-cross-baseline, .s-cross-start, .s-cross-center, .s-cross-end {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n@media screen and (min-width: 640px) {\n  .flex, .m-row, .m-row-reverse, .m-column, .m-column-reverse, .m-main-start, .m-main-center, .m-main-end, .m-main-justify, .m-main-distribute, .m-cross-baseline, .m-cross-start, .m-cross-center, .m-cross-end {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .flex, .l-row, .l-row-reverse, .l-column, .l-column-reverse, .l-main-start, .l-main-center, .l-main-end, .l-main-justify, .l-main-distribute, .l-cross-baseline, .l-cross-start, .l-cross-center, .l-cross-end {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .flex, .lg-row, .lg-row-reverse, .lg-column, .lg-column-reverse, .lg-main-start, .lg-main-center, .lg-main-end, .lg-main-justify, .lg-main-distribute, .lg-cross-baseline, .lg-cross-start, .lg-cross-center, .lg-cross-end {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .flex, .xl-row, .xl-row-reverse, .xl-column, .xl-column-reverse, .xl-main-start, .xl-main-center, .xl-main-end, .xl-main-justify, .xl-main-distribute, .xl-cross-baseline, .xl-cross-start, .xl-cross-center, .xl-cross-end {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n  }\n}\n\n/*Crea selectores de flex alignment en todos los breakpoints*/\n.s-row {\n  -ms-flex-direction: row;\n      flex-direction: row;\n}\n\n.s-row-reverse {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n\n.s-column {\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.s-column-reverse {\n  -ms-flex-direction: column-reverse;\n      flex-direction: column-reverse;\n}\n\n.s-main-start {\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n}\n\n.s-main-center {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.s-main-end {\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n.s-main-justify {\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.s-main-distribute {\n  -ms-flex-pack: space-evenly;\n      justify-content: space-evenly;\n}\n\n.s-cross-baseline {\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  -ms-flex-line-pack: baseline;\n      align-content: baseline;\n}\n\n.s-cross-start {\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-line-pack: start;\n      align-content: flex-start;\n}\n\n.s-cross-center {\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-line-pack: center;\n      align-content: center;\n}\n\n.s-cross-end {\n  -ms-flex-align: end;\n      align-items: flex-end;\n  -ms-flex-line-pack: end;\n      align-content: flex-end;\n}\n\n@media screen and (min-width: 640px) {\n  .m-row {\n    -ms-flex-direction: row;\n        flex-direction: row;\n  }\n  .m-row-reverse {\n    -ms-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n  }\n  .m-column {\n    -ms-flex-direction: column;\n        flex-direction: column;\n  }\n  .m-column-reverse {\n    -ms-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n  }\n  .m-main-start {\n    -ms-flex-pack: start;\n        justify-content: flex-start;\n  }\n  .m-main-center {\n    -ms-flex-pack: center;\n        justify-content: center;\n  }\n  .m-main-end {\n    -ms-flex-pack: end;\n        justify-content: flex-end;\n  }\n  .m-main-justify {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n  }\n  .m-main-distribute {\n    -ms-flex-pack: space-evenly;\n        justify-content: space-evenly;\n  }\n  .m-cross-baseline {\n    -ms-flex-align: baseline;\n        align-items: baseline;\n    -ms-flex-line-pack: baseline;\n        align-content: baseline;\n  }\n  .m-cross-start {\n    -ms-flex-align: start;\n        align-items: flex-start;\n    -ms-flex-line-pack: start;\n        align-content: flex-start;\n  }\n  .m-cross-center {\n    -ms-flex-align: center;\n        align-items: center;\n    -ms-flex-line-pack: center;\n        align-content: center;\n  }\n  .m-cross-end {\n    -ms-flex-align: end;\n        align-items: flex-end;\n    -ms-flex-line-pack: end;\n        align-content: flex-end;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-row {\n    -ms-flex-direction: row;\n        flex-direction: row;\n  }\n  .l-row-reverse {\n    -ms-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n  }\n  .l-column {\n    -ms-flex-direction: column;\n        flex-direction: column;\n  }\n  .l-column-reverse {\n    -ms-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n  }\n  .l-main-start {\n    -ms-flex-pack: start;\n        justify-content: flex-start;\n  }\n  .l-main-center {\n    -ms-flex-pack: center;\n        justify-content: center;\n  }\n  .l-main-end {\n    -ms-flex-pack: end;\n        justify-content: flex-end;\n  }\n  .l-main-justify {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n  }\n  .l-main-distribute {\n    -ms-flex-pack: space-evenly;\n        justify-content: space-evenly;\n  }\n  .l-cross-baseline {\n    -ms-flex-align: baseline;\n        align-items: baseline;\n    -ms-flex-line-pack: baseline;\n        align-content: baseline;\n  }\n  .l-cross-start {\n    -ms-flex-align: start;\n        align-items: flex-start;\n    -ms-flex-line-pack: start;\n        align-content: flex-start;\n  }\n  .l-cross-center {\n    -ms-flex-align: center;\n        align-items: center;\n    -ms-flex-line-pack: center;\n        align-content: center;\n  }\n  .l-cross-end {\n    -ms-flex-align: end;\n        align-items: flex-end;\n    -ms-flex-line-pack: end;\n        align-content: flex-end;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-row {\n    -ms-flex-direction: row;\n        flex-direction: row;\n  }\n  .lg-row-reverse {\n    -ms-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n  }\n  .lg-column {\n    -ms-flex-direction: column;\n        flex-direction: column;\n  }\n  .lg-column-reverse {\n    -ms-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n  }\n  .lg-main-start {\n    -ms-flex-pack: start;\n        justify-content: flex-start;\n  }\n  .lg-main-center {\n    -ms-flex-pack: center;\n        justify-content: center;\n  }\n  .lg-main-end {\n    -ms-flex-pack: end;\n        justify-content: flex-end;\n  }\n  .lg-main-justify {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n  }\n  .lg-main-distribute {\n    -ms-flex-pack: space-evenly;\n        justify-content: space-evenly;\n  }\n  .lg-cross-baseline {\n    -ms-flex-align: baseline;\n        align-items: baseline;\n    -ms-flex-line-pack: baseline;\n        align-content: baseline;\n  }\n  .lg-cross-start {\n    -ms-flex-align: start;\n        align-items: flex-start;\n    -ms-flex-line-pack: start;\n        align-content: flex-start;\n  }\n  .lg-cross-center {\n    -ms-flex-align: center;\n        align-items: center;\n    -ms-flex-line-pack: center;\n        align-content: center;\n  }\n  .lg-cross-end {\n    -ms-flex-align: end;\n        align-items: flex-end;\n    -ms-flex-line-pack: end;\n        align-content: flex-end;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-row {\n    -ms-flex-direction: row;\n        flex-direction: row;\n  }\n  .xl-row-reverse {\n    -ms-flex-direction: row-reverse;\n        flex-direction: row-reverse;\n  }\n  .xl-column {\n    -ms-flex-direction: column;\n        flex-direction: column;\n  }\n  .xl-column-reverse {\n    -ms-flex-direction: column-reverse;\n        flex-direction: column-reverse;\n  }\n  .xl-main-start {\n    -ms-flex-pack: start;\n        justify-content: flex-start;\n  }\n  .xl-main-center {\n    -ms-flex-pack: center;\n        justify-content: center;\n  }\n  .xl-main-end {\n    -ms-flex-pack: end;\n        justify-content: flex-end;\n  }\n  .xl-main-justify {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n  }\n  .xl-main-distribute {\n    -ms-flex-pack: space-evenly;\n        justify-content: space-evenly;\n  }\n  .xl-cross-baseline {\n    -ms-flex-align: baseline;\n        align-items: baseline;\n    -ms-flex-line-pack: baseline;\n        align-content: baseline;\n  }\n  .xl-cross-start {\n    -ms-flex-align: start;\n        align-items: flex-start;\n    -ms-flex-line-pack: start;\n        align-content: flex-start;\n  }\n  .xl-cross-center {\n    -ms-flex-align: center;\n        align-items: center;\n    -ms-flex-line-pack: center;\n        align-content: center;\n  }\n  .xl-cross-end {\n    -ms-flex-align: end;\n        align-items: flex-end;\n    -ms-flex-line-pack: end;\n        align-content: flex-end;\n  }\n}\n\n.from-s {\n  display: none;\n}\n\n.to-s {\n  display: none;\n}\n\n@media screen and (max-width: 639px) {\n  .from-m {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 640px) {\n  .to-m {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  .from-l {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .to-l {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  .from-lg {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .to-lg {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  .from-xl {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .to-xl {\n    display: none;\n  }\n}\n\n.button {\n  display: inline-block;\n  padding: .5em 1em;\n  color: #FFF;\n  background: var(--color);\n  cursor: pointer;\n  text-decoration: none;\n  line-height: inherit;\n  border-radius: .25rem;\n  transition: transform .05s;\n  border: none;\n}\n\n.button:hover {\n  background: var(--color-alt);\n}\n\n.z-back {\n  z-index: var(--z-back);\n}\n\n.z-normal {\n  z-index: var(--z-normal);\n}\n\n.z-tooltip {\n  z-index: var(--z-tooltip);\n}\n\n.z-fixed {\n  z-index: var(--z-fixed);\n}\n\n.z-modal {\n  z-index: var(--z-modal);\n}\n\n.s-border {\n  border: 1px solid var(--border-color);\n}\n\n.s-border-none {\n  border: none;\n}\n\n.s-radius {\n  border-radius: var(--border-radius);\n}\n\n.s-border-top {\n  border-top: 1px solid var(--border-color);\n}\n\n.s-border-none {\n  border-top: none;\n}\n\n.s-border-right {\n  border-right: 1px solid var(--border-color);\n}\n\n.s-border-none {\n  border-right: none;\n}\n\n.s-border-bottom {\n  border-bottom: 1px solid var(--border-color);\n}\n\n.s-border-none {\n  border-bottom: none;\n}\n\n.s-border-left {\n  border-left: 1px solid var(--border-color);\n}\n\n.s-border-none {\n  border-left: none;\n}\n\n.s-radius-tl {\n  border-top-left-radius: var(--border-radius);\n}\n\n.s-radius-tr {\n  border-top-right-radius: var(--border-radius);\n}\n\n.s-radius-bl {\n  border-bottom-left-radius: var(--border-radius);\n}\n\n.s-radius-br {\n  border-bottom-right-radius: var(--border-radius);\n}\n\n.s-radius-0 {\n  border-radius: 0;\n}\n\n.s-radius-1 {\n  border-radius: 0.5rem;\n}\n\n.s-radius-2 {\n  border-radius: 1rem;\n}\n\n.s-radius-3 {\n  border-radius: 1.5rem;\n}\n\n.s-radius-4 {\n  border-radius: 2rem;\n}\n\n.s-radius-05 {\n  border-radius: 0.25rem;\n}\n\n.s-radius-tl-0 {\n  border-top-left-radius: 0;\n}\n\n.s-radius-tl-1 {\n  border-top-left-radius: 0.5rem;\n}\n\n.s-radius-tl-2 {\n  border-top-left-radius: 1rem;\n}\n\n.s-radius-tl-3 {\n  border-top-left-radius: 1.5rem;\n}\n\n.s-radius-tl-4 {\n  border-top-left-radius: 2rem;\n}\n\n.s-radius-tl-05 {\n  border-top-left-radius: 0.25rem;\n}\n\n.s-radius-tr-0 {\n  border-top-right-radius: 0;\n}\n\n.s-radius-tr-1 {\n  border-top-right-radius: 0.5rem;\n}\n\n.s-radius-tr-2 {\n  border-top-right-radius: 1rem;\n}\n\n.s-radius-tr-3 {\n  border-top-right-radius: 1.5rem;\n}\n\n.s-radius-tr-4 {\n  border-top-right-radius: 2rem;\n}\n\n.s-radius-tr-05 {\n  border-top-right-radius: 0.25rem;\n}\n\n.s-radius-bl-0 {\n  border-bottom-left-radius: 0;\n}\n\n.s-radius-bl-1 {\n  border-bottom-left-radius: 0.5rem;\n}\n\n.s-radius-bl-2 {\n  border-bottom-left-radius: 1rem;\n}\n\n.s-radius-bl-3 {\n  border-bottom-left-radius: 1.5rem;\n}\n\n.s-radius-bl-4 {\n  border-bottom-left-radius: 2rem;\n}\n\n.s-radius-bl-05 {\n  border-bottom-left-radius: 0.25rem;\n}\n\n.s-radius-br-0 {\n  border-bottom-right-radius: 0;\n}\n\n.s-radius-br-1 {\n  border-bottom-right-radius: 0.5rem;\n}\n\n.s-radius-br-2 {\n  border-bottom-right-radius: 1rem;\n}\n\n.s-radius-br-3 {\n  border-bottom-right-radius: 1.5rem;\n}\n\n.s-radius-br-4 {\n  border-bottom-right-radius: 2rem;\n}\n\n.s-radius-br-05 {\n  border-bottom-right-radius: 0.25rem;\n}\n\n.s-radius-tl-none {\n  border-top-left-radius: 0;\n}\n\n.s-radius-tr-none {\n  border-top-right-radius: 0;\n}\n\n.s-radius-bl-none {\n  border-bottom-left-radius: 0;\n}\n\n.s-radius-br-none {\n  border-bottom-right-radius: 0;\n}\n\n.s-radius-none {\n  border-radius: none;\n}\n\n.s-bg-blue {\n  background-color: var(--color);\n}\n\n.s-bg-white {\n  background-color: #FFF;\n}\n\n.s-bg-grey {\n  background-color: var(--light-bg);\n}\n\n.s-bg-none {\n  background-color: transparent;\n}\n\n.s-ratio-1-1 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 100%;\n  position: relative;\n}\n\n.s-ratio-1-2 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 200%;\n  position: relative;\n}\n\n.s-ratio-1-3 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 300%;\n  position: relative;\n}\n\n.s-ratio-1-4 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 400%;\n  position: relative;\n}\n\n.s-ratio-2-1 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.s-ratio-2-2 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 100%;\n  position: relative;\n}\n\n.s-ratio-2-3 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 150%;\n  position: relative;\n}\n\n.s-ratio-2-4 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 200%;\n  position: relative;\n}\n\n.s-ratio-3-1 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 33.33333%;\n  position: relative;\n}\n\n.s-ratio-3-2 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 66.66667%;\n  position: relative;\n}\n\n.s-ratio-3-3 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 100%;\n  position: relative;\n}\n\n.s-ratio-3-4 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 133.33333%;\n  position: relative;\n}\n\n.s-ratio-4-1 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 25%;\n  position: relative;\n}\n\n.s-ratio-4-2 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.s-ratio-4-3 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 75%;\n  position: relative;\n}\n\n.s-ratio-4-4 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 100%;\n  position: relative;\n}\n\n.s-ratio-16-9 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 56.25%;\n  position: relative;\n}\n\n.s-ratio-9-16 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 177.77778%;\n  position: relative;\n}\n\n.s-ratio-21-9 {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 42.85714%;\n  position: relative;\n}\n\n.s-shadow {\n  box-shadow: 0 0 1rem #CCC;\n}\n\n.s-shadow-bottom {\n  box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n}\n\n.s-shadow-top {\n  box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n}\n\n.s-shadow-right {\n  box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n}\n\n.s-shadow-left {\n  box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n}\n\n.s-shadow-none {\n  box-shadow: none;\n}\n\n.s-fxn {\n  -ms-flex: none;\n      flex: none;\n}\n\n.s-fxw {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.s-fxg {\n  -ms-flex-positive: 1;\n      flex-grow: 1;\n}\n\n.s-opacity-1 {\n  opacity: 0.1;\n}\n\n.s-opacity-2 {\n  opacity: 0.2;\n}\n\n.s-opacity-3 {\n  opacity: 0.3;\n}\n\n.s-opacity-4 {\n  opacity: 0.4;\n}\n\n.s-opacity-5 {\n  opacity: 0.5;\n}\n\n.s-opacity-6 {\n  opacity: 0.6;\n}\n\n.s-opacity-7 {\n  opacity: 0.7;\n}\n\n.s-opacity-8 {\n  opacity: 0.8;\n}\n\n.s-opacity-9 {\n  opacity: 0.9;\n}\n\n.s-opacity-10 {\n  opacity: 1;\n}\n\n@media screen and (min-width: 640px) {\n  .m-border {\n    border: 1px solid var(--border-color);\n  }\n  .m-border-none {\n    border: none;\n  }\n  .m-radius {\n    border-radius: var(--border-radius);\n  }\n  .m-border-top {\n    border-top: 1px solid var(--border-color);\n  }\n  .m-border-none {\n    border-top: none;\n  }\n  .m-border-right {\n    border-right: 1px solid var(--border-color);\n  }\n  .m-border-none {\n    border-right: none;\n  }\n  .m-border-bottom {\n    border-bottom: 1px solid var(--border-color);\n  }\n  .m-border-none {\n    border-bottom: none;\n  }\n  .m-border-left {\n    border-left: 1px solid var(--border-color);\n  }\n  .m-border-none {\n    border-left: none;\n  }\n  .m-radius-tl {\n    border-top-left-radius: var(--border-radius);\n  }\n  .m-radius-tr {\n    border-top-right-radius: var(--border-radius);\n  }\n  .m-radius-bl {\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .m-radius-br {\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .m-radius-0 {\n    border-radius: 0;\n  }\n  .m-radius-1 {\n    border-radius: 0.5rem;\n  }\n  .m-radius-2 {\n    border-radius: 1rem;\n  }\n  .m-radius-3 {\n    border-radius: 1.5rem;\n  }\n  .m-radius-4 {\n    border-radius: 2rem;\n  }\n  .m-radius-05 {\n    border-radius: 0.25rem;\n  }\n  .m-radius-tl-0 {\n    border-top-left-radius: 0;\n  }\n  .m-radius-tl-1 {\n    border-top-left-radius: 0.5rem;\n  }\n  .m-radius-tl-2 {\n    border-top-left-radius: 1rem;\n  }\n  .m-radius-tl-3 {\n    border-top-left-radius: 1.5rem;\n  }\n  .m-radius-tl-4 {\n    border-top-left-radius: 2rem;\n  }\n  .m-radius-tl-05 {\n    border-top-left-radius: 0.25rem;\n  }\n  .m-radius-tr-0 {\n    border-top-right-radius: 0;\n  }\n  .m-radius-tr-1 {\n    border-top-right-radius: 0.5rem;\n  }\n  .m-radius-tr-2 {\n    border-top-right-radius: 1rem;\n  }\n  .m-radius-tr-3 {\n    border-top-right-radius: 1.5rem;\n  }\n  .m-radius-tr-4 {\n    border-top-right-radius: 2rem;\n  }\n  .m-radius-tr-05 {\n    border-top-right-radius: 0.25rem;\n  }\n  .m-radius-bl-0 {\n    border-bottom-left-radius: 0;\n  }\n  .m-radius-bl-1 {\n    border-bottom-left-radius: 0.5rem;\n  }\n  .m-radius-bl-2 {\n    border-bottom-left-radius: 1rem;\n  }\n  .m-radius-bl-3 {\n    border-bottom-left-radius: 1.5rem;\n  }\n  .m-radius-bl-4 {\n    border-bottom-left-radius: 2rem;\n  }\n  .m-radius-bl-05 {\n    border-bottom-left-radius: 0.25rem;\n  }\n  .m-radius-br-0 {\n    border-bottom-right-radius: 0;\n  }\n  .m-radius-br-1 {\n    border-bottom-right-radius: 0.5rem;\n  }\n  .m-radius-br-2 {\n    border-bottom-right-radius: 1rem;\n  }\n  .m-radius-br-3 {\n    border-bottom-right-radius: 1.5rem;\n  }\n  .m-radius-br-4 {\n    border-bottom-right-radius: 2rem;\n  }\n  .m-radius-br-05 {\n    border-bottom-right-radius: 0.25rem;\n  }\n  .m-radius-tl-none {\n    border-top-left-radius: 0;\n  }\n  .m-radius-tr-none {\n    border-top-right-radius: 0;\n  }\n  .m-radius-bl-none {\n    border-bottom-left-radius: 0;\n  }\n  .m-radius-br-none {\n    border-bottom-right-radius: 0;\n  }\n  .m-radius-none {\n    border-radius: none;\n  }\n  .m-bg-blue {\n    background-color: var(--color);\n  }\n  .m-bg-white {\n    background-color: #FFF;\n  }\n  .m-bg-grey {\n    background-color: var(--light-bg);\n  }\n  .m-bg-none {\n    background-color: transparent;\n  }\n  .m-ratio-1-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .m-ratio-1-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .m-ratio-1-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 300%;\n    position: relative;\n  }\n  .m-ratio-1-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 400%;\n    position: relative;\n  }\n  .m-ratio-2-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .m-ratio-2-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .m-ratio-2-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 150%;\n    position: relative;\n  }\n  .m-ratio-2-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .m-ratio-3-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 33.33333%;\n    position: relative;\n  }\n  .m-ratio-3-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 66.66667%;\n    position: relative;\n  }\n  .m-ratio-3-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .m-ratio-3-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 133.33333%;\n    position: relative;\n  }\n  .m-ratio-4-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 25%;\n    position: relative;\n  }\n  .m-ratio-4-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .m-ratio-4-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 75%;\n    position: relative;\n  }\n  .m-ratio-4-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .m-ratio-16-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    position: relative;\n  }\n  .m-ratio-9-16 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 177.77778%;\n    position: relative;\n  }\n  .m-ratio-21-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 42.85714%;\n    position: relative;\n  }\n  .m-shadow {\n    box-shadow: 0 0 1rem #CCC;\n  }\n  .m-shadow-bottom {\n    box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n  }\n  .m-shadow-top {\n    box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n  }\n  .m-shadow-right {\n    box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .m-shadow-left {\n    box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .m-shadow-none {\n    box-shadow: none;\n  }\n  .m-fxn {\n    -ms-flex: none;\n        flex: none;\n  }\n  .m-fxw {\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n  }\n  .m-fxg {\n    -ms-flex-positive: 1;\n        flex-grow: 1;\n  }\n  .m-opacity-1 {\n    opacity: 0.1;\n  }\n  .m-opacity-2 {\n    opacity: 0.2;\n  }\n  .m-opacity-3 {\n    opacity: 0.3;\n  }\n  .m-opacity-4 {\n    opacity: 0.4;\n  }\n  .m-opacity-5 {\n    opacity: 0.5;\n  }\n  .m-opacity-6 {\n    opacity: 0.6;\n  }\n  .m-opacity-7 {\n    opacity: 0.7;\n  }\n  .m-opacity-8 {\n    opacity: 0.8;\n  }\n  .m-opacity-9 {\n    opacity: 0.9;\n  }\n  .m-opacity-10 {\n    opacity: 1;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .l-border {\n    border: 1px solid var(--border-color);\n  }\n  .l-border-none {\n    border: none;\n  }\n  .l-radius {\n    border-radius: var(--border-radius);\n  }\n  .l-border-top {\n    border-top: 1px solid var(--border-color);\n  }\n  .l-border-none {\n    border-top: none;\n  }\n  .l-border-right {\n    border-right: 1px solid var(--border-color);\n  }\n  .l-border-none {\n    border-right: none;\n  }\n  .l-border-bottom {\n    border-bottom: 1px solid var(--border-color);\n  }\n  .l-border-none {\n    border-bottom: none;\n  }\n  .l-border-left {\n    border-left: 1px solid var(--border-color);\n  }\n  .l-border-none {\n    border-left: none;\n  }\n  .l-radius-tl {\n    border-top-left-radius: var(--border-radius);\n  }\n  .l-radius-tr {\n    border-top-right-radius: var(--border-radius);\n  }\n  .l-radius-bl {\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .l-radius-br {\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .l-radius-0 {\n    border-radius: 0;\n  }\n  .l-radius-1 {\n    border-radius: 0.5rem;\n  }\n  .l-radius-2 {\n    border-radius: 1rem;\n  }\n  .l-radius-3 {\n    border-radius: 1.5rem;\n  }\n  .l-radius-4 {\n    border-radius: 2rem;\n  }\n  .l-radius-05 {\n    border-radius: 0.25rem;\n  }\n  .l-radius-tl-0 {\n    border-top-left-radius: 0;\n  }\n  .l-radius-tl-1 {\n    border-top-left-radius: 0.5rem;\n  }\n  .l-radius-tl-2 {\n    border-top-left-radius: 1rem;\n  }\n  .l-radius-tl-3 {\n    border-top-left-radius: 1.5rem;\n  }\n  .l-radius-tl-4 {\n    border-top-left-radius: 2rem;\n  }\n  .l-radius-tl-05 {\n    border-top-left-radius: 0.25rem;\n  }\n  .l-radius-tr-0 {\n    border-top-right-radius: 0;\n  }\n  .l-radius-tr-1 {\n    border-top-right-radius: 0.5rem;\n  }\n  .l-radius-tr-2 {\n    border-top-right-radius: 1rem;\n  }\n  .l-radius-tr-3 {\n    border-top-right-radius: 1.5rem;\n  }\n  .l-radius-tr-4 {\n    border-top-right-radius: 2rem;\n  }\n  .l-radius-tr-05 {\n    border-top-right-radius: 0.25rem;\n  }\n  .l-radius-bl-0 {\n    border-bottom-left-radius: 0;\n  }\n  .l-radius-bl-1 {\n    border-bottom-left-radius: 0.5rem;\n  }\n  .l-radius-bl-2 {\n    border-bottom-left-radius: 1rem;\n  }\n  .l-radius-bl-3 {\n    border-bottom-left-radius: 1.5rem;\n  }\n  .l-radius-bl-4 {\n    border-bottom-left-radius: 2rem;\n  }\n  .l-radius-bl-05 {\n    border-bottom-left-radius: 0.25rem;\n  }\n  .l-radius-br-0 {\n    border-bottom-right-radius: 0;\n  }\n  .l-radius-br-1 {\n    border-bottom-right-radius: 0.5rem;\n  }\n  .l-radius-br-2 {\n    border-bottom-right-radius: 1rem;\n  }\n  .l-radius-br-3 {\n    border-bottom-right-radius: 1.5rem;\n  }\n  .l-radius-br-4 {\n    border-bottom-right-radius: 2rem;\n  }\n  .l-radius-br-05 {\n    border-bottom-right-radius: 0.25rem;\n  }\n  .l-radius-tl-none {\n    border-top-left-radius: 0;\n  }\n  .l-radius-tr-none {\n    border-top-right-radius: 0;\n  }\n  .l-radius-bl-none {\n    border-bottom-left-radius: 0;\n  }\n  .l-radius-br-none {\n    border-bottom-right-radius: 0;\n  }\n  .l-radius-none {\n    border-radius: none;\n  }\n  .l-bg-blue {\n    background-color: var(--color);\n  }\n  .l-bg-white {\n    background-color: #FFF;\n  }\n  .l-bg-grey {\n    background-color: var(--light-bg);\n  }\n  .l-bg-none {\n    background-color: transparent;\n  }\n  .l-ratio-1-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .l-ratio-1-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .l-ratio-1-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 300%;\n    position: relative;\n  }\n  .l-ratio-1-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 400%;\n    position: relative;\n  }\n  .l-ratio-2-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .l-ratio-2-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .l-ratio-2-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 150%;\n    position: relative;\n  }\n  .l-ratio-2-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .l-ratio-3-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 33.33333%;\n    position: relative;\n  }\n  .l-ratio-3-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 66.66667%;\n    position: relative;\n  }\n  .l-ratio-3-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .l-ratio-3-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 133.33333%;\n    position: relative;\n  }\n  .l-ratio-4-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 25%;\n    position: relative;\n  }\n  .l-ratio-4-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .l-ratio-4-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 75%;\n    position: relative;\n  }\n  .l-ratio-4-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .l-ratio-16-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    position: relative;\n  }\n  .l-ratio-9-16 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 177.77778%;\n    position: relative;\n  }\n  .l-ratio-21-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 42.85714%;\n    position: relative;\n  }\n  .l-shadow {\n    box-shadow: 0 0 1rem #CCC;\n  }\n  .l-shadow-bottom {\n    box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n  }\n  .l-shadow-top {\n    box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n  }\n  .l-shadow-right {\n    box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .l-shadow-left {\n    box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .l-shadow-none {\n    box-shadow: none;\n  }\n  .l-fxn {\n    -ms-flex: none;\n        flex: none;\n  }\n  .l-fxw {\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n  }\n  .l-fxg {\n    -ms-flex-positive: 1;\n        flex-grow: 1;\n  }\n  .l-opacity-1 {\n    opacity: 0.1;\n  }\n  .l-opacity-2 {\n    opacity: 0.2;\n  }\n  .l-opacity-3 {\n    opacity: 0.3;\n  }\n  .l-opacity-4 {\n    opacity: 0.4;\n  }\n  .l-opacity-5 {\n    opacity: 0.5;\n  }\n  .l-opacity-6 {\n    opacity: 0.6;\n  }\n  .l-opacity-7 {\n    opacity: 0.7;\n  }\n  .l-opacity-8 {\n    opacity: 0.8;\n  }\n  .l-opacity-9 {\n    opacity: 0.9;\n  }\n  .l-opacity-10 {\n    opacity: 1;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-border {\n    border: 1px solid var(--border-color);\n  }\n  .lg-border-none {\n    border: none;\n  }\n  .lg-radius {\n    border-radius: var(--border-radius);\n  }\n  .lg-border-top {\n    border-top: 1px solid var(--border-color);\n  }\n  .lg-border-none {\n    border-top: none;\n  }\n  .lg-border-right {\n    border-right: 1px solid var(--border-color);\n  }\n  .lg-border-none {\n    border-right: none;\n  }\n  .lg-border-bottom {\n    border-bottom: 1px solid var(--border-color);\n  }\n  .lg-border-none {\n    border-bottom: none;\n  }\n  .lg-border-left {\n    border-left: 1px solid var(--border-color);\n  }\n  .lg-border-none {\n    border-left: none;\n  }\n  .lg-radius-tl {\n    border-top-left-radius: var(--border-radius);\n  }\n  .lg-radius-tr {\n    border-top-right-radius: var(--border-radius);\n  }\n  .lg-radius-bl {\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .lg-radius-br {\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .lg-radius-0 {\n    border-radius: 0;\n  }\n  .lg-radius-1 {\n    border-radius: 0.5rem;\n  }\n  .lg-radius-2 {\n    border-radius: 1rem;\n  }\n  .lg-radius-3 {\n    border-radius: 1.5rem;\n  }\n  .lg-radius-4 {\n    border-radius: 2rem;\n  }\n  .lg-radius-05 {\n    border-radius: 0.25rem;\n  }\n  .lg-radius-tl-0 {\n    border-top-left-radius: 0;\n  }\n  .lg-radius-tl-1 {\n    border-top-left-radius: 0.5rem;\n  }\n  .lg-radius-tl-2 {\n    border-top-left-radius: 1rem;\n  }\n  .lg-radius-tl-3 {\n    border-top-left-radius: 1.5rem;\n  }\n  .lg-radius-tl-4 {\n    border-top-left-radius: 2rem;\n  }\n  .lg-radius-tl-05 {\n    border-top-left-radius: 0.25rem;\n  }\n  .lg-radius-tr-0 {\n    border-top-right-radius: 0;\n  }\n  .lg-radius-tr-1 {\n    border-top-right-radius: 0.5rem;\n  }\n  .lg-radius-tr-2 {\n    border-top-right-radius: 1rem;\n  }\n  .lg-radius-tr-3 {\n    border-top-right-radius: 1.5rem;\n  }\n  .lg-radius-tr-4 {\n    border-top-right-radius: 2rem;\n  }\n  .lg-radius-tr-05 {\n    border-top-right-radius: 0.25rem;\n  }\n  .lg-radius-bl-0 {\n    border-bottom-left-radius: 0;\n  }\n  .lg-radius-bl-1 {\n    border-bottom-left-radius: 0.5rem;\n  }\n  .lg-radius-bl-2 {\n    border-bottom-left-radius: 1rem;\n  }\n  .lg-radius-bl-3 {\n    border-bottom-left-radius: 1.5rem;\n  }\n  .lg-radius-bl-4 {\n    border-bottom-left-radius: 2rem;\n  }\n  .lg-radius-bl-05 {\n    border-bottom-left-radius: 0.25rem;\n  }\n  .lg-radius-br-0 {\n    border-bottom-right-radius: 0;\n  }\n  .lg-radius-br-1 {\n    border-bottom-right-radius: 0.5rem;\n  }\n  .lg-radius-br-2 {\n    border-bottom-right-radius: 1rem;\n  }\n  .lg-radius-br-3 {\n    border-bottom-right-radius: 1.5rem;\n  }\n  .lg-radius-br-4 {\n    border-bottom-right-radius: 2rem;\n  }\n  .lg-radius-br-05 {\n    border-bottom-right-radius: 0.25rem;\n  }\n  .lg-radius-tl-none {\n    border-top-left-radius: 0;\n  }\n  .lg-radius-tr-none {\n    border-top-right-radius: 0;\n  }\n  .lg-radius-bl-none {\n    border-bottom-left-radius: 0;\n  }\n  .lg-radius-br-none {\n    border-bottom-right-radius: 0;\n  }\n  .lg-radius-none {\n    border-radius: none;\n  }\n  .lg-bg-blue {\n    background-color: var(--color);\n  }\n  .lg-bg-white {\n    background-color: #FFF;\n  }\n  .lg-bg-grey {\n    background-color: var(--light-bg);\n  }\n  .lg-bg-none {\n    background-color: transparent;\n  }\n  .lg-ratio-1-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .lg-ratio-1-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .lg-ratio-1-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 300%;\n    position: relative;\n  }\n  .lg-ratio-1-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 400%;\n    position: relative;\n  }\n  .lg-ratio-2-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .lg-ratio-2-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .lg-ratio-2-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 150%;\n    position: relative;\n  }\n  .lg-ratio-2-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .lg-ratio-3-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 33.33333%;\n    position: relative;\n  }\n  .lg-ratio-3-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 66.66667%;\n    position: relative;\n  }\n  .lg-ratio-3-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .lg-ratio-3-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 133.33333%;\n    position: relative;\n  }\n  .lg-ratio-4-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 25%;\n    position: relative;\n  }\n  .lg-ratio-4-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .lg-ratio-4-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 75%;\n    position: relative;\n  }\n  .lg-ratio-4-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .lg-ratio-16-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    position: relative;\n  }\n  .lg-ratio-9-16 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 177.77778%;\n    position: relative;\n  }\n  .lg-ratio-21-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 42.85714%;\n    position: relative;\n  }\n  .lg-shadow {\n    box-shadow: 0 0 1rem #CCC;\n  }\n  .lg-shadow-bottom {\n    box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n  }\n  .lg-shadow-top {\n    box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n  }\n  .lg-shadow-right {\n    box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .lg-shadow-left {\n    box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .lg-shadow-none {\n    box-shadow: none;\n  }\n  .lg-fxn {\n    -ms-flex: none;\n        flex: none;\n  }\n  .lg-fxw {\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n  }\n  .lg-fxg {\n    -ms-flex-positive: 1;\n        flex-grow: 1;\n  }\n  .lg-opacity-1 {\n    opacity: 0.1;\n  }\n  .lg-opacity-2 {\n    opacity: 0.2;\n  }\n  .lg-opacity-3 {\n    opacity: 0.3;\n  }\n  .lg-opacity-4 {\n    opacity: 0.4;\n  }\n  .lg-opacity-5 {\n    opacity: 0.5;\n  }\n  .lg-opacity-6 {\n    opacity: 0.6;\n  }\n  .lg-opacity-7 {\n    opacity: 0.7;\n  }\n  .lg-opacity-8 {\n    opacity: 0.8;\n  }\n  .lg-opacity-9 {\n    opacity: 0.9;\n  }\n  .lg-opacity-10 {\n    opacity: 1;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-border {\n    border: 1px solid var(--border-color);\n  }\n  .xl-border-none {\n    border: none;\n  }\n  .xl-radius {\n    border-radius: var(--border-radius);\n  }\n  .xl-border-top {\n    border-top: 1px solid var(--border-color);\n  }\n  .xl-border-none {\n    border-top: none;\n  }\n  .xl-border-right {\n    border-right: 1px solid var(--border-color);\n  }\n  .xl-border-none {\n    border-right: none;\n  }\n  .xl-border-bottom {\n    border-bottom: 1px solid var(--border-color);\n  }\n  .xl-border-none {\n    border-bottom: none;\n  }\n  .xl-border-left {\n    border-left: 1px solid var(--border-color);\n  }\n  .xl-border-none {\n    border-left: none;\n  }\n  .xl-radius-tl {\n    border-top-left-radius: var(--border-radius);\n  }\n  .xl-radius-tr {\n    border-top-right-radius: var(--border-radius);\n  }\n  .xl-radius-bl {\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .xl-radius-br {\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .xl-radius-0 {\n    border-radius: 0;\n  }\n  .xl-radius-1 {\n    border-radius: 0.5rem;\n  }\n  .xl-radius-2 {\n    border-radius: 1rem;\n  }\n  .xl-radius-3 {\n    border-radius: 1.5rem;\n  }\n  .xl-radius-4 {\n    border-radius: 2rem;\n  }\n  .xl-radius-05 {\n    border-radius: 0.25rem;\n  }\n  .xl-radius-tl-0 {\n    border-top-left-radius: 0;\n  }\n  .xl-radius-tl-1 {\n    border-top-left-radius: 0.5rem;\n  }\n  .xl-radius-tl-2 {\n    border-top-left-radius: 1rem;\n  }\n  .xl-radius-tl-3 {\n    border-top-left-radius: 1.5rem;\n  }\n  .xl-radius-tl-4 {\n    border-top-left-radius: 2rem;\n  }\n  .xl-radius-tl-05 {\n    border-top-left-radius: 0.25rem;\n  }\n  .xl-radius-tr-0 {\n    border-top-right-radius: 0;\n  }\n  .xl-radius-tr-1 {\n    border-top-right-radius: 0.5rem;\n  }\n  .xl-radius-tr-2 {\n    border-top-right-radius: 1rem;\n  }\n  .xl-radius-tr-3 {\n    border-top-right-radius: 1.5rem;\n  }\n  .xl-radius-tr-4 {\n    border-top-right-radius: 2rem;\n  }\n  .xl-radius-tr-05 {\n    border-top-right-radius: 0.25rem;\n  }\n  .xl-radius-bl-0 {\n    border-bottom-left-radius: 0;\n  }\n  .xl-radius-bl-1 {\n    border-bottom-left-radius: 0.5rem;\n  }\n  .xl-radius-bl-2 {\n    border-bottom-left-radius: 1rem;\n  }\n  .xl-radius-bl-3 {\n    border-bottom-left-radius: 1.5rem;\n  }\n  .xl-radius-bl-4 {\n    border-bottom-left-radius: 2rem;\n  }\n  .xl-radius-bl-05 {\n    border-bottom-left-radius: 0.25rem;\n  }\n  .xl-radius-br-0 {\n    border-bottom-right-radius: 0;\n  }\n  .xl-radius-br-1 {\n    border-bottom-right-radius: 0.5rem;\n  }\n  .xl-radius-br-2 {\n    border-bottom-right-radius: 1rem;\n  }\n  .xl-radius-br-3 {\n    border-bottom-right-radius: 1.5rem;\n  }\n  .xl-radius-br-4 {\n    border-bottom-right-radius: 2rem;\n  }\n  .xl-radius-br-05 {\n    border-bottom-right-radius: 0.25rem;\n  }\n  .xl-radius-tl-none {\n    border-top-left-radius: 0;\n  }\n  .xl-radius-tr-none {\n    border-top-right-radius: 0;\n  }\n  .xl-radius-bl-none {\n    border-bottom-left-radius: 0;\n  }\n  .xl-radius-br-none {\n    border-bottom-right-radius: 0;\n  }\n  .xl-radius-none {\n    border-radius: none;\n  }\n  .xl-bg-blue {\n    background-color: var(--color);\n  }\n  .xl-bg-white {\n    background-color: #FFF;\n  }\n  .xl-bg-grey {\n    background-color: var(--light-bg);\n  }\n  .xl-bg-none {\n    background-color: transparent;\n  }\n  .xl-ratio-1-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .xl-ratio-1-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .xl-ratio-1-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 300%;\n    position: relative;\n  }\n  .xl-ratio-1-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 400%;\n    position: relative;\n  }\n  .xl-ratio-2-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .xl-ratio-2-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .xl-ratio-2-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 150%;\n    position: relative;\n  }\n  .xl-ratio-2-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 200%;\n    position: relative;\n  }\n  .xl-ratio-3-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 33.33333%;\n    position: relative;\n  }\n  .xl-ratio-3-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 66.66667%;\n    position: relative;\n  }\n  .xl-ratio-3-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .xl-ratio-3-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 133.33333%;\n    position: relative;\n  }\n  .xl-ratio-4-1 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 25%;\n    position: relative;\n  }\n  .xl-ratio-4-2 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 50%;\n    position: relative;\n  }\n  .xl-ratio-4-3 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 75%;\n    position: relative;\n  }\n  .xl-ratio-4-4 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 100%;\n    position: relative;\n  }\n  .xl-ratio-16-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    position: relative;\n  }\n  .xl-ratio-9-16 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 177.77778%;\n    position: relative;\n  }\n  .xl-ratio-21-9 {\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 42.85714%;\n    position: relative;\n  }\n  .xl-shadow {\n    box-shadow: 0 0 1rem #CCC;\n  }\n  .xl-shadow-bottom {\n    box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n  }\n  .xl-shadow-top {\n    box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n  }\n  .xl-shadow-right {\n    box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .xl-shadow-left {\n    box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n  }\n  .xl-shadow-none {\n    box-shadow: none;\n  }\n  .xl-fxn {\n    -ms-flex: none;\n        flex: none;\n  }\n  .xl-fxw {\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n  }\n  .xl-fxg {\n    -ms-flex-positive: 1;\n        flex-grow: 1;\n  }\n  .xl-opacity-1 {\n    opacity: 0.1;\n  }\n  .xl-opacity-2 {\n    opacity: 0.2;\n  }\n  .xl-opacity-3 {\n    opacity: 0.3;\n  }\n  .xl-opacity-4 {\n    opacity: 0.4;\n  }\n  .xl-opacity-5 {\n    opacity: 0.5;\n  }\n  .xl-opacity-6 {\n    opacity: 0.6;\n  }\n  .xl-opacity-7 {\n    opacity: 0.7;\n  }\n  .xl-opacity-8 {\n    opacity: 0.8;\n  }\n  .xl-opacity-9 {\n    opacity: 0.9;\n  }\n  .xl-opacity-10 {\n    opacity: 1;\n  }\n}\n\n.circle,\n.square {\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 100%;\n  position: relative;\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.img-container {\n  position: relative;\n}\n\n.img-container img {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.ed-video {\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 56.25%;\n  position: relative;\n}\n\n.ed-video > iframe,\n.ed-video > video,\n.ed-video > .video {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n/*\n| Mixin para crear cuadriculas\n|\n| $gridItemSelector: nombre del selector CSS de cada item de la cuadricula\n| $listColumns:\n|              * lista de numeros de columnas en cada breakpoint (separados por espacios). Ej: 1 2 3 4\n|              * el numero de columnas del ultimo breakpoint se hereda a breakpoints superiores\n| $gutter: separación entre cada item de la cuadricula (opcional)\n|\n*/\n/* Mixins de alineacion con compatibilidad hacia atras*/\n:root {\n  --color: #007BDF;\n  --color-alt: #006DC6;\n  --border-color: #DFE0E0;\n  --light-bg: #F0F0F0;\n  --border-radius: 0.25rem;\n  --vertical-block-space: 1rem;\n  --vertical-content-space: 1rem;\n  --gap: 1rem;\n  --max-width: 1200px;\n}\n\n@media screen and (min-width: 1024px) {\n  :root {\n    --vertical-block-space: 2rem;\n    --gap: 2rem;\n  }\n}\n"
  },
  {
    "path": "src/data/casos-de-exito.json",
    "content": "{\n  \"casos\": [\n    {\n      \"img\": \"/assets/img/ed-team-web.jpg\",\n      \"title\": \"EDteam\",\n      \"subtitle\": \"Web oficial de EDteam\",\n      \"description\": \"Plataforma dedicada a la enseñanza de programación, diseño web y todo lo referente al mundo de desarrollo web.\",\n      \"url\": \"https://ed.team/\",\n      \"user\": \"no\",\n      \"imageUser\": \"\",\n      \"linkUser\": \"\"\n    },\n    {\n      \"img\": \"/assets/img/la-canasta.jpg\",\n      \"title\": \"Las Canastas\",\n      \"subtitle\": \"Restaurant\",\n      \"description\": \"Restaurant de parrilldas y pollos ubicada en Perú con diversas sucursales al rededor de todo el país.\",\n      \"url\": \"https://lascanastas.com/\",\n      \"user\": \"Jose Álvarado\",\n      \"imageUser\": \"/assets/img/jose-alvarado.png\",\n      \"linkUser\": \"https://twitter.com/josealvaradoo\"\n    },\n    {\n      \"img\": \"/assets/img/caexco.jpg\",\n      \"title\": \"Caexco\",\n      \"subtitle\": \"Tienda en línea\",\n      \"description\": \"Empresa dedicada a la comercialización de equipo agrícola, repuestos y accesorios. \",\n      \"url\": \"http://www.caexcobolivia.com/\",\n      \"user\": \"Beto Quiroga\",\n      \"imageUser\": \"/assets/img/beto-quiroga.jpg\",\n      \"linkUser\": \"https://www.facebook.com/diterterrones\"\n    },\n    {\n      \"img\": \"/assets/img/importmecardo.jpg\",\n      \"title\": \"Importmercado\",\n      \"subtitle\": \"Venta de maquinaría metalmecánica\",\n      \"description\": \"Empresa dedicada a la importación y comercialización de maquinaria metalmecánica y accesorios.\",\n      \"url\": \"http://importmercado.com/\",\n      \"user\": \"Beto Quiroga\",\n      \"imageUser\": \"/assets/img/beto-quiroga.jpg\",\n      \"linkUser\": \"https://www.facebook.com/diterterrones\"\n    },\n    {\n      \"img\": \"/assets/img/capilla-cocha.jpg\",\n      \"title\": \"Capilla de Cochabamba\",\n      \"subtitle\": \"Centro educativo cristiano bilingüe\",\n      \"description\": \"Unidad Educativa fundamentada en sólidos principios bíblicos con una alta calidad en la formación académica bilingüe.\",\n      \"url\": \"http://colegiocapillacbba.edu.bo/\",\n      \"user\": \"Beto Quiroga\",\n      \"imageUser\": \"/assets/img/beto-quiroga.jpg\",\n      \"linkUser\": \"https://www.facebook.com/diterterrones\"\n    },\n    {\n      \"img\": \"/assets/img/aremisse.jpg\",\n      \"title\": \"Aremisse Lima\",\n      \"subtitle\": \"Transporte corporativo, turístico y personal\",\n      \"description\": \"Empresa peruana dedicada al transporte de personal, transporte ejecutivo o corporativo y transporte turístico.\",\n      \"url\": \"https://aremisse.com/\",\n      \"user\": \"Diter Terrones\",\n      \"imageUser\": \"/assets/img/diter-terrones.jpeg\",\n      \"linkUser\": \"https://www.facebook.com/diterterrones\"\n    },\n    {\n      \"img\": \"/assets/img/wizardgva-web.png\",\n      \"title\": \"Wizardgva\",\n      \"subtitle\": \"Agencia de soluciones TI\",\n      \"description\": \"Wizardgva nace del sueño de un joven por brindar soluciones de hardware rápidas y accesibles\",\n      \"url\": \"https://wizardgva.com/\",\n      \"user\": \"Danny Restrepo\",\n      \"imageUser\": \"/assets/img/wizardgva-user.png\",\n      \"linkUser\": \"https://www.linkedin.com/in/restrepodanny/\"\n    },\n    {\n      \"img\": \"/assets/img/alkila-web.png\",\n      \"title\": \"Alkila\",\n      \"subtitle\": \"Empresa de reta de autos\",\n      \"description\": \"Alkila es una empresa Peruana dedicada al rubro de alquiler de vehículos.\",\n      \"url\": \"http://alkilarentacar.com\",\n      \"user\": \"Edwing Romero\",\n      \"imageUser\": \"/assets/img/alkila-user.png\",\n      \"linkUser\": \"https://www.linkedin.com/in/edwingromero/\"\n    },\n    {\n      \"img\": \"/assets/img/gema-web.png\",\n      \"title\": \"Agencia Gema\",\n      \"subtitle\": \"Agencia de eventos\",\n      \"description\": \"En Gema, son especialistas en el servicio de banquetes y renta de equipo para todo tipo de eventos\",\n      \"url\": \"http://agenciagema.com/\",\n      \"user\": \"no\",\n      \"imageUser\": \"\",\n      \"linkUser\": \"\"\n    },\n    {\n      \"img\": \"/assets/img/robert-web.png\",\n      \"title\": \"Portafolio - Robert\",\n      \"subtitle\": \"Portafolio\",\n      \"description\": \"Esta web es el portfolio de Robert Huamán Cáceres, estudiante en Ingeniería informática y sistemas de la Universidad Nacional Micaela Bastidas de Apurímac - Perú\",\n      \"url\": \"https://pepobj.github.io/dist/\",\n      \"user\": \"Robert BJ Huamán\",\n      \"imageUser\": \"/assets/img/robert-user.png\",\n      \"linkUser\": \"https://www.linkedin.com/in/robert-bj-huaman/\"\n    },\n    {\n      \"img\": \"/assets/img/militaria-web.png\",\n      \"title\": \"Militaria\",\n      \"subtitle\": \"Empresa\",\n      \"description\": \"Empresa peruana dedicada a la exportación de indumentaria y accesorios para uso militar.\",\n      \"url\": \"http://militaria.com.pe/\",\n      \"user\": \"Edwing Romero\",\n      \"imageUser\": \"/assets/img/alkila-user.png\",\n      \"linkUser\": \"https://www.linkedin.com/in/robert-bj-huaman/\"\n    }\n  ]\n}\n"
  },
  {
    "path": "src/js/index.js",
    "content": "// import menu from './modules/menu'\n// import migrate from './modules/migrate'\n//\n// export default { menu, migrate }\n\nimport activeMenu from './modules/activeMenu'\nimport openMenu from './modules/menu'\nimport { getScrollBarWidth } from './modules/scrollBarWIdth'\n\nactiveMenu('main-menu')\nactiveMenu('vertical-menu')\nopenMenu('main-menu','main-menu-toggle')\nopenMenu('vertical-menu','vertical-menu-toggle')\n\n\n/* PrismJS 1.9.0\nhttp://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+scss&plugins=toolbar+show-language */\nvar _self = 'undefined' != typeof window ? window : 'undefined' != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope ? self : {},\n  Prism = function () {\n    var e = /\\blang(?:uage)?-(\\w+)\\b/i, t = 0, n = _self.Prism = {\n      manual: _self.Prism && _self.Prism.manual,\n      disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,\n      util: {\n        encode: function (e) {\n          return e instanceof r ? new r(e.type, n.util.encode(e.content), e.alias) : 'Array' === n.util.type(e) ? e.map(n.util.encode) : e.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\\u00a0/g, ' ')\n        }, type: function (e) {\n          return Object.prototype.toString.call(e).match(/\\[object (\\w+)\\]/)[1]\n        }, objId: function (e) {\n          return e.__id || Object.defineProperty(e, '__id', {value: ++t}), e.__id\n        }, clone: function (e) {\n          var t = n.util.type(e)\n          switch (t) {\n            case'Object':\n              var r = {}\n              for (var a in e) e.hasOwnProperty(a) && (r[a] = n.util.clone(e[a]))\n              return r\n            case'Array':\n              return e.map(function (e) {\n                return n.util.clone(e)\n              })\n          }\n          return e\n        }\n      },\n      languages: {\n        extend: function (e, t) {\n          var r = n.util.clone(n.languages[e])\n          for (var a in t) r[a] = t[a]\n          return r\n        }, insertBefore: function (e, t, r, a) {\n          a = a || n.languages\n          var l = a[e]\n          if (2 == arguments.length) {\n            r = arguments[1]\n            for (var i in r) r.hasOwnProperty(i) && (l[i] = r[i])\n            return l\n          }\n          var o = {}\n          for (var s in l) if (l.hasOwnProperty(s)) {\n            if (s == t) for (var i in r) r.hasOwnProperty(i) && (o[i] = r[i])\n            o[s] = l[s]\n          }\n          return n.languages.DFS(n.languages, function (t, n) {\n            n === a[e] && t != e && (this[t] = o)\n          }), a[e] = o\n        }, DFS: function (e, t, r, a) {\n          a = a || {}\n          for (var l in e) e.hasOwnProperty(l) && (t.call(e, l, e[l], r || l), 'Object' !== n.util.type(e[l]) || a[n.util.objId(e[l])] ? 'Array' !== n.util.type(e[l]) || a[n.util.objId(e[l])] || (a[n.util.objId(e[l])] = !0, n.languages.DFS(e[l], t, l, a)) : (a[n.util.objId(e[l])] = !0, n.languages.DFS(e[l], t, null, a)))\n        }\n      },\n      plugins: {},\n      highlightAll: function (e, t) {\n        n.highlightAllUnder(document, e, t)\n      },\n      highlightAllUnder: function (e, t, r) {\n        var a = {\n          callback: r,\n          selector: 'code[class*=\"language-\"], [class*=\"language-\"] code, code[class*=\"lang-\"], [class*=\"lang-\"] code'\n        }\n        n.hooks.run('before-highlightall', a)\n        for (var l, i = a.elements || e.querySelectorAll(a.selector), o = 0; l = i[o++];) n.highlightElement(l, t === !0, a.callback)\n      },\n      highlightElement: function (t, r, a) {\n        for (var l, i, o = t; o && !e.test(o.className);) o = o.parentNode\n        o && (l = (o.className.match(e) || [, ''])[1].toLowerCase(), i = n.languages[l]), t.className = t.className.replace(e, '').replace(/\\s+/g, ' ') + ' language-' + l, t.parentNode && (o = t.parentNode, /pre/i.test(o.nodeName) && (o.className = o.className.replace(e, '').replace(/\\s+/g, ' ') + ' language-' + l))\n        var s = t.textContent,\n          g = {element: t, language: l, grammar: i, code: s}\n        if (n.hooks.run('before-sanity-check', g), !g.code || !g.grammar) return g.code && (n.hooks.run('before-highlight', g), g.element.textContent = g.code, n.hooks.run('after-highlight', g)), n.hooks.run('complete', g), void 0\n        if (n.hooks.run('before-highlight', g), r && _self.Worker) {\n          var u = new Worker(n.filename)\n          u.onmessage = function (e) {\n            g.highlightedCode = e.data, n.hooks.run('before-insert', g), g.element.innerHTML = g.highlightedCode, a && a.call(g.element), n.hooks.run('after-highlight', g), n.hooks.run('complete', g)\n          }, u.postMessage(JSON.stringify({\n            language: g.language,\n            code: g.code,\n            immediateClose: !0\n          }))\n        } else g.highlightedCode = n.highlight(g.code, g.grammar, g.language), n.hooks.run('before-insert', g), g.element.innerHTML = g.highlightedCode, a && a.call(t), n.hooks.run('after-highlight', g), n.hooks.run('complete', g)\n      },\n      highlight: function (e, t, a) {\n        var l = n.tokenize(e, t)\n        return r.stringify(n.util.encode(l), a)\n      },\n      matchGrammar: function (e, t, r, a, l, i, o) {\n        var s = n.Token\n        for (var g in r) if (r.hasOwnProperty(g) && r[g]) {\n          if (g == o) return\n          var u = r[g]\n          u = 'Array' === n.util.type(u) ? u : [u]\n          for (var c = 0; c < u.length; ++c) {\n            var h = u[c], f = h.inside, d = !!h.lookbehind, m = !!h.greedy,\n              p = 0, y = h.alias\n            if (m && !h.pattern.global) {\n              var v = h.pattern.toString().match(/[imuy]*$/)[0]\n              h.pattern = RegExp(h.pattern.source, v + 'g')\n            }\n            h = h.pattern || h\n            for (var b = a, k = l; b < t.length; k += t[b].length, ++b) {\n              var w = t[b]\n              if (t.length > e.length) return\n              if (!(w instanceof s)) {\n                h.lastIndex = 0\n                var _ = h.exec(w), P = 1\n                if (!_ && m && b != t.length - 1) {\n                  if (h.lastIndex = k, _ = h.exec(e), !_) break\n                  for (var A = _.index + (d ? _[1].length : 0), j = _.index + _[0].length, x = b, O = k, N = t.length; N > x && (j > O || !t[x].type && !t[x - 1].greedy); ++x) O += t[x].length, A >= O && (++b, k = O)\n                  if (t[b] instanceof s || t[x - 1].greedy) continue\n                  P = x - b, w = e.slice(k, O), _.index -= k\n                }\n                if (_) {\n                  d && (p = _[1].length)\n                  var A = _.index + p, _ = _[0].slice(p), j = A + _.length,\n                    S = w.slice(0, A), C = w.slice(j), M = [b, P]\n                  S && (++b, k += S.length, M.push(S))\n                  var E = new s(g, f ? n.tokenize(_, f) : _, y, _, m)\n                  if (M.push(E), C && M.push(C), Array.prototype.splice.apply(t, M), 1 != P && n.matchGrammar(e, t, r, b, k, !0, g), i) break\n                } else if (i) break\n              }\n            }\n          }\n        }\n      },\n      tokenize: function (e, t) {\n        var r = [e], a = t.rest\n        if (a) {\n          for (var l in a) t[l] = a[l]\n          delete t.rest\n        }\n        return n.matchGrammar(e, r, t, 0, 0, !1), r\n      },\n      hooks: {\n        all: {}, add: function (e, t) {\n          var r = n.hooks.all\n          r[e] = r[e] || [], r[e].push(t)\n        }, run: function (e, t) {\n          var r = n.hooks.all[e]\n          if (r && r.length) for (var a, l = 0; a = r[l++];) a(t)\n        }\n      }\n    }, r = n.Token = function (e, t, n, r, a) {\n      this.type = e, this.content = t, this.alias = n, this.length = 0 | (r || '').length, this.greedy = !!a\n    }\n    if (r.stringify = function (e, t, a) {\n      if ('string' == typeof e) return e\n      if ('Array' === n.util.type(e)) return e.map(function (n) {\n        return r.stringify(n, t, e)\n      }).join('')\n      var l = {\n        type: e.type,\n        content: r.stringify(e.content, t, a),\n        tag: 'span',\n        classes: ['token', e.type],\n        attributes: {},\n        language: t,\n        parent: a\n      }\n      if (e.alias) {\n        var i = 'Array' === n.util.type(e.alias) ? e.alias : [e.alias]\n        Array.prototype.push.apply(l.classes, i)\n      }\n      n.hooks.run('wrap', l)\n      var o = Object.keys(l.attributes).map(function (e) {\n        return e + '=\"' + (l.attributes[e] || '').replace(/\"/g, '&quot;') + '\"'\n      }).join(' ')\n      return '<' + l.tag + ' class=\"' + l.classes.join(' ') + '\"' + (o ? ' ' + o : '') + '>' + l.content + '</' + l.tag + '>'\n    }, !_self.document) return _self.addEventListener ? (n.disableWorkerMessageHandler || _self.addEventListener('message', function (e) {\n      var t = JSON.parse(e.data), r = t.language, a = t.code,\n        l = t.immediateClose\n      _self.postMessage(n.highlight(a, n.languages[r], r)), l && _self.close()\n    }, !1), _self.Prism) : _self.Prism\n    var a = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()\n    return a && (n.filename = a.src, n.manual || a.hasAttribute('data-manual') || ('loading' !== document.readyState ? window.requestAnimationFrame ? window.requestAnimationFrame(n.highlightAll) : window.setTimeout(n.highlightAll, 16) : document.addEventListener('DOMContentLoaded', n.highlightAll))), _self.Prism\n  }()\n'undefined' != typeof module && module.exports && (module.exports = Prism), 'undefined' != typeof global && (global.Prism = Prism)\nPrism.languages.markup = {\n  comment: /<!--[\\s\\S]*?-->/,\n  prolog: /<\\?[\\s\\S]+?\\?>/,\n  doctype: /<!DOCTYPE[\\s\\S]+?>/i,\n  cdata: /<!\\[CDATA\\[[\\s\\S]*?]]>/i,\n  tag: {\n    pattern: /<\\/?(?!\\d)[^\\s>\\/=$<]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,\n    inside: {\n      tag: {\n        pattern: /^<\\/?[^\\s>\\/]+/i,\n        inside: {punctuation: /^<\\/?/, namespace: /^[^\\s>\\/:]+:/}\n      },\n      'attr-value': {\n        pattern: /=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+)/i,\n        inside: {\n          punctuation: [/^=/, {\n            pattern: /(^|[^\\\\])[\"']/,\n            lookbehind: !0\n          }]\n        }\n      },\n      punctuation: /\\/?>/,\n      'attr-name': {pattern: /[^\\s>\\/]+/, inside: {namespace: /^[^\\s>\\/:]+:/}}\n    }\n  },\n  entity: /&#?[\\da-z]{1,8};/i\n}, Prism.languages.markup.tag.inside['attr-value'].inside.entity = Prism.languages.markup.entity, Prism.hooks.add('wrap', function (a) {\n  'entity' === a.type && (a.attributes.title = a.content.replace(/&amp;/, '&'))\n}), Prism.languages.xml = Prism.languages.markup, Prism.languages.html = Prism.languages.markup, Prism.languages.mathml = Prism.languages.markup, Prism.languages.svg = Prism.languages.markup\nPrism.languages.css = {\n  comment: /\\/\\*[\\s\\S]*?\\*\\//,\n  atrule: {pattern: /@[\\w-]+?.*?(?:;|(?=\\s*\\{))/i, inside: {rule: /@[\\w-]+/}},\n  url: /url\\((?:([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,\n  selector: /[^{}\\s][^{};]*?(?=\\s*\\{)/,\n  string: {\n    pattern: /(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n    greedy: !0\n  },\n  property: /[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,\n  important: /\\B!important\\b/i,\n  'function': /[-a-z0-9]+(?=\\()/i,\n  punctuation: /[(){};:]/\n}, Prism.languages.css.atrule.inside.rest = Prism.util.clone(Prism.languages.css), Prism.languages.markup && (Prism.languages.insertBefore('markup', 'tag', {\n  style: {\n    pattern: /(<style[\\s\\S]*?>)[\\s\\S]*?(?=<\\/style>)/i,\n    lookbehind: !0,\n    inside: Prism.languages.css,\n    alias: 'language-css',\n    greedy: !0\n  }\n}), Prism.languages.insertBefore('inside', 'attr-value', {\n  'style-attr': {\n    pattern: /\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,\n    inside: {\n      'attr-name': {\n        pattern: /^\\s*style/i,\n        inside: Prism.languages.markup.tag.inside\n      },\n      punctuation: /^\\s*=\\s*['\"]|['\"]\\s*$/,\n      'attr-value': {pattern: /.+/i, inside: Prism.languages.css}\n    },\n    alias: 'language-css'\n  }\n}, Prism.languages.markup.tag))\nPrism.languages.clike = {\n  comment: [{\n    pattern: /(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,\n    lookbehind: !0\n  }, {pattern: /(^|[^\\\\:])\\/\\/.*/, lookbehind: !0}],\n  string: {\n    pattern: /([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n    greedy: !0\n  },\n  'class-name': {\n    pattern: /((?:\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+)|(?:catch\\s+\\())[\\w.\\\\]+/i,\n    lookbehind: !0,\n    inside: {punctuation: /[.\\\\]/}\n  },\n  keyword: /\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,\n  'boolean': /\\b(?:true|false)\\b/,\n  'function': /[a-z0-9_]+(?=\\()/i,\n  number: /\\b-?(?:0x[\\da-f]+|\\d*\\.?\\d+(?:e[+-]?\\d+)?)\\b/i,\n  operator: /--?|\\+\\+?|!=?=?|<=?|>=?|==?=?|&&?|\\|\\|?|\\?|\\*|\\/|~|\\^|%/,\n  punctuation: /[{}[\\];(),.:]/\n}\nPrism.languages.javascript = Prism.languages.extend('clike', {\n  keyword: /\\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\\b/,\n  number: /\\b-?(?:0[xX][\\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\\d*\\.?\\d+(?:[Ee][+-]?\\d+)?|NaN|Infinity)\\b/,\n  'function': /[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*\\()/i,\n  operator: /-[-=]?|\\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\\|[|=]?|\\*\\*?=?|\\/=?|~|\\^=?|%=?|\\?|\\.{3}/\n}), Prism.languages.insertBefore('javascript', 'keyword', {\n  regex: {\n    pattern: /(^|[^\\/])\\/(?!\\/)(\\[[^\\]\\r\\n]+]|\\\\.|[^\\/\\\\\\[\\r\\n])+\\/[gimyu]{0,5}(?=\\s*($|[\\r\\n,.;})]))/,\n    lookbehind: !0,\n    greedy: !0\n  },\n  'function-variable': {\n    pattern: /[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=\\s*(?:function\\b|(?:\\([^()]*\\)|[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/i,\n    alias: 'function'\n  }\n}), Prism.languages.insertBefore('javascript', 'string', {\n  'template-string': {\n    pattern: /`(?:\\\\[\\s\\S]|[^\\\\`])*`/,\n    greedy: !0,\n    inside: {\n      interpolation: {\n        pattern: /\\$\\{[^}]+\\}/,\n        inside: {\n          'interpolation-punctuation': {\n            pattern: /^\\$\\{|\\}$/,\n            alias: 'punctuation'\n          }, rest: Prism.languages.javascript\n        }\n      }, string: /[\\s\\S]+/\n    }\n  }\n}), Prism.languages.markup && Prism.languages.insertBefore('markup', 'tag', {\n  script: {\n    pattern: /(<script[\\s\\S]*?>)[\\s\\S]*?(?=<\\/script>)/i,\n    lookbehind: !0,\n    inside: Prism.languages.javascript,\n    alias: 'language-javascript',\n    greedy: !0\n  }\n}), Prism.languages.js = Prism.languages.javascript\nPrism.languages.scss = Prism.languages.extend('css', {\n  comment: {\n    pattern: /(^|[^\\\\])(?:\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*)/,\n    lookbehind: !0\n  },\n  atrule: {\n    pattern: /@[\\w-]+(?:\\([^()]+\\)|[^(])*?(?=\\s+[{;])/,\n    inside: {rule: /@[\\w-]+/}\n  },\n  url: /(?:[-a-z]+-)*url(?=\\()/i,\n  selector: {\n    pattern: /(?=\\S)[^@;{}()]?(?:[^@;{}()]|&|#\\{\\$[-\\w]+\\})+(?=\\s*\\{(?:\\}|\\s|[^}]+[:{][^}]+))/m,\n    inside: {\n      parent: {pattern: /&/, alias: 'important'},\n      placeholder: /%[-\\w]+/,\n      variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/\n    }\n  }\n}), Prism.languages.insertBefore('scss', 'atrule', {\n  keyword: [/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i, {\n    pattern: /( +)(?:from|through)(?= )/,\n    lookbehind: !0\n  }]\n}), Prism.languages.scss.property = {\n  pattern: /(?:[\\w-]|\\$[-\\w]+|#\\{\\$[-\\w]+\\})+(?=\\s*:)/i,\n  inside: {variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}\n}, Prism.languages.insertBefore('scss', 'important', {variable: /\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}), Prism.languages.insertBefore('scss', 'function', {\n  placeholder: {\n    pattern: /%[-\\w]+/,\n    alias: 'selector'\n  },\n  statement: {pattern: /\\B!(?:default|optional)\\b/i, alias: 'keyword'},\n  'boolean': /\\b(?:true|false)\\b/,\n  'null': /\\bnull\\b/,\n  operator: {\n    pattern: /(\\s)(?:[-+*\\/%]|[=!]=|<=?|>=?|and|or|not)(?=\\s)/,\n    lookbehind: !0\n  }\n}), Prism.languages.scss.atrule.inside.rest = Prism.util.clone(Prism.languages.scss)\n!function () {\n  if ('undefined' != typeof self && self.Prism && self.document) {\n    var t = [], e = {}, n = function () {\n    }\n    Prism.plugins.toolbar = {}\n    var a = Prism.plugins.toolbar.registerButton = function (n, a) {\n      var o\n      o = 'function' == typeof a ? a : function (t) {\n        var e\n        return 'function' == typeof a.onClick ? (e = document.createElement('button'), e.type = 'button', e.addEventListener('click', function () {\n          a.onClick.call(this, t)\n        })) : 'string' == typeof a.url ? (e = document.createElement('a'), e.href = a.url) : e = document.createElement('span'), e.textContent = a.text, e\n      }, t.push(e[n] = o)\n    }, o = Prism.plugins.toolbar.hook = function (a) {\n      var o = a.element.parentNode\n      if (o && /pre/i.test(o.nodeName) && !o.classList.contains('code-toolbar')) {\n        o.classList.add('code-toolbar')\n        var r = document.createElement('div')\n        r.classList.add('toolbar'), document.body.hasAttribute('data-toolbar-order') && (t = document.body.getAttribute('data-toolbar-order').split(',').map(function (t) {\n          return e[t] || n\n        })), t.forEach(function (t) {\n          var e = t(a)\n          if (e) {\n            var n = document.createElement('div')\n            n.classList.add('toolbar-item'), n.appendChild(e), r.appendChild(n)\n          }\n        }), o.appendChild(r)\n      }\n    }\n    a('label', function (t) {\n      var e = t.element.parentNode\n      if (e && /pre/i.test(e.nodeName) && e.hasAttribute('data-label')) {\n        var n, a, o = e.getAttribute('data-label')\n        try {\n          a = document.querySelector('template#' + o)\n        } catch (r) {\n        }\n        return a ? n = a.content : (e.hasAttribute('data-url') ? (n = document.createElement('a'), n.href = e.getAttribute('data-url')) : n = document.createElement('span'), n.textContent = o), n\n      }\n    }), Prism.hooks.add('complete', o)\n  }\n}()\n!function () {\n  if ('undefined' != typeof self && self.Prism && self.document) {\n    if (!Prism.plugins.toolbar) return console.warn('Show Languages plugin loaded before Toolbar plugin.'), void 0\n    var e = {\n      html: 'HTML',\n      xml: 'XML',\n      svg: 'SVG',\n      mathml: 'MathML',\n      css: 'CSS',\n      clike: 'C-like',\n      javascript: 'JavaScript',\n      abap: 'ABAP',\n      actionscript: 'ActionScript',\n      apacheconf: 'Apache Configuration',\n      apl: 'APL',\n      applescript: 'AppleScript',\n      asciidoc: 'AsciiDoc',\n      asm6502: '6502 Assembly',\n      aspnet: 'ASP.NET (C#)',\n      autohotkey: 'AutoHotkey',\n      autoit: 'AutoIt',\n      basic: 'BASIC',\n      csharp: 'C#',\n      cpp: 'C++',\n      coffeescript: 'CoffeeScript',\n      'css-extras': 'CSS Extras',\n      django: 'Django/Jinja2',\n      fsharp: 'F#',\n      glsl: 'GLSL',\n      graphql: 'GraphQL',\n      http: 'HTTP',\n      ichigojam: 'IchigoJam',\n      inform7: 'Inform 7',\n      json: 'JSON',\n      latex: 'LaTeX',\n      livescript: 'LiveScript',\n      lolcode: 'LOLCODE',\n      matlab: 'MATLAB',\n      mel: 'MEL',\n      n4js: 'N4JS',\n      nasm: 'NASM',\n      nginx: 'nginx',\n      nsis: 'NSIS',\n      objectivec: 'Objective-C',\n      ocaml: 'OCaml',\n      opencl: 'OpenCL',\n      parigp: 'PARI/GP',\n      php: 'PHP',\n      'php-extras': 'PHP Extras',\n      powershell: 'PowerShell',\n      properties: '.properties',\n      protobuf: 'Protocol Buffers',\n      jsx: 'React JSX',\n      renpy: 'Ren\\'py',\n      rest: 'reST (reStructuredText)',\n      sas: 'SAS',\n      sass: 'Sass (Sass)',\n      scss: 'Sass (Scss)',\n      sql: 'SQL',\n      typescript: 'TypeScript',\n      vbnet: 'VB.Net',\n      vhdl: 'VHDL',\n      vim: 'vim',\n      wiki: 'Wiki markup',\n      xojo: 'Xojo (REALbasic)',\n      yaml: 'YAML'\n    }\n    Prism.plugins.toolbar.registerButton('show-language', function (t) {\n      var a = t.element.parentNode\n      if (a && /pre/i.test(a.nodeName)) {\n        var s = a.getAttribute('data-language') || e[t.language] || t.language.substring(0, 1).toUpperCase() + t.language.substring(1),\n          i = document.createElement('span')\n        return i.textContent = s, i\n      }\n    })\n  }\n}()\n"
  },
  {
    "path": "src/js/modules/activeMenu.js",
    "content": "const activeMenu = menuId => {\n  const menu = document.getElementById(menuId)\n  if(!menu) return\n  const links = [...menu.querySelectorAll('a')]\n  if (!links) return\n  links.map( link => {\n    const url = document.location.href\n    if(link.href === url || link.href === url.slice(0,-1)) link.classList.add('active')\n  })\n}\n\nexport default activeMenu\n"
  },
  {
    "path": "src/js/modules/menu.js",
    "content": "const openMenu = (navId, toggleId) => {\n  const nav = document.getElementById(navId)\n  const toggle = document.getElementById(toggleId)\n\n  if (!nav || !toggle) return\n\n  toggle.addEventListener('click', () => {\n    nav.classList.toggle('show')\n    toggle.classList.toggle('active')\n  })\n}\n\nexport default openMenu\n"
  },
  {
    "path": "src/js/modules/scrollBarWIdth.js",
    "content": "const getScrollBarWidth = () => window.innerWidth - document.documentElement.getBoundingClientRect().width\n\ndocument.documentElement.style.setProperty('--scrollbar', `${getScrollBarWidth()}px`)\n\nexport { getScrollBarWidth }\n"
  },
  {
    "path": "src/md/alineacion.md",
    "content": "# Alineación\n<!-- TOC -->\n- [Alineación de contenido](#alineación-de-contenido)\n- [Alineación de bloques](#alineación-de-bloques)\n- [Ancho de los bloques](#ancho-de-los-bloques)\n- [Diferencia entre bloque  y contenido](#diferencia-entre-bloque--y-contenido)\n- [Alineación de imágenes y elementos inline](#alineación-de-imágenes-y-elementos-inline)\n- [Sobre el ancho de las imágenes](#sobre-el-ancho-de-las-imágenes)\n<!-- /TOC -->\n\n--- \n\nCon EDgrid puede alinear elementos o su contenido en horizontal y vertical según el breakpoint.\n\n<a id=\"markdown-alineación-de-contenido\" name=\"alineación-de-contenido\"></a>\n## Alineación de contenido\n\nUse las clases `breakpoint-left`, `breakpoint-center` y `breakpoint-right`\n\n```html\n<h1 class=\"s-left m-center lg-right\">Hola mundo</div>\n<h1 class=\"s-center m-right lg-left\">Hola mundo</div>\n<h1 class=\"s-right m-left lg-center\">Hola mundo</div>\n```\n\nRedimensione la ventana para ver\n<div class=\"ed-grid-demo s-pxy-1\">\n<div class=\"t1 s-left m-center lg-right\">Hola mundo</div>\n<div class=\"t1 s-center m-right lg-left\">Hola mundo</div>\n<div class=\"t1 s-right m-left lg-center\">Hola mundo</div>\n</div>\n\n\n<a id=\"markdown-alineación-de-bloques\" name=\"alineación-de-bloques\"></a>\n## Alineación de bloques\n\nUse las clases `breakpoint-to-left`, `breakpoint-to-center`, `breakpoint-to-right`\n\n```html\n<p class=\"s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n</p>\n```\nEjemplo: \n\n<p class=\"s-bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n\n<a id=\"markdown-ancho-de-los-bloques\" name=\"ancho-de-los-bloques\"></a>\n## Ancho de los bloques\n\nUse las clases `breakpoint-numero` donde `número` es un múltiplo de 5 desde 0 hasta 95. Asi que la clase `m-85` significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px.\n\nCombine estas clases con las de alineación para crear layouts avanzados.\n\n```html\n<p class=\"s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">\n    EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.\n</p>\n```\n\nEjemplo:\n\n<p class=\"s-bg-grey s-pxy-1 s-75 m-50 lg-40 s-to-left m-to-center l-to-right\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n\n<a id=\"markdown-diferencia-entre-bloque--y-contenido\" name=\"diferencia-entre-bloque--y-contenido\"></a>\n## Diferencia entre bloque  y contenido\n\nComprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS).\n\nPor ejemplo, un párrafo `<p></p>` es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha?\n\n```html\n<p class=\"s-right\">\nEste es un párrafo cuyo texto se ha alineado a la derecha\n</p>\n```\nEjemplo:\n\n<p class=\"s-pxy-1 s-bg-grey s-right\">\nEste es un párrafo cuyo texto se ha alineado a la derecha\n</p>\n\n```html\n<p class=\"s-75 s-to-right\">\nEste es un párrafo alineado a la derecha (como bloque)\n</p>\n```\nEjemplo:\n\n<p class=\"s-pxy-1 s-bg-grey s-75 s-to-right\">\nEste es un párrafo alineado a la derecha (como bloque)\n</p>\n\n```html\n<p class=\"s-75 s-to-center s-right\">\nEste es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.\n</p>\n```\nEjemplo:\n\n<p class=\"s-pxy-1 s-bg-grey s-75 s-to-center s-right\">\nEste es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.\n</p>\n\n\nComprender esta sutil diferencia es crucial para construir layouts. Por ejemplo, si quiere una imagen centrada, agregarle una clase `s-to-center` no hará nada porque las imágenes son inline (igual que los `<span>`, `<a>`, `<input>`, `<label>`). Podría maldecir a EDgrid pero así funciona CSS y no podemos hacer nada. \n\n\\* *Puede usar estas clases también para alinear botones*\n\n<a id=\"markdown-alineación-de-imágenes-y-elementos-inline\" name=\"alineación-de-imágenes-y-elementos-inline\"></a>\n## Alineación de imágenes y elementos inline\n\nPara centrar una imágen puede aplicarle la clase `breakpoint-center` a su contenedor. Por ejemplo:\n\n```html\n<div class=\"s-center\">\n    <img src=\"/img/tioalexys.jpg\">\n</div>\n```\n<div class=\"s-center ed-grid-demo s-pxy-1\">\n    <img src=\"/assets/img/alexys.jpg\">\n</div>\n\nIgual si quiere alinearla a la derecha o izquierda. Y lo mismo para cualquier elemento inline.\n\nAhora bien, ¿qué sucede si quiero centrar directamente la imagen y no usar su contenedor? Use la clases `breakpoint-block-left`, `breakpoint-block-center` y `breakpoint-block-right` que agregan además un `display: block` al elemento inlne al que se apliquen y resuelven la alineación.\n\n```html\n<img class=\"s-block-center\" src=\"/assets/img/EDgrid-isotipo.svg\">\n```\n\n<div class=\"ed-grid-demo s-pxy-1\">\n    <img class=\"s-block-center\" src=\"/assets/img/logo/EDgrid-isotipo.svg\">\n</div>\n\nSeguro pensará: si se necesita un `display: block` agréguenlo a los estilos en lugar de crear nuevas clases. El detalle es que el elemento podría tener `display:grid`, `display:flex`, `display: table` o `display: inline-block` y no se puede forzar un `display: block` porque destruiría su layout.\n\n<a id=\"markdown-sobre-el-ancho-de-las-imágenes\" name=\"sobre-el-ancho-de-las-imágenes\"></a>\n### Sobre el ancho de las imágenes\n\nLas imágenes de mapas de bits (jpg, png, gif, webp) poseen las propiedades `naturalHeight` y `naturalWidth` (accedes a ellas por JavaScript) que representan su ancho y alto original. La imagen del ejemplo anterior es de `200x200px` por eso la podemos centrar. Pero si fuera más grande habría que aplicarle además una clase para definir su ancho.\n\nEn el caso de las imágenes svg, estas son vectoriales y carecen de dichas propiedades por lo que siempre ocuparan todo el espacio disponible en su contenedor.\n\nEjemplo:\n\n<img alt=\"Logotipo de EDgrid\" width=\"100%\" src=\"/assets/img/logo/EDgrid-logo.svg\" class=\"l-block\">\n\nLa podemos centrar con clases de ancho y de alineación de bloques\n\n```html\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" class=\"s-30 s-block-center\">\n```\n\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/logo/EDgrid-logo.svg\" class=\"s-30 s-block-center\">\n"
  },
  {
    "path": "src/md/base.md",
    "content": "# Estilos base\nLos estilos base normalizan los elementos HTML para Responsive Web Design.\n\n```scss\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin      : 0;\n  font-family : sans-serif;\n}\n\nimg {\n  max-width : 100%;\n  height    : auto;\n}\n\na {\n  text-decoration : none;\n\n  &:hover { text-decoration : underline }\n}\n```\n"
  },
  {
    "path": "src/md/breakpoints.md",
    "content": "# Breakpoints\n<!-- TOC -->\n\n- [Mobile first](#mobile-first)\n- [Cambiar los breakpoints (Sass)](#cambiar-los-breakpoints-sass)\n\n<!-- /TOC -->\n\n---\n\nLos breakpoints son los puntos de quiebre donde el layout cambia. Estan definidos en el siguiente Sass map:\n\n```scss\n$breakpoints : (\n    s  : 0,     // Todos los tamaños\n    m  : 40em,  // ~ 640px\n    lg : 64em,  // ~ 1024px\n    xl : 90em   // ~1440px\n) !default;\n```\n\n\\* En versiones anteriores se usaba el breakpoint `l` que ahora se ha cambiado a `lg` para evitar confusión con la nomenclatura de SMACSS en la que `l` no significa `large` sino `layout`. Sin embargo, por compatibilidad hacia atrás, EDgrid reconoce aun el breakpoint `l` por lo que su proyecto no se verá afectado. Aunque recomendamos dejar de usarlo en el futuro.\n\n<a id=\"markdown-mobile-first\" name=\"mobile-first\"></a>\n## Mobile first\n\nEDgrid usa el patrón **Mobile first**, lo que significa que el estilo definido en un breakpoint será heredado en breakpoints superiores salvo que sea sobreescrito. En el siguiente ejemplo, el elemento medirá 50% de ancho (`s-50`) en todos los tamaños ya que fue definido en el breakpoint menor y no ha sido sobreescrito.\n\n```html\n<article class=\"s-50\">Hola mundo</article>\n```\n\nEn cambio, en este ejemplo, medirá 50% en los breakpoints `s` y `m` pero en `l` y `xl` medirá 75%.\n\n```html\n<article class=\"s-50 lg-75\">Hola mundo</article>\n```\n\n<a id=\"markdown-cambiar-los-breakpoints-sass\" name=\"cambiar-los-breakpoints-sass\"></a>\n## Cambiar los breakpoints (Sass)\n\nSi es usuario avanzado puede cambiar los breakpoints por los suyos. Puede cambiar el tamaño, el nombre o la cantidad.  Solo debe declarar el Sass map `$breakpoints` antes de importar EDgrid.\n\n```scss\n$breakpoints : (\nsmall   : 0,\nmedium  : 45em,\nlarge   : 80em,\nxlarge  : 90em,\nxxlarge : 120em\n)\n\n@import \"~ed-grid/ed-grid\";\n```\n"
  },
  {
    "path": "src/md/cards.md",
    "content": "# Cards\n\n<!-- TOC -->\n- [Card básico](#card-basico)\n- [Card horizontal](#card-horizontal)\n<!-- /TOC -->\n\n---\n\nRecuerde que EDgrid es una librería enfocada al RWD, por lo que no tiene componentes o estilos integrados por defecto, pero puede utilizar el prototipado y el prototipado avanzado para crear sus propios componentes. \n\n<a id=\"markdown-card-basico\" name=\"card-basico\"></a>\n## Card básico\n\nEjemplo de tarjeta creada con el prototipado integrado:\n\n<div class=\"m-40 lg-to-center l-block\">\n    <article class=\"s-shadow-bottom\">\n        <!--Contenedor de la imagen-->\n        <div class=\"s-ratio-16-9 img-container s-radius-tl s-radius-tr\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <!--Contenido-->\n        <div class=\"s-bg-white s-pxy-2\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n        <footer class=\"s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl\">\n            <!--Define el ancho máximo de la imagen-->\n            <div class=\"s-10 s-mr-1\">\n            <!--Contenedor de la imagen-->\n            <div class=\"circle \">\n                <img  src=\"/assets/img/alexys.jpg\">\n            </div>\n            <!--Profesor-->\n            </div>\n            <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n            <!--Boton-->\n            <div class=\"button s-to-right\">$40USD</div>\n        </footer>\n    </article>\n</div>\n\n```html\n<article class=\"s-shadow-bottom\">\n    <!--Contenedor de la imagen-->\n    <div class=\"s-ratio-16-9 img-container s-radius-tl s-radius-tr\">\n        <img src=\"/assets/img/poster-curso.png\">\n    </div>\n    <!--Contenido-->\n    <div class=\"s-bg-white s-pxy-2\">\n        <h3>Curso Bases de Datos Desde Cero</h3>\n        <p class=\"s-mb-0\">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>\n    </div>\n    <footer class=\"s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl\">\n        <!--Define el ancho máximo de la imagen-->\n        <div class=\"s-10 s-mr-1\">\n        <!--Contenedor de la imagen-->\n        <div class=\"circle \">\n            <img  src=\"/assets/img/alexys.jpg\">\n        </div>\n        <!--Profesor-->\n        </div>\n        <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n        <!--Boton-->\n        <div class=\"button s-to-right\">$40USD</div>\n    </footer>\n</article>\n```\n\n<a id=\"markdown-card-horizontal\" name=\"card-horizontal\"></a>\n## Card horizontal\n\nEste card se mostrará en formato horizontal en desktop y pasará a ser vertical en dispositivos móviles.\n\n<div class=\"m-65 s-to-center l-block\">\n    <article class=\"s-shadow-bottom\">\n      <!-- Póster y contenido -->\n      <div class=\"ed-grid m-grid-5 s-gap-2 m-pxy-2 s-bg-white s-radius-tl s-radius-tr\">\n        <!-- Contenedor de la imagen -->\n        <div class=\"m-cols-2 img-container s-ratio-16-9 s-radius-tl s-radius-tr m-radius\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <!-- Contenido -->\n        <div class=\"s-pxy-2 m-pxy-0 m-cols-3\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra \n                              bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n      </div>\n      <footer class=\"s-bg-grey s-cross-center s-pxy-2 s-radius-br s-radius-bl\">\n          <!-- Define el ancho máximo de la imagen -->\n          <div class=\"s-10 m-5 s-mr-1\">\n              <!-- Contenedor de la imagen -->\n              <div class=\"circle \">\n                  <img  src=\"/assets/img/alexys.jpg\">\n              </div>\n          </div>\n          <!-- Profesor -->\n          <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n          <!-- Botón -->\n          <div class=\"button s-to-right\">$40USD</div>\n      </footer>\n    </article>\n</div>\n\n```html\n<article class=\"s-shadow-bottom\">\n  <!-- Póster y contenido -->\n  <div class=\"ed-grid m-grid-5 s-gap-2 m-pxy-2 s-bg-white s-radius-tl s-radius-tr\">\n    <!-- Contenedor de la imagen -->\n    <div class=\"m-cols-2 img-container s-ratio-16-9 s-radius-tl s-radius-tr m-radius\">\n        <img src=\"/assets/img/poster-curso.png\">\n    </div>\n    <!-- Contenido -->\n    <div class=\"s-pxy-2 m-pxy-0 m-cols-3\">\n        <h3>Curso Bases de Datos Desde Cero</h3>\n        <p class=\"s-mb-0\">Diseña, estructura y administra \n                          bases de datos SQL y crea un sistema de facturación</p>\n    </div>\n  </div>\n  <footer class=\"s-bg-grey s-cross-center s-pxy-2 s-radius-br s-radius-bl\">\n      <!-- Define el ancho máximo de la imagen -->\n      <div class=\"s-10 m-5 s-mr-1\">\n          <!-- Contenedor de la imagen -->\n          <div class=\"circle \">\n              <img  src=\"/assets/img/alexys.jpg\">\n          </div>\n      </div>\n      <!-- Profesor -->\n      <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n      <!-- Botón -->\n      <div class=\"button s-to-right\">$40USD</div>\n  </footer>\n</article>\n```\n"
  },
  {
    "path": "src/md/distribucion.md",
    "content": "# Distribución\n<!-- TOC -->\n\n- [Order](#order)\n- [Alineación en vertical y horizontal de elementos hijos](#alineaci%C3%B3n-en-vertical-y-horizontal-de-elementos-hijos)\n- [Orientación](#orientaci%C3%B3n)\n\n<!-- /TOC -->\n\n---\n\n\n<a id=\"markdown-order\" name=\"order\"></a>\n## Order\n\nTanto en flexbox como en grid, la propiedad `order` permite definir la posición de un elemento en el layout. Por ejemplo, un elemento con `order: 1` aparecerá antes que uno con `order:2` aunque en el código HTML se encuentre después.\n\nCon EDgrid puede definir esta propiedad con las clases `breakpoint-order-numero`. Donde número va de `1` hasta la variable `max-grid-columns` (12 por defecto).\n\nTenga en cuenta que asignarle `1` al order de un elemento no hará que aparezca en primer lugar ya que el valor predeterminado de todos es `0` (teoría de CSS). Por lo que debe agregarle las clases a todos los que quiera modificar.\n\n```html\n<div class=\"ed-grid s-grid-3\">\n    <div class=\"m-order-2 lg-order-3\">1</div>\n    <div class=\"m-order-3 lg-order-1\">2</div>\n    <div class=\"m-order-1 lg-order-2\">3</div>\n</div>\n```\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n    <div class=\"m-order-2 lg-order-3\">1</div>\n    <div class=\"m-order-3 lg-order-1\">2</div>\n    <div class=\"m-order-1 lg-order-2\">3</div>\n</div>\n</div>\n\n\n<a id=\"markdown-alineación-en-vertical-y-horizontal-de-elementos-hijos\" name=\"alineación-en-vertical-y-horizontal-de-elementos-hijos\"></a>\n## Alineación en vertical y horizontal de elementos hijos\n\nUsando la teoría de flexbox, consideramos `main` como eje horizontal y `cross` como eje vertical. Con las clases `breakpoint-main-[start|center|end|justify|distribute]` y `breakpoint-cross-[start|center|end|baseline]` Puede alinear bloques y elementos hijos.\n\n```html\n<div class=\"s-cross-center\">\n    <img src=\"/img/tioalexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <span>Alexys Lozada</span>\n</div>\n```\n\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <span>Alexys Lozada</span>\n</div>\n\nTenga en cuenta que los márgenes de los elementos pueden influir en estas alineaciones. Por ejemplo, el mismo código anterior pero con un párrafo en lugar de span (el párrafo tienen un margin-bottom que impide el centrado vertical).\n\n```html\n<div class=\"s-cross-center\">\n    <img src=\"/img/tioalexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p>Alexys Lozada</p>\n</div>\n```\n\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p>Alexys Lozada</p>\n</div>\n\nLo resolvemos cambiando la etiqueta o anulando el margen.\n\n```html\n<div class=\"s-cross-center\">\n    <img src=\"/img/tioalexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p class=\"s-mb-0\">Alexys Lozada</p>\n</div>\n```\n\n<div class=\"ed-grid-demo s-pxy-1 s-cross-center\">\n    <img src=\"/assets/img/alexys.jpg\" width=\"80\" class=\"s-mr-2\">\n    <p class=\"s-mb-0\">Alexys Lozada</p>\n</div>\n\n\n<a id=\"markdown-orientación\" name=\"orientación\"></a>\n## Orientación\n\nUse las siguientes clases para definir la orientacion de los hijos de un elemento:\n\n* `breakpoint-row` De izquierda a derecha (predeterminado)\n* `breakpoint-column` De arriba hacia abajo\n* `breakpoint-row-reverse` De derecha a izquierda\n* `breakpoint-column-reverse` De abajo hacia arriba\n\n```html\n<div class=\"lg-50 lg-to-center column\">\n    <div>1</div>\n    <div>2</div>\n    <div>3</div>\n</div>\n```\n\n<div class=\"ed-grid-demo\">\n<div class=\"lg-50 lg-to-center s-bg-blue column\">\n    <div class=\"box-demo\">1</div>\n    <div class=\"box-demo\">2</div>\n    <div class=\"box-demo\">3</div>\n</div>\n</div>\n"
  },
  {
    "path": "src/md/docs/botones.md",
    "content": "# Botones (Sass/CSS)\nAunque ed-grid no pretende incluir elementos de UI (que se incluirán en el futuro proyecto ed-ui), por el momento incluye botones y menu pensando en el prototipado rápido.\n\n## Uso con CSS (cssCore)\nUse la clase button. Puede añadir las clases round o radius para bordes redondeados.\n\nPara controlar el tamaño del botón, cambie manualmente el font-size por CSS. Si desea cambiar los colores, haga lo mismo en su CSS personalizado.\n```markup\n<!-- version con css -->\n<a href=\"#\" class=\"button\">Boton default</a>\n<a href=\"#\" class=\"button round\">Boton round</a>\n<a href=\"#\" class=\"button radius\">Boton radius</a>\n```\nResultado\n\n\n<a href=\"#\" class=\"button\">Boton default</a>\n<a href=\"#\" class=\"button round\">Boton round</a>\n<a href=\"#\" class=\"button radius\">Boton radius</a>\n\n## Uso con Sass\nIncluya el mixin button($bg-color,$front-color,$style) Sus parámetros (todos opcionales) son:\n* $bg-color: el color de fondo (#ddd por defecto)\n* $font-color: color del texto (#333 por defecto)\n* $style: estilo del boton (default por defecto, puede usar round o radius).\n\n```markup\n<a href=\"#\" class=\"selector1\">Boton 1</a>\n<a href=\"#\" class=\"selector2\">Boton 2</a>\n<a href=\"#\" class=\"selector3\">Boton 3</a>\n```\n\n```scss\n.selector1 { @include button(teal, white) }\n.selector2 { @include button(tomato, white, round) }\n.selector3 { @include button(#2e84e6, white, radius) }\n```\n\nResultado\n\n<a class=\"selector1\">Boton 1</a>\n<a class=\"selector2\">Boton 2</a>\n<a class=\"selector3\">Boton 3</a>\n"
  },
  {
    "path": "src/md/docs/flexbox.md",
    "content": "# Flexbox (CSS/Sass)\n\nEl core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece muchas utilidades extra para aprovechar el poder de flexbox.\n\nEstas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.\n\n* Flexbox alinea los elementos respecto a dos ejes: main (horizontal por defecto) y cross (vertical por defecto).\n* En las siguientes instrucciones, la version css indicará la clase que debe añadirse al marcado html del contenedor\n* En la versión Sass se indicará el mixin que debe incluirse al contenedor\n* En la version CSS (cssCore), si desea indicar un breakpoint, inicie la clase con él, así `l-main-justify` `m-flex-reverse` `xl-cross-center`\n* Si no indica el breakpoint (cssHelpers), así `cross-end`\n\n## Alineaciones en el eje principal\n### Alinear los elementos a la izquierda y derecha\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"main-justify\">\n<div>1</div>\n<div>2</div>\n<div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass *******\n.container { @include mainJustify }\n```\n\n### Distribuir el espacio disponible alrededor de los elementos\n\n#### Versión con css\n```markup\n<!-- version con css -->\n<div class=\"main-distribute\">\n<div>1</div>\n<div>2</div>\n<div>3</div>\n</div>\n```\n\n\n\n\n\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include mainDistribute }\n```\n\n### Alinear los elementos al inicio del eje\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"main-start\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include mainStart }\n```\n\n### Alinear los elementos al centro del eje\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"main-center\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n:markdown-it\n\n```scss\n// version con Sass\n.container { @include mainCenter }\n```\n### Alinea los elementos al final del eje\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"main-end\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include mainEnd }\n```\n## Alineaciones en el eje secundario\n### Al inicio del eje secundario\n#### Versión con css\n\n```markup\n<div class=\"cross-start\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include crossStart }\n```\n### Al centro del eje secundario\n##### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"cross-center\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include crossCenter }\n```\n### Al final del eje secundario\n##### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"cross-end\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include crossEnd }\n```\n## Combinar alineaciones en ambos ejes\nPuede combinar alineaciones para el eje principal y secundario\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"main-center cross-center\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container {\n  @include mainCenter;\n  @include crossCenter;\n}\n```\n## Orientación de los ejes\n### Reversa horizontal\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"flex-reverse\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n// version con Sass\n.container { @include flexReverse }\n```\n\n### En columna (de arriba hacia abajo)\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"flex-column\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n#### Versión con Sass\n\n```scss\n//version con Sass\n.container { @include flexReverse }\n```\n\n### Columna en reversa (de abajo hacia arriba)\n#### Versión con css\n\n```markup\n<!-- version con css -->\n<div class=\"flex-column-reverse\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n```\n\n#### Versión con Sass\n```scss\n// version con Sass\n.container { @include flexColumnReverse }\n```\n## Centrado absoluto\nEl centrado absoluto se aplica a un container que tiene un solo hijo, el cual puede ser solo texto o un elemento html\n\n#### Versión con css\n```markup\n<!-- version con css -->\n<div class=\"flex-center\">\n  <div>1</div>\n</div>\n```\n#### Versión con Sass\n```scss\n// version con Sass\n.container { @include flexCenter }\n```\n\n## Orden de elementos (solo CSS)\nA través de clases html con el formato `bp-order-n` siendo `bp` un breakpoint válido de ed-grid, y `n` un número entre 1 y 10 se puede controlar la aparicion de los elementos en el navegador. Recuerde que todos los elementos tienen por defecto el valor 0 para la propiedad `order`.\n\nEjemplo\n```markup\n<div class=\"container\">\n  <div class=\"m-order-2\">1</div>\n  <div class=\"m-order-1\">2</div>\n  <div>3</div>\n</div>\n```\nEsta característica no esta disponible para Sass porque en Sass basta escribir una linea de código en la media query requerida. Escribir los mixins consume más código que tan solo escribir manualmente el orden cuando sea necesario.\n"
  },
  {
    "path": "src/md/docs/menu.md",
    "content": "# Menus \nCon EDgrid puede crear menus responsive fácilmente. Basta con crear una lista `ul` y los enlaces dentro de cada `li`.\n## Uso con clases CSS\n\nAñada la clase `ed-menu al` `ul` de nivel superior.\n\nAñada la clase `n-horizontal siendo` `n` el breakpoint (`s,m,l,xl`) desde el cual el menú será horizontal\n\nAñada alguna de las tres clases para cambiar el estilo: `default` `nav-bar` `button-bar`\n```markup\n<ul class=\"ed-menu l-horizontal button-bar\">\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n</ul>\n```\n\n<ul class=\"ed-menu l-horizontal button-bar\">\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n  <li><a href=\"#\">Item</a></li>\n</ul>\n\n## Uso con Sass\nSi va a usar Sass, el marcado HTML debe ser el mismo.\n\nIncluya el mixin `edMenu($bp,$style)` al `ul` de nivel superior. Los parámetros son:\n\n* `$bp` breakpoint a partir del cual el menu será horizontal. Puede ser un breakpoint del core de ed-grid (`s,m,l,xl`) o un breakpoint válido en `px`, `em` o `rem`.\n* `$style` (opcional) puede ser `default`, `navBar` o `buttonBar`\n\n```scss\n.main-menu {\n  @include edMenu(l,navBar)\n}\n```\n\n## Trabajo en desarrollo\nEste componente no está terminado y estos son algunos de los pendientes\n\n* En la version CSS, debería funcionar sin tener que añadir una clase para horizontal (en caso se requiera siempre vertical)\n* Scripts JS para activar y desactivar el menú en tamaños moviles\n* Scripts JS para activar y desactivar subniveles en tamaños moviles\n* Definir la personalizacion de colores para menu, items y links.\n"
  },
  {
    "path": "src/md/docs/offset.md",
    "content": "# Offset (Sass/CSS)\n\nSe conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries.\n\n## Uso con CSS (cssCore)\nBasta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.\n\n```markup\n<div class=\"selector s-offset-2-3 m-offset-50 l-offset-10\"></div>\n```\n\n## Uso con Sass\nIncluya el mixin `offset($s,$m,$l$xl)` donde cada parámetro es el offset en cada breakpoint de ed-grid. No hay restricciones a múltiplos de 5, incluso puede pasar fracciones.\n\nTenga en cuenta que solo es obligatorio el primer parámetro.\n\n```scss\n.selector {\n  @include offset(2/3,50,10);\n}\n```\nCompila a:\n```scss\n.selector{\n  margin-left:66.66667%;\n}\n\n@media screen and (min-width:40em){\n  .selector{\n    margin-left:50%;\n  }\n}\n\n@media screen and (min-width:64em){\n  .selector{\n    margin-left:10%;\n  }\n}\n```\n"
  },
  {
    "path": "src/md/docs/videos.md",
    "content": "# Videos responsive (Sass/CSS)\nEDgrid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint.\n\nEl video siempre se expandirá al 100% del ancho de su contenedor.\n\n## Uso con clases HTML\n\nAñada la clase `ed-video` al contenedor de su video (que puede ser un `iframe` elemento `video` o cualquier elemento con la clase `.video`)\n\n```html\n<div class=\"ed-video\">\n  <iframe src=\"https://www.youtube.com/embed/cd549lZtPEU\"></iframe>\n</div>\n```\n<div class=\"ed-video\">\n  <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/cd549lZtPEU\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n</div>\n"
  },
  {
    "path": "src/md/estructura.md",
    "content": "# Estructura de archivos\n\n<!-- TOC -->\n\n- [Etructura general del repositotio](#etructura-general-del-repositotio)\n- [Archivos exclusivos de EDgrid](#archivos-exclusivos-de-edgrid)\n- [Archivos exclusivos de la página de documentación](#archivos-exclusivos-de-la-p%C3%A1gina-de-documentaci%C3%B3n)\n\n<!-- /TOC -->\n\n---\n\nLa siguiente es la estructura de archivos de **EDgrid**. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)\n\nTenga presente que en el mismo repositorio se encuentra la librería **EDgrid** y la página web con la documentación. Si desea estudiar como se creó EDgrid busque el archivo `src/scss/ed-grid.scss` y la carpeta `src/scss/ed-grid`. Todo lo demás se usa para construir esta página web y no forma parte de la librería.\n\n<a id=\"markdown-etructura-general-del-repositotio\" name=\"etructura-general-del-repositotio\"></a>\n## Etructura general del repositotio\n\n* `src/` Carpeta de desarrollo\n    * `md/` Contenido de la documentación en markdown\n    * `data/` Datos JSON para la página web\n    * `img/` Imágenes para la página web\n    * `js/` JavaScript para la página web\n    * `pug/` Archivos pug para generar la página web\n    * `scss/` Estructura de archivos Sass\n    * `ed-grid/` **🔥 Componentes de la librería EDgrid.**\n    * `web-styles/` Estilos para la documentación en ed-grid.com (no son parte de EDgrid)\n    * `styles.scss` Archivo principal para la documentacion ed-grid.com (no es parte de EDgrid)\n    * `ed-grid.scss` **🔥 Archivo principal de EDgrid que importa sus componentes y define variables.**\n* `ed-grid.scss` **🔥 Archivo para importar EDgrid desde node_modules**.\n* `test.html` **🔥 Archivo para hacer pruebas con EDgrid**\n\n<a id=\"markdown-archivos-exclusivos-de-edgrid\" name=\"archivos-exclusivos-de-edgrid\"></a>\n## Archivos exclusivos de EDgrid\n\n* `ed-grid.scss` **🔥 Archivo para importar EDgrid desde node_modules**.\n* `src/`\n    * `ed-grid.scss` **🔥 Archivo que importa los componentes y define las variables de configuración**\n    * `ed-grid-css.scss` **Archivo para compilar EDgrid a su versión CSS**\n    * `ed-grid/`\n        * `components/` Componententes principales de la librería\n            * `_alignment.scss` Utilidades para alineación de bloques y contenido\n            * `_base` Estilos base para elementos HTML.\n            * `_core-flexbox.scss` Sistema de columnas con flexbox\n            * `_core-grid.scss` Sistema de filas y columnas con CSS Grid\n            * `_dev.scss` Estilos para debuggin\n            * `_layouts.scss` Estilos para separaciones verticales, margenes y paddings.\n            * `_media-queries` Mixins para crear media queries\n            * `_prototype.scss` Estilos para prototipado rápido\n            * `_video.scss` Estilos para video responsive\n            * `_visibility.scss` Estilos para mostrar y ocultar elementos en cada breakpoint\n        * `helpers/` Funciones y mixins necesarios para el funcionamiento de diversos componentes\n            * `_functions.scss` Funciones para convertir pixeles a em y rem (necesarios para mixins de EDgrid)\n            * `_mixins.scss` Mixins de apoyo en el desarrollo de componentes\n        * `legacy/` Componentes y estilos para compatibilidad con versiones anteriores de EDgrid (no necesario en proyectos nuevos).\n            * `_ed-menu` Estilos para crear menus de navegación\n            * `_grid.scss` Estilos para crear cuadriculas (se recomienda usar core-grid)\n            * `_legacy.scss` Estilos varios de versiones antiguas\n            * `_offset` Estilos legacy para offset de columnas (no necesario en proyectos nuevos).\n    * `css/`\n        * `ed-grid.css` Versión CSS de EDgrid con comentarios para desarrollo\n        * `ed-grid.min.css` Versión minificada de EDgrid\n\n<a id=\"markdown-archivos-exclusivos-de-la-página-de-documentación\" name=\"archivos-exclusivos-de-la-página-de-documentación\"></a>\n## Archivos exclusivos de la página de documentación\n\n* `docs/` Página web de documentación y assets compilados\n* `src/`\n    * `pug/` Archivos pug para generar páginas HTML\n    * `md/` Contenido de la documentación en formato markdown\n    * `img/` Imágenes de la página web\n    * `data/` Datos en formato JSON para mostrar en la página web\n    * `js/` Archivos javascript para la documentación\n    * `scss/`\n        * `styles.scss` Importa archivos para estilos de la documentación\n        * `web-styles/` Partials de Sass para la documentación\n"
  },
  {
    "path": "src/md/funciones.md",
    "content": "# Funciones (Sass)\nEDgrid incluye dos funciones útiles en el RWD: `em($px)` y `rem($px)`\nEstas funciones convierten un número en `px` a `em` o `rem` respectivamente\n\n```css\n.selector {\n  font-size: em(15px);\n  max-width : rem(1000px);\n }\n```\nCompila a\n\n```css\n.selector{\n  font-size:.9375em;\n  max-width:62.5rem;\n}\n```\nEstas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles\n"
  },
  {
    "path": "src/md/grids.md",
    "content": "# Grids (cuadrículas)\n\nCon EDgrid puede crear cuadrículas fácilmente.\n\n\n## Grids con CSS\nEn CSS EDgrid cuenta con dos grids preconstruidos: `1,2,3,4` y `2,3,4,5` (los números representan las columnas en cada breakpoint de ed-grid).\n\nPara utilizarlos, use la clase `grid-container` en el contedor, además la clase `grid-1234` o `grid-2345` para indicar el tipo de grid.\n\nPor último, a cada item de la galeria asignele la clase `grid-item`\n\n```html\n<div class=\"grid-container grid-1234\">\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n  <div class=\"grid-item\"><!-- Cualquier contenido--></div>\n</div>\n```\n\n## Grids con Sass\nPara Sass, use el mixin `grid($item,$s $m $l $xl,$gutter)` aplicado al contenedor del grid. Los parámetros son:\n\n* `$item` (obligatorio) es el selector css de cada item del grid. Debe pasarse entrecomillado.\n* `$s $m $l $xl` (solo el primero obligatorio) son el número de columnas en cada breakpoint de EDgrid (separados por espacios)\n  * Los breakpoints superiores heredaran el número de columnas del último breakpoint declarado en el mixin\n  * `$gutter` (opcional) es la separación entre los items. Solo se aceptan `em`, `rem` o `px`.\n\nEjemplo, para el siguiente HTML:\n\n```html\n<div class=\"gallery\">\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n  <div class=\"image\"><!-- Una foto en la galeria--></div>\n</div>\n```\n\nCrearemos un grid 1,1,2,3\n\n```scss\n.gallery {\n  @include grid('.image',1 1 2 3);\n}\n```\n\nLos grids son creados con CSS Grid y agregan un fallback con flexbox para navegadores que no lo soportem.\n"
  },
  {
    "path": "src/md/helpers.md",
    "content": "# Helpers\n\nArchivo `helpers.scss`\n\nLos helpers son ayudas al trabajo a través de clases.\n\n## Ancho de elementos\n\nPuede usar las mismas clases de los `ed-item`.\n\n```html\n<div class=\"m-60\">\n<!--Este elemento mide 60% a partir de 640px-->\n</div>\n<div class=\"xl-1-3\">\n<!-- Este elemento mide 33.33% a partir de 1440px-->\n</div>\n```\n\n## Alineación de elementos\n\nSe aplica al mismo elemento que se quiere alinear las clases: `to-left`, `to-right`, `to-center`. Para que funcione debe especificar un ancho también.\n\n```html\n<div class=\"to-left s-50\"><!-- Se envia a la izquierda 50% de ancho desde small--></div>\n<div class=\"to-right m-80\"><!-- Se envia a la derecha 80% de ancho desde medium --></div>\n<div class=\"to-center l-75\"><!-- Se envia al centro 75% de ancho desde large--></div>\n```\n## Alinear contenido\nUse las clases `left`, `center`, `right` en el contenedor para que su contenido se centre.\n\n```html\n<h2 class=\"center\">\nSoy un título centrado\n</h2>\n```\n\n## Limpiar floats\n\n**Versión CSS**\n```html\n<!--Version css-->\n<div class=\"clearfix\"><!-- la clase clearfix limpia los floats--></div>\n```\n\n**Versión Sass**\n```scss\n// Uso con Sass\n.selector { @include clearfix }\n```\n\n## Forzar ancho total\n\nHace que un elemento siempre mida el 100% del ancho disponible\n\n**Versión CSS**\n\n```html\n<!-- Version CSS -->\n<div class=\"full\"><!-- Este elemento medirá 100% de ancho siempre --></div>\n```\n\n**Versión Sass**\n\n```scss\n// Uso con Sass\n.selector { @include full }\n```\n\n## Hacer un elemento circular\nTenga en cuenta que si el alto y el ancho no son iguales, el elemento no será circular sino oval.\n\n**Versión CSS**\n```markup\n<!-- Version CSS -->\n<div class=\"circle\"><!-- Este elemento será circular --></div>\n```\n\n**Versión Sass**\n```scss\n// Uso con Sass\n.selector { @include circle }\n```\n\n## Controlar el padding\n\n> Importante: si usa la versión con CSS Grid puede saltarse esta sección.\n\nEn EDgrid la separación entre los ed-item se genera a través de padding laterales (la separación entre uno y el siguiente es dos veces el tamaño del padding, por defecto 15px).\n\nPuede ocurrir que en algunos casos complejos para forzar la alineación requiera añadir o quitar los padding por defecto a cualquier elemento (no solo ed-container y ed-item).\n\n\n**Versión CSS**\n```markup\n<!-- Version CSS -->\n<div class=\"padding\"><!-- Añade un padding si el elemento no lo tenia --></div>\n<div class=\"padding-2\"><!-- Añade un padding doble --></div>\n<div class=\"padding-3\"><!-- Añade un padding triple --></div>\n<div class=\"ed-container no-padding\"><!-- Elimina el padding de todos sus ed-item internos--></div>\n<div class=\"ed-item no-padding\"><!-- Elimina el padding de solo este ed-item--></div>\n```\n**Versión Sass**\n```scss\n// Uso con Sass\n\n// el mixin padding() recibe un número como parámetro\n// este número puede ser 0 para eliminar el padding\n.selector1 { @include padding(3) }\n\n// El mixin noPaddingContainer tiene efecto\n// solo aplicado a un .ed-container y elimina\n// el padding de sus ed-item hijos\n.selector2 { @include noPaddingContainer }\n```\n"
  },
  {
    "path": "src/md/layout-css-grid.md",
    "content": "# Sistema de filas y columnas con CSS Grid\n\nLa versión 3 de EDgrid incluye la creación de layouts con CSS Grid, la que ofrece varias ventajas sobre los layouts con Flexbox.\n\nEsta versión se basa en las siguientes reglas:\n\n1. El contenedor define la cantidad de columnas en cada breakpoint\n2. Los items definen cuantas columnas de su contedor ocuparán\n3. Solo el contenedor tiene una clase definida `ed-grid`. Los items pueden ser cualquier elemento hijo directo de `ed-grid` (a diferencia de la versión con flexbox que exigía tener un `ed-item`).\n4. CSS Grid utiliza la propiedad `gap` para definir la separación entre tracks, lo que resuelve el problema de los contenedores anidados y los paddings (propio de layouts con floats y flexbox).\n\n## Contenedor ed-grid\n\nEn esta versión se usa `ed-grid` como contenedor y es en él donde debemos definir las columnas (es así como funciona CSS Grid).\n\nPara definir las columnas use la nomenclatura `breakpoint-grid-numero`.\n\n```html\n<div class=\"ed-grid s-grid-2 lg-grid-4 xl-grid-10\">\n  <!-- Este contenedor tiene 2 columnas en tamaño s, 4 columnas en tamaño lg y 10 columnas en tamaño xl -->\n</div>\n```\n\n## Items\n\nCualquier hijo directo de `ed-grid` es automáticamente un item del layout. Y automáticamente tomará una columna de su contenedor.\n\n```html\n<!-- Layout de tres columnas donde cada card ocupa una columna.\nNo tiene que hacer nada en los items. Solo definir las columnas en el contenedor -->\n<div class=\"ed-grid s-grid-3\">\n  <div class=\"card\"></div>\n  <div class=\"card\"></div>\n  <div class=\"card\"></div>\n</div>\n```\nEjemplo: \n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n  <div class=\"article\">1</div>\n  <div class=\"article\">2</div>\n  <div class=\"article\">3</div>\n</div>\n</div>\n\n### Definir cantidad de columnas que ocupa el item\n\nUse la siguiente nomenclatura `breakpoint-cols-numero` Donde número es la cantidad de columnas.\n\nPor ejemplo, para crear un layout de sidebar al 25% y contenido al 75% el marcado sería el siguiente:\n\n```html\n<div class=\"ed-grid s-grid-4\">\n  <div>1</div>\n  <div class=\"s-cols-3\">2</div>\n</div>\n```\n\nEjemplo\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-4\">\n  <div>1</div>\n  <div class=\"s-cols-3\">2</div>\n</div>\n</div>\n\n### Definir en qué columna inicia un item\n\nUse la nomenclatura: `breakpoint-x-numero` para indicar en qué columna iniciará un item.\n\n```html\n<div class=\"ed-grid s-grid-4\">\n  <div class=\"s-cols-3 s-x-2\">\n  Comienzo en la columna 2 y ocupo 3 columnas\n  </div>\n</div>\n```\n\nEjemplo:\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-4\">\n  <div class=\"s-cols-3 s-x-2\">\n  Comienzo en la columna 2 y ocupo 3 columnas\n  </div>\n</div>\n</div>\n\n### Definir cantidad de filas que ocupa el item\n\nUse la siguiente nomenclatura `breakpoint-rows-numero` Donde número es la cantidad de filas.\n\n```html\n<div class=\"ed-grid rows-gap s-grid-2\">\n  <div class=\"s-rows-2\">1</div>\n  <div >2</div>\n  <div>3</div>\n</div>\n```\nEjemplo:\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-2\">\n  <div class=\"s-rows-2\">1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n</div>\n\n### Definir en qué fila inicia un item\n\nUse la nomenclatura: `breakpoint-y-numero` para indicar en qué columna iniciará un item.\n\n```html\n<div class=\"ed-grid rows-gap s-grid-4\">\n  <div class=\"s-rows-2\">1</div>\n  <div class=\"\">2</div>\n  <div class=\"s-y-2 s-x-2 s-cols-2\">3</div>\n  <div>4</div>\n  <div class=\"s-rows-2\">5</div>\n</div>\n```\n\nEjemplo:\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-4\">\n  <div class=\"s-rows-2\">1</div>\n  <div class=\"\">2</div>\n  <div class=\"s-y-2 s-x-2 s-cols-2\">3</div>\n  <div>4</div>\n  <div class=\"s-rows-2\">5</div>\n</div>\n</div>\n\n## Anidar contenedores\n\nPuesto que CSS Grid define la separación entre tracks internamente, puede anidar contenedores como desee, sin restricciones.\n\n```html\n<div class=\"ed-grid lg-grid-3\">\n    <div class=\"s-cols-2 ed-grid s-grid-3 rows-gap\">\n        <div class=\"s-cols-3\">1</div>\n        <div>2</div>\n        <div>3</div>\n        <div>4</div>\n    </div>\n    <div>5</div>\n</div>\n```\nEjemplo:\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid s-grid-3\">\n    <div class=\"s-cols-2 ed-grid s-grid-3 rows-gap\">\n      <div class=\"s-cols-3\">1</div>\n      <div>2</div>\n      <div>3</div>\n      <div>4</div>\n    </div>\n    <div>5</div>\n</div>\n</div>\n\n## Separación entre filas y columnas\n\nDe forma predeterminada las columnas tienen una separacion de `1rem` en tamaños móviles (s,m) y `2rem` en tamaños de escritorio (lg,xl). Si desea agregar una separación entre filas (igual a la de las columnas), agregue la clase `rows-gap` al contenedor.\n\n```html\n<div class=\"ed-grid rows-gap s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div>4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n  <div>11</div>\n  <div>12</div>\n</div>\n```\n\nEjemplo:\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div>4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n  <div>11</div>\n  <div>12</div>\n</div>\n</div>\n\nPuede cambiar la separación para todos los `ed-grid` redefiniendo la variable `$gap` antes de importar EDgrid.\n\n```scss\n$gap: 1rem; // En tamaños de escritorio se multiplica por 2\n@import \"~ed-grid/ed-grid\";\n```\n\nO puede cambiar la separación para un `ed-grid` especifico usando la nomenclatura `breakpoint-gap-numero`. El número va de 0 a 4 con separaciones de `.5rem`.\n\n\\* *Puede usar el numero `05` para crear separaciones de `.25rem`. Ejemplo: `s-gap-05`.*\n\n```html\n<div class=\"ed-grid rows-gap s-gap-05 m-gap-1 s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div class=\"lg-cols-3\">4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n</div>\n```\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-grid rows-gap s-gap-05 m-gap-1 s-grid-2 m-grid-4 lg-grid-6\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div class=\"lg-cols-3\">4</div>\n  <div>5</div>\n  <div>6</div>\n  <div>7</div>\n  <div>8</div>\n  <div>9</div>\n  <div>10</div>\n</div>\n</div>\n"
  },
  {
    "path": "src/md/layout-flexbox.md",
    "content": "# Sistema de columnas con flexbox\n<!-- TOC -->\n\n- [ed-container y ed-item](#ed-container-y-ed-item)\n- [Ancho de los ed-container](#ancho-de-los-ed-container)\n- [Ancho de los ed-item](#ancho-de-los-ed-item)\n    - [1. Porcentajes](#1-porcentajes)\n    - [2. Fracciones](#2-fracciones)\n- [Anidar contenedores e items](#anidar-contenedores-e-items)\n- [Avanzado: crea tus propios contenedores e items](#avanzado-crea-tus-propios-contenedores-e-items)\n- [Avanzado: crear contenedores e items con Sass (sin clases HTML)](#avanzado-crear-contenedores-e-items-con-sass-sin-clases-html)\n\n<!-- /TOC -->\n\n--- \n\nEDgrid es una librería para construir layouts. Puede construirlos con Flexbox o [CSS Grid](/documentacion/layout-css-grid.html). \n\n<a id=\"markdown-ed-container-y-ed-item\" name=\"ed-container-y-ed-item\"></a>\n## ed-container y ed-item\n\nPara construir layouts con Flexbox y EDgrid debe definir contenedores con la clase `ed-container` e items con la clase `ed-item`. Con las siguientes reglas:\n\n1. Un `ed-item` no puede ser huérfano. Siempre debe ser hijo de un `ed-container`\n2. Un `ed-container` debe tener al menos un `ed-item` como hijo directo.\n3. Los `ed-container` y `ed-item` son contenedores para crear layout. No agregue contenido directamente en ellos.\n\n\n```html\n<!-- Bien -->\n<div class=\"ed-container\">\n    <div class=\"ed-item\">\n        <article>\n            <p>\n                En un lugar de la Mancha, de cuyo nombre no quiero acordarme,\n                no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,\n                adarga antigua, rocín flaco y galgo corredor.\n            </p>\n        </article>\n    </div>\n</div>\n\n<!-- Mal -->\n<div class=\"ed-container\">\n    <article class=\"ed-item\">\n        En un lugar de la Mancha, de cuyo nombre no quiero acordarme,\n        no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,\n        adarga antigua, rocín flaco y galgo corredor.\n    </article>\n</div>\n```\n\n<a id=\"markdown-ancho-de-los-ed-container\" name=\"ancho-de-los-ed-container\"></a>\n## Ancho de los ed-container\n\nLos `ed-container` tienen un ancho predeterminado de 100% y un ancho máximo de `1200px`. Así cuando la pantalla es mayor a esta medida, el `ed-container` queda fijo y se centra horizontalmente.\n\nSi desea un `ed-container` que mida siempre el 100% de la pantalla agregue la clase `full`.\n\n```markup\n<div class=\"ed-container full\">\n    <div class=\"ed-item\"></div>\n</div>\n```\n\nSi desea personalizar el ancho máximo del `ed-container` redefina la variable Sass `$max-width` antes de importar EDgrid.\n\n```scss\n$max-width: 1400px;\n@import \"~ed-grid/ed-grid\";\n```\n\n<a id=\"markdown-ancho-de-los-ed-item\" name=\"ancho-de-los-ed-item\"></a>\n## Ancho de los ed-item\n\nCada `ed-item` tiene 100% del ancho de su padre a menos que se especifique lo contrario (a través de clases). Las clases para definir el ancho son de dos tipos: porcentajes y fracciones.\n\n<a id=\"markdown-1-porcentajes\" name=\"1-porcentajes\"></a>\n### 1. Porcentajes\n\nLa nomenclatura de clase es `breakpoint-numero` Donde número es cualquier número múltiplo de 5 entre 0 y 100. Así que la clase `lg-75` significa que el elemento tendrá 75% del ancho de su padre a partir del breakpoint `lg`.\n\n```html\n<div class=\"ed-container\">\n    <div class=\"ed-container\">\n      <div class=\"ed-item s-30 lg-50\">1</div>\n      <div class=\"ed-item s-50 lg-25\">2</div>\n      <div class=\"ed-item s-20 lg-25\">3</div>\n    </div>\n</div>\n```\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n  <div class=\"ed-item s-30 lg-50\">1</div>\n  <div class=\"ed-item s-50 lg-25\">2</div>\n  <div class=\"ed-item s-20 lg-25\">3</div>\n</div>\n</div>\n\n* Como puede ver, las separaciones entre columnas se crean con paddings laterales.\n* Si no desea separaciones con paddings (que dan problemas en layouts complejos) use nuestra versión con [CSS Grid](/documentacion/layout-css-grid.html)\n* Si la suma de los anchos da más de 100, habrá saltos de fila. Así puede crear layouts más complejos sin crear nuevos contenedores.\n\n\n<a id=\"markdown-2-fracciones\" name=\"2-fracciones\"></a>\n### 2. Fracciones\n\nSi quiere dividir el ancho entre 3 o 6 necesitará fracciones. La nomenclatura es `breakpoint-numerador-denominador`. Por ejemplo: `lg-1-3` significa un tercio de ancho (33.33%) a partir del breakpoint `lg` (1024px). Mientras que `xl-2-3` significa dos tercios a partir del breakpoint `xl` (1440px).\n\n```html\n<!-- Layout de tres columnas a partir de 1024px de pantalla -->\n<div class=\"ed-container\">\n    <div class=\"ed-item s-1-3\">1</div>\n    <div class=\"ed-item s-1-3\">2</div>\n    <div class=\"ed-item s-1-3\">3</div>\n</div>\n```\n\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n<div class=\"ed-item s-1-3\">1</div>\n<div class=\"ed-item s-1-3\">2</div>\n<div class=\"ed-item s-1-3\">3</div>\n</div>\n</div>\n\n<a id=\"markdown-anidar-contenedores-e-items\" name=\"anidar-contenedores-e-items\"></a>\n## Anidar contenedores e items\n\nSi necesita anidar elementos para crear layouts más complejos tenga en cuenta las siguientes reglas:\n\n1. No cree un `ed-container` como hijo de un `ed-item`\n2. Para anidar, agregue la clase `ed-container` a un `ed-item` entonces ya podrá crear nuevos `ed-item` nietos.\n\n```html\n<!-- Bien -->\n<div class=\"ed-container\">\n    <div class=\"ed-item s-60\">1</div>\n    <div class=\"ed-item s-40 ed-container\">\n        <div class=\"ed-item s-50\">2</div>\n        <div class=\"ed-item s-50\">3</div>\n    </div>\n</div>\n\n<!-- Mal -->\n<div class=\"ed-container\">\n    <div class=\"ed-item s-1-3\"></div>\n    <div class=\"ed-item s-2-3\">\n        <div class=\"ed-container\">\n            <div class=\"ed-item s-50\"></div>\n            <div class=\"ed-item s-50\"></div>\n        </div>\n    </div>\n</div>\n```\n<div class=\"ed-grid-demo\">\n<div class=\"ed-container\">\n    <div class=\"ed-item s-60\">1</div>\n    <div class=\"ed-item s-40 ed-container\">\n        <div class=\"ed-item s-50\">2</div>\n        <div class=\"ed-item s-50\">3</div>\n    </div>\n</div>\n</div>\n\n<a id=\"markdown-avanzado-crea-tus-propios-contenedores-e-items\" name=\"avanzado-crea-tus-propios-contenedores-e-items\"></a>\n## Avanzado: crea tus propios contenedores e items\n\nSi no desea usar las clases `ed-container` y `ed-item` puede definir las suyas. Simplemente redefina las variables `$container` y `$item` antes de importar EDgrid.\n\n```scss\n$container: row;\n$item: column;\n@import \"~ed-grid/ed-grid\";\n```\n\n<a id=\"markdown-avanzado-crear-contenedores-e-items-con-sass-sin-clases-html\" name=\"avanzado-crear-contenedores-e-items-con-sass-sin-clases-html\"></a>\n## Avanzado: crear contenedores e items con Sass (sin clases HTML)\n\nSi no desea tocar el marcado HTML (o no tiene acceso a el por restricciones del proyecto) puede usar mixins de Sass para definir sus contenedores e items.\n\n* Para los contenedores, use el mixin `ed-container`.\n* Para los items, use el mixin `ed-item($s,$m,$lg,$xl)` Los parámetros definen el ancho en cada breakpoint:\n* Puede omitirlos todos y el ancho será siempre 100%\n* Un ancho declarado se herederá en los breakpoints superiores.\n* Puede usar fracciones como parámetro. Por ejemplo: `1/3`\n\n```scss\n.main-page {\n@include ed-container\n}\n\n.sidebar {\n@include ed-item(100,100,1/3)\n}\n\n.content {\n@include ed-item(100,100,2/3)\n}\n```\n"
  },
  {
    "path": "src/md/layout.md",
    "content": "# Layout\n\n<!-- TOC -->\n\n- [Secciones](#secciones)\n    - [Anular espaciado entre secciones](#anular-espaciado-entre-secciones)\n    - [Valores de los espaciados verticales](#valores-de-los-espaciados-verticales)\n- [Espaciado vertical entre contenido](#espaciado-vertical-entre-contenido)\n    - [Titulos](#titulos)\n    - [Contenido](#contenido)\n- [Márgenes](#m%C3%A1rgenes)\n    - [Márgenes negativos](#m%C3%A1rgenes-negativos)\n- [Paddings](#paddings)\n\n<!-- /TOC -->\n\n--- \n\nEDgrid agrega clases para crear separaciones exteriores (margin) e interiores (padding) para crear layouts armoniosos y bien distribuidos.\n\nPara seguir buenas prácticas, considere lo siguiente:\n\n* Las clases de layout comienzan con `l-`. *Además todos l\n* Los espacios verticales se crean solamente con `margin-bottom`. \n* La propiedad `margin-top` se usa solamente en negativo para cancelar una separación vertical\n* Los espacios horizontales se crean solamente con `margin-right`\n* La propiedad `margin-left` se usa solo en negativo para cancelar una separación horizontal.\n* Evite usar css para márgenes y paddings, utilice las clases de EDgrid\n\n<a id=\"markdown-secciones\" name=\"secciones\"></a>\n## Secciones\n\nEn EDgrid existen tres tipos de secciones que se indican con las siguientes clases.\n    \n* `l-block` Bloques pequeños como widgets, cards, separadores.\n* `l-section` Sección grande de contenido.\n* `l-big-section` Igual que el anterior pero cuando se quiere dar una separación mayor. \n \n<a id=\"markdown-anular-espaciado-entre-secciones\" name=\"anular-espaciado-entre-secciones\"></a>\n### Anular espaciado entre secciones\n\nSi en algun caso desea anular el espaciado de una seccion con la anterior. Use las siguientes clases:\n\n* `cancel-l-block` Cancela margin-bottom de hermano anterior `l-block`\n* `cancel-l-section` Cancela margin-bottom de hermano anterior `l-section`\n* `cancel-l-big-section` Cancela margin-bottom de hermano anterior `l-big-section`\n\n<a id=\"markdown-valores-de-los-espaciados-verticales\" name=\"valores-de-los-espaciados-verticales\"></a>\n### Valores de los espaciados verticales\n\nEDgrid usa la variable CSS `--vertical-block-space` cuyo valor cambia según el breakpoint\n\n```scss\n:root {\n  --vertical-block-space   : #{$l-unit * 2};  // 1rem\n\n  @include from(lg) {\n    --vertical-block-space : #{$l-unit * 4};  // 2rem\n  }\n}\n```\n\nEl código que crea las separaciones es el siguiente.\n\n```scss\n// Block\n.l-block {\n  margin-bottom : var(--vertical-block-space); // 1rem mobile, 2rem desktop\n}\n\n.cancel-l-block {\n  margin-top : calc(var(--vertical-block-space) * -1);\n}\n\n// Section\n.l-section {\n  margin-bottom : calc(var(--vertical-block-space) * 2); // 2rem mobile, 4rem desktop\n}\n\n.cancel-l-section {\n  margin-top : calc(var(--vertical-block-space) * -2); \n}\n\n// Big section\n.l-big-section {\n  margin-bottom : calc(var(--vertical-block-space) * 4); // 4rem mobile, 8rem desktop\n}\n\n.cancel-l-big-section {\n  margin-top : calc(var(--vertical-block-space) * -4);\n}\n```\n\n<a id=\"markdown-espaciado-vertical-entre-contenido\" name=\"espaciado-vertical-entre-contenido\"></a>\n## Espaciado vertical entre contenido\n\nEDgrid incluye espaciado vertical armonioso entre contenido (parrafos, titulos, listas, etc). No tiene que hacer nada. Solo escribir su contenido.\n\n<a id=\"markdown-titulos\" name=\"titulos\"></a>\n### Titulos\n\n\n```scss\n:root {\n  --vertical-content-space : 1rem;\n}\n// Encabezados\nh1, h2, h3, h4, h5, h6 {\n  margin-top    : 0;\n  margin-bottom : var(--vertical-content-space);\n}\n\nh1 {\n  margin-bottom : calc(var(--vertical-content-space) * 1.5) !important;\n}\n```\n    \n<a id=\"markdown-contenido\" name=\"contenido\"></a>\n### Contenido\n\nLa norma recomienda encerrar cada sección en una etiqueta section. Pero en la práctica es dificil conseguirlo siempre así que la presenciad e un titulo indica el cambio de sección y por eso se le agrega una separación vertical mayor con el hermano anterior.\n\n```scss\n:root {\n  --vertical-content-space : 1rem;\n}\n\np,\nvideo,\nblockquote,\narticle,\nsection,\nform,\nfigure,\niframe,\nul,\nol,\npre,\nhr,\ndl,\naddress {\n  margin-top    : 0;\n  margin-bottom : var(--vertical-content-space);\n\n  + h2 {\n    padding-top : calc(var(--vertical-content-space) * 1.5);\n  }\n\n  + h3 {\n    padding-top : var(--vertical-content-space);\n  }\n}\n```\n\n<a id=\"markdown-márgenes\" name=\"márgenes\"></a>\n## Márgenes\n\nUse las clases de márgenes para separar elementos. La nomenclatura es la siguiente `breakpoint-mr-numero` y `breakpoint-mb-numero` Donde `mr` es `margin-right` y `mb` es `margin-bottom`.\n\nEl número va de 0 a 4 con separaciones de `.5rem` Por ejemplo `lg-mb-0` significa `margin-bottom:0` a partir del breakpoint `lg`. Y `m-br-4` sinifica `margin-right: 2rem` a partir del breakpoint `m`.\n\n\\* *Puede usar el numero `05` para crear separaciones de `.25rem`. Ejemplo: `s-mb-05`.*\n\n```html\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n```\n<div class=\"ed-grid-demo s-pxy-1\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n</div>\n\nUsando margenes\n\n```html\n<img class=\"m-mr-2 s-mb-2\" alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n```\n\n<div class=\"ed-grid-demo s-pxy-1\">\n<img class=\"m-mr-2 s-mb-2\" alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n<img alt=\"Logotipo de EDgrid\" src=\"/assets/img/EDgrid-logo.svg\" width=\"200\">\n</div>\n\n<a id=\"markdown-márgenes-negativos\" name=\"márgenes-negativos\"></a>\n### Márgenes negativos\n\nCon la misma nomenclatura puede crear márgenes superiores `margin-top` e izquierdos `margin-left` pero estos siempre serán negativos y debe usarlos para cancelar una separación con un hermano anterior.\n\n```html\n<h1>Bienvenidos a EDteam</h1>\n<p>Este es un subtítulo pero aparecerá muy abajo del título</p>\n```\nEjemplo:\n\n<div class=\"ed-grid-demo s-pxy-1\">\n<h1>Bienvenidos a EDteam</h1>\n<p>Este es un subtítulo pero aparecerá muy abajo del título</p>\n</div>\n\nUsando márgenes negativos:\n\n```html\n<h1>Bienvenidos a EDteam</h1>\n<p class=\"s-mt-3\">Este es un subtítulo con un margen superior negativo</p>\n```\n\nEjemplo:\n\n<div class=\"ed-grid-demo s-pxy-1\">\n<h1>Bienvenidos a EDteam</h1>\n<p class=\"s-mt-3\">Este es un subtítulo con un margen superior negativo</p>\n</div>\n\n\n<a id=\"markdown-paddings\" name=\"paddings\"></a>\n## Paddings\n\nLos paddings agregan una separación interna y tienen la siguiente nomenclatura de clases: `breakpoint-p[direction]-numero`\n\nDonde `direction` puede ser `t` (top), `r` (right), `b` (bottom), `l` (left). Por ejemplo: `xl-pb-4`. Al igual que en margin, los números van de 0 a 4 indicando separaciones de `.5rem`.\n\n* Para paddings verticales (top y bottom a la vez) use `breakpoint-py-numero)`. \n* Para paddings horizontales (left y right a la vez) use `breakpoint-px-numero`\n* Para paddings en las cuatro direcciones use `breakpoint-pxy-numero`\n\n\\* *Puede usar el numero `05` para crear paddings de `.25rem`. Ejemplo: `s-py-05`.*\n"
  },
  {
    "path": "src/md/mediaqueries.md",
    "content": "# Mediaqueries (Sass)\n\nEDgrid incluye mixins para crear mediaqueries fácilmente: \n\n1. `from($bp)`\\\nPara tamaños mayores al breakpoint (parámetro)\n2. `to($bp) `\\\nPara tamaños menores al breakpoint (parámetro)\n3. `fromTo($from,$to)`\\\nPara tamaños comprendidos entre los dos parámetros.\n\nLos tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid `s,m,lg,xl` o números especificados en `px`, `em` o `rem`.\n\nEjemplos:\n\n```scss\n// Ejemplo mixin from()\n.from {\n  color: red;\n  \n  @include from(m) {\n    color: blue;\n  }\n\n  @include from(700px) {\n    color: red\n  }\n}\n\n// Ejemplo mixin to()\n.to {\n  display: flex;\n  \n  @include to(l) {\n    display: block\n  }\n}\n\n// Ejemplo mixin from-to()\n.from-to {\n  display: block;\n  \n  @include from-to(m,800px) {\n    display: none\n  }\n  \n}\n```\n\nCompila a:\n\n```scss\n// From\n.from{\n  color:red;\n}\n\n@media screen and (min-width:40em){\n  .from{\n    color:blue;\n  }\n}\n\n@media screen and (min-width:700px){\n  .from{\n    color:red;\n  }\n}\n\n// To\n.to {\n  display:flex;\n}\n\n@media screen and (max-width:64em){\n  .to {\n    display:block;\n  }\n}\n\n// From to\n.from-to {\n  display:block;\n}\n\n@media screen and (min-width:40em) and (max-width:800px){\n  .from-to {\n    display:none;\n  }\n}\n\n```\n\n## Control de errores\n\nSi los parámetros pasados a estos mixins no son válidos EDgrid lanzará un mensaje en terminal indicando el error.\n"
  },
  {
    "path": "src/md/menu-responsive.md",
    "content": "# Menú responsive\n\nUn menú responsive es un buen ejemplo de cómo podemos integrar EDgrid con código ajeno a la librería. \n\nToda la estructura y distribución se harán desde el marcado con la nomenclatura que ya conocemos y a la vez se usarán los mixins que otorga la librería para los estilos en Sass.\n\n<div class=\"l-section\"></div>\n<div class=\"to-s\">\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <symbol id=\"notes\" viewbox=\"0 0 24 24\">\n    <rect fill=\"none\" height=\"24\" width=\"24\"></rect>\n    <path d=\"M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z\"></path>\n  </symbol>\n  <symbol id=\"studies\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z\"></path>\n  </symbol>\n  <symbol id=\"courses\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z\"></path>\n  </symbol>\n  <symbol id=\"home\" viewbox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"></path>\n  </symbol>\n</svg>\n</div>\n<div class=\"menu-responsive s-border l-block s-bg-white s-radius-1\">\n    <header class=\"ed-menu s-bg-grey s-py-2 s-px-2 lg-px-4\">\n      <div class=\"ed-grid lg-grid-5\">\n        <div class=\"s-cross-center s-main-center lg-main-start\">\n            <img class=\"logo\" src=\"https://ed.team/static/images/logo.svg\">\n        </div>\n        <nav class=\"nav lg-cols-4 s-cross-center ed-grid full\">\n          <ul class=\"menu s-main-distribute lg-to-right s-mb-0 s-pl-0 s-py-1\">\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center active\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#home\"></use>\n                </svg><span>Inicio</span></a></li>\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#studies\"></use>\n                </svg><span>Estudios</span></a></li>\n            <li class=\"lg-mr-3\"><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#courses\"></use>\n                </svg><span>Cursos</span></a></li>\n            <li><a class=\"link s-column s-cross-center\" href=\"#\">\n                <svg class=\"icon to-lg s-mb-0\">\n                  <use href=\"#notes\"></use>\n                </svg><span>Notas</span></a></li>\n          </ul>\n        </nav>\n      </div>\n    </header>\n    <p class=\"s-pxy-4\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales convallis dui quis elementum. Aliquam erat neque, suscipit vitae nisi posuere, eleifend luctus enim. \n    <br/><br/>Praesent euismod rutrum dui, suscipit vulputate nisl tincidunt et. Aenean commodo ac ex id malesuada. Morbi luctus tempus venenatis. Integer non ante at diam cursus mattis sit amet a augue. \n    <br/><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempus justo sit amet velit porttitor pretium. Nam metus dolor, semper vitae dui ac, mattis varius nisi..</p>\n</div>\n\n### HTML\n```html\n<header class=\"ed-header s-bg-grey s-py-2\">\n  <div class=\"ed-grid lg-grid-5\">\n    <!-- Logo  -->\n    <div class=\"s-cross-center s-main-center lg-main-start\">\n        <img class=\"logo\" src=\"https://ed.team/static/images/logo.svg\">\n    </div>\n    <nav class=\"nav lg-cols-4 s-cross-center ed-grid full\">\n      <!--  Menú de navegación    -->\n      <ul class=\"menu s-main-distribute lg-to-right s-mb-0 s-pl-0 s-py-1\">\n        <!--   Item de menú. Contiene link e ícono     -->\n        <li class=\"lg-mr-3\">\n          <a class=\"link s-column s-cross-center active\" href=\"#\">\n            <!--  El ícono sólo se mostrará en la versión móvil  -->\n            <svg class=\"icon to-lg s-mb-0\">\n              <use href=\"#home\"></use>\n            </svg>\n            <span>Inicio</span>\n          </a>\n        </li>\n        <li class=\"lg-mr-3\">\n          <a class=\"link s-column s-cross-center\" href=\"#\">\n            <svg class=\"icon to-lg s-mb-0\">\n              <use href=\"#studies\"></use>\n            </svg>\n            <span>Estudios</span>\n          </a>\n        </li>\n        <li class=\"lg-mr-3\">\n          <a class=\"link s-column s-cross-center\" href=\"#\">\n            <svg class=\"icon to-lg s-mb-0\">\n              <use href=\"#courses\"></use>\n            </svg>\n            <span>Cursos</span>\n          </a>\n        </li>\n        <li>\n          <a class=\"link s-column s-cross-center\" href=\"#\">\n            <svg class=\"icon to-lg s-mb-0\">\n              <use href=\"#notes\"></use>\n            </svg>\n            <span>Notas</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</header>\n```\n\n### SCSS\n\nLa mayoría del siguiente código es para estética del menú.\n\n```scss\n// Posicionamiento del header\n.ed-header {\n  position : fixed;\n  top      : 0;\n  width    : 100%;\n  z-index  : 100;\n\n  .logo { height : 2rem }\n\n  // Posicionamiento del nav\n  // Utilizamos el mixin to() de EDgrid para que sólo se aplique en móvil\n  .nav {\n      @include to(lg) { \n        position : fixed;\n        left     : 0;\n        bottom   : 0;\n        background : black;\n      }\n  }\n\n  .menu { list-style : none }\n \n   // Colores de links del menú\n  .link {\n    color : lightgrey;\n    &.active { color : cornflowerblue }\n    @include from(lg) { color : grey }\n  }\n\n   // Estilos para los íconos\n  .icon {\n    --size : 1.5rem;\n    width  : var(--size);\n    height : var(--size);\n    fill   : currentColor;\n  }\n\n}\n```\n\n### SVG\n\nEste componente utiliza íconos para su versión móvil. Puede crear un archivo SVG donde guarde todo el siguiente código o ponerlo al lado de la estructura del header en el HTML.\n\n```svg\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <symbol id=\"notes\" viewBox=\"0 0 24 24\">\n    <rect fill=\"none\" height=\"24\" width=\"24\"></rect>\n    <path d=\"M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z\"></path>\n  </symbol>\n  <symbol id=\"studies\" viewBox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z\"></path>\n  </symbol>\n  <symbol id=\"courses\" viewBox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z\"></path>\n  </symbol>\n  <symbol id=\"home\" viewBox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"></path>\n  </symbol>\n</svg>\n```\n"
  },
  {
    "path": "src/md/modo-dev.md",
    "content": "# Modo dev\n\nEl modo dev es una característica de EDgrid que nos permite saber el breakpoint actual y los componentes del layout (ed-grid, ed-container y ed-item).\n\nAl activarlo el navegador muestra el layout de la siguiente manera:\n\n1. Los `ed-container` y `ed-grid` tienen un borde rojo y en la parte superior una franja roja que imprime sus clases html.\n2. Los `ed-item` e hijos directos de `ed-grid` se colorean de azul y a su vez imprimen sus clases html en una franja azul.\n\n<h4 class=\"s-mb-1\">Modo dev en Flexbox</h4>\n<div class=\"l-block\">\n    <div class=\"dev-demo\">\n        <div class=\"ed-container ed-grid-demo\">\n          <div class=\"ed-item s-30 lg-50\">1</div>\n          <div class=\"ed-item s-50 lg-25\">2</div>\n          <div class=\"ed-item s-20 lg-25\">3</div>\n        </div>\n    </div>\n</div>\n\n<h4 class=\"s-mb-1\">Modo dev en Grid</h4>\n<div class=\"l-block\">\n <div class=\"ed-grid-demo dev-demo\">\n     <div class=\"ed-grid s-grid-4\">\n       <div class=\"s-cols-2\">1</div>\n       <div class=\"s-cols-1\">2</div>\n       <div class=\"s-cols-1\">3</div>\n     </div>\n </div>\n</div>\n\n## Activar modo dev con clases HTML\n\nBasta con añadirle la clase `dev` al elemento body\n\n```html\n<body class=\"dev\"></body>\n```\n\n## Activar el modo dev en Sass\n\nRedefinir la variable `$dev` a `true` antes de importar `ed-grid`\n\n```scss\n$dev: true;\n@import 'path/ed-grid/ed-grid';\n```\n\n## Modo dev hover\n\nSi sólo quieres inspeccionar un elemento a la vez y no toda la página, puedes usar el modo desarrollo con hover, donde sólo funcionará con `ed-grid`, `ed-container` y `ed-item` que tengan el estado de hover.\n\n<h4 class=\"s-mb-1\">Modo dev con hover</h4>\n<div class=\"l-section\">\n <div class=\"ed-grid-demo dev-demo-hover\">\n     <div class=\"ed-grid s-grid-4\">\n       <div class=\"s-cols-2\">1</div>\n       <div class=\"s-cols-1\">2</div>\n       <div class=\"s-cols-1\">3</div>\n     </div>\n </div>\n</div>\n\n<h4 class=\"s-mb-1\">Activar modo dev hover con clases HTML</h4>\n\nBasta con añadirle la clase `dev-hover` al elemento body\n\n```html\n<body class=\"dev-hover\"></body>\n```\n\n<h4 class=\"s-mb-1\">Activar modo dev hover en Sass</h4>\n\nRedefinir la variable `$dev-hover` a `true` antes de importar `ed-grid` (no es necesario redifinir también la variable `$dev`).\n\n```scss\n$dev-hover: true;\n@import 'path/ed-grid/ed-grid';\n```\n"
  },
  {
    "path": "src/md/personalizar.md",
    "content": "# Personalizar EDgrid con Sass\n\nEDgrid es altamente personalizable pues sus variables de configuración pueden ser sobreescritas. Para hacerlo, debe redefinirlas antes de importar EDgrid.\n\n```scss\n// 1. Personalice sus variables\n$prototype: false;\n$dev: true;\n// 2. Importe EDgrid\n@import \"~ed-grid/ed-grid\";\n```\n\nTenga en cuenta que no siempre querrá personalizar EDgrid y le bastará con solo importar la librería.\n\n## Variables que puede personalizar.\n\nA continuación se muestran las variables que puede redefinir, con su valor por defecto y la explicación de su función.\n\n```scss\n// Breakpoints\n$breakpoints : (\n  s  : 0,\n  m  : 640px,\n  lg : 1024px,\n  xl : 1440px\n);\n\n$prototype        : true;         // Activa los estilos de prototipado\n$dev              : false;        // Activa los estilos para debuggin\n$dev-hover        : false;        // Estilos de debuggi sólo en hover\n$max-width        : 1200px;       // Ancho máximo de los contenedores ed-container y ed-grid\n$l-unit           : .5rem;        // Unidad básica de layout (para separaciones verticales, margin y padding)\n$gap              : $l-unit * 4;  // Separación entre columnas (2rem)\n$fractions        : 3 6;          // Fracciones para crear columnas (core flexbox)\n$container        : ed-container; // Clase para el contenedor (core flexbox)\n$item             : ed-item;      // Clase para los items (core flexbox)\n$grid-container   : ed-grid;      // Clase para el contenedor (core grid)\n$max-grid-columns : 12;           // Máximo número de columnas (core css grid)\n$legacy           : false;        // Soporte para versiones antiguas\n\n// CSS Variables\n:root {\n  // Variables para prototipar\n  --color                  : #007BDF;          // Color base (azul EDteam)\n  --color-alt              : #006DC6;          // Color alterno (azul EDteam alterno)\n  --border-color           : #DFE0E0;          // Color para bordes (gris suave)\n  --light-bg               : #F0F0F0;          // Color gris para fondos\n  --border-radius          : #{$l-unit * 0.5}; // .25rem\n  // layout\n  --vertical-block-space   : #{$l-unit * 2};   // 1rem\n  --vertical-content-space : #{$l-unit * 2};   // 1rem\n  --gap                    : #{$l-unit * 2};   // 1rem\n  --max-width              : #{$max-width};\n\n  @include from(lg) {\n    --vertical-block-space : #{$l-unit * 4};\n    --gap                  : #{$l-unit * 4};    // 2rem\n  }\n}\n```\n"
  },
  {
    "path": "src/md/prototipado-avanzado.md",
    "content": "# Prototipado avanzado\n\nYa vio qué es EDgrid y todo lo que es capaz de hacer, pero tal vez no sea suficiente en ciertos casos. ¿Qué tal si quiere utilizar otras propiedades que no tiene la librería?\n¿O no quiere estar escribiendo CSS para cada componente y prefiere usar la numenclaruta de clases de EDgrid? Aquí es donde el prototipado avanzado entra en acción.\n\nUtiliza el core de EDgrid para convetir cualquier propiedad en las nomenclaturas de la librería `breakpoint-propiedad`. Cabe recalcar que esta función sólo está disponible para la versión de EDgrid Sass.\n\n## ¿Cómo funciona?\n\nPara esto haremos uso del mixin `prototype()`, el cual podrá utilizarlo en cualquier lugar de su proyecto siempre y cuando EDgrid se haya importado antes. La sintaxis es la siguiente:\n\n```scss\n@include prototype($names, $property, $value);\n/*\n* $names - Lista de nombres que usaremos para nombrar nuestras clases.\n*          Recorremos una lista por si queremos múltiples selectores con el mismo valor\n*\n* $property, $value - Propiedad CSS con su respectivo valor\n*/\n```\n\nEjemplo\n```scss\n@include prototype('cursor-pointer', cursor, pointer);\n```\n\nEl resultado en CSS sería:\n\n```css\n.s-cursor-pointer {\n  cursor: pointer;\n}\n\n@media screen and (min-width: 640px)\n  .m-cursor-pointer {\n    cursor: pointer;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .lg-cursor-pointer {\n    cursor: pointer;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .xl-cursor-pointer {\n    cursor: pointer;\n  }\n}\n```\n\nSi queremos múltiples clases con el mismo valor debemos pasar `$names` como si fuera una lista.\n\n```scss\n@include prototype(('color-red', 'red-color'), cursor, pointer);\n```\n\n```html\n<!-- Ambas clases funcionan -->\n<p class=\"s-color-red\">Este es un párrafo de color rojo</p>\n<p class=\"s-red-color\">Y éste también lo está</p>\n```\n\n## Especifidad\n\nSi quiere crear selectores más avanzados como juntar una clase con la nomenclatura que está creando o usar selectores como `+`, `>`, `~` entre muchos otros, no podrá hacerlo desde `$names`,\nsi no que deberá pasar un cuarto parámetro. Un ejemplo de esto es el componente `breakpoint-gap-numero` de EDgrid, el cuál solo funciona si el contenedor tiene la clase `ed-grid`.\n\n```scss\n@include prototype($names, $property, $value, $concat);\n```\n\nEjemplos\n\n```scss\n// El elemento también tiene la clase .background\n// .background.s-red\n@include prototype('red', color, red, '.background');\n\n// Algún elemento ancestro tiene la clase .background (nótese el espacio al final)\n// .background .s-red\n@include prototype('red', color, red, '.background ');\n\n// Hijos directos de un elemento con la clase background\n// .background > .s-red\n@include prototype('red', color, red, '.background > ');\n```\n\n## Debug\n\nEl modo debug le permite ver en la terminal el CSS resultado (selector, propiedad, valor y mediaquery). Para activarlo debemos pasar un quinto parámetro en `true`.\n\n```scss\n@include prototype($names, $property, $value, $concat, $debug);\n```\n\nEjemplo\n```scss\n@include prototype('red', color, red, '.background > ', true);\n\n// Introduzca un string vacío si no necesita el cuarto parámetro\n// Puede borrarlo una vez que desactive el debug\n@include prototype('red', color, red, '', true);\n```\n\n"
  },
  {
    "path": "src/md/prototipado.md",
    "content": "# Prototipado\n\n<!-- TOC -->\n\n- [Botones](#botones)\n- [Bordes](#bordes)\n- [Esquinas redondeadas](#esquinas-redondeadas)\n- [Fondos](#fondos)\n- [Sombras](#sombras)\n\n<!-- /TOC -->\n\n--- \n\nEDgrid le permite hacer prototipos rápidos con poco esfuerzo. La opción de prototipado viene activada por defecto en el proyecto, por lo que no necesita hacer ajustes extras para empezar a usarla.\n\n<a id=\"markdown-botones\" name=\"botones\"></a>\n## Botones\n\nAgrega la clase `button` a un elemento. Si necesita darle márgenes, centrarlo, etc, use las clases que EDgrid proporciona.\n\n<div class=\"button\">Soy un boton</div>\n\n<a id=\"markdown-bordes\" name=\"bordes\"></a>\n## Bordes\n\n* Use la clase `breakpoint-border` para agregar un borde a los cuatro lados.\n* Use la clase `breakpoint-border-none` para anular el borde en los cuatro lados.\n* Use la clase `breakpoint-border-[top|right|bottom|left]` para agregar un borde solo en el lado seleccionado.\n* Use la clase `breakpoint-border-[top|right|bottom|left]-none` para anular el borde en el lado seleccionado.\n\n```html\n<div class=\"s-border lg-30 lg-to-center s-pxy-2\">\n    <h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n    <p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n```\n\n<div class=\"s-border lg-30 lg-to-center s-pxy-2\">\n<h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n<p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n\n<a id=\"markdown-esquinas-redondeadas\" name=\"esquinas-redondeadas\"></a>\n## Esquinas redondeadas\n\n* Use la clase `breakpoint-radius` para asignar un border-radius a las cuatro esquinas.\n* Use la clase `breakpoint-radius-none` para anular el border-radius de las cuatro esquinas\n* Use la clase `breakpoint-radius-[tl|tr|br|bl]` para agregar border-radius en `top-left|top-right|bottom-right|bottom-left` respectivamente\n* Use la clase `breakpoint-radius-[tl|tr|br|bl]-none` para anular el border-radius en `top-left|top-right|bottom-right|bottom-left` respectivamente\n\n```html\n<div class=\"s-radius s-border lg-30 lg-to-center s-pxy-2\">\n    <h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n    <p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n```\n\n<div class=\"s-radius s-border lg-30 lg-to-center s-pxy-2\">\n<h3 class=\"s-border-bottom\">Soy una tarjeta</h3>\n<p class=\"s-mb-0\">Yo soy el contenido de esta tarjeta</p>\n</div>\n\n<a id=\"markdown-fondos\" name=\"fondos\"></a>\n## Fondos\n\nPuede usar las clases `breakpoint-bg-[grey|blue]` Para asignarle un fondo a un elemento. Así podemos crear componentes muy rápido. Por ejemplo, tarjetas:\n\n```html\n<div class=\"lg-50 lg-to-center s-bg-grey s-radius s-pxy-2 l-block\">\n    <p>EDgrid es una libreria construida con Sass (y con versión CSS) \n        para Responsive Web Design (RWD). Es muy ligero, personalizable \n        y te permite prototipar y crear layouts en muy poco tiempo \n        sin conflictos con tu proyecto.</p>\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n```\n\n<div class=\"lg-50 lg-to-center s-bg-grey s-radius s-pxy-2 l-block\">\n    <p>EDgrid es una libreria construida con Sass (y con versión CSS) \n    para Responsive Web Design (RWD). Es muy ligero, personalizable \n    y te permite prototipar y crear layouts en muy poco tiempo sin \n    conflictos con tu proyecto.</p>\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n\n```html\n<div class=\"lg-50 lg-to-center s-border s-radius\">\n  <p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass \n      (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, \n      personalizable y te permite prototipar y crear layouts en muy poco\n      tiempo sin conflictos con tu proyecto.</p>\n  <div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n  </div>\n</div>\n```\n\n<div class=\"lg-50 lg-to-center s-border s-radius\">\n<p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n</div>\n\n\n<a id=\"markdown-sombras\" name=\"sombras\"></a>\n## Sombras\n\n* Use las clases `breakpoint-shadow` para aplicar sombras en los cuatro lados.\n* Use las clases `breakpoint-shadow-[top|right|bottom|left]` para aplicar sombras en los lados seleccionados\n* Use las clases `breakpoint-shadow-none` para anular las sombras en los cuatro lados.\n\n```html\n<img class=\"s-shadow s-block-center\" src=\"/img/tioalexys.jpg\">\n```\n\n<img class=\"s-shadow s-block-center l-block\" src=\"/assets/img/alexys.jpg\">\n\n```html\n<div class=\"s-shadow-bottom lg-50 lg-to-center s-border s-radius\">\n  <p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass \n      (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, \n      personalizable y te permite prototipar y crear layouts en muy poco \n      tiempo sin conflictos con tu proyecto.</p>\n  <div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n  </div>\n</div>\n```\n\n<div class=\"s-shadow-bottom lg-50 lg-to-center s-border s-radius\">\n<p class=\"s-pxy-2 s-mb-0\">EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.</p>\n<div class=\"s-bg-grey s-pxy-2\">\n    <div class=\"button\">Empezar con EDgrid</div>\n</div>\n</div>\n"
  },
  {
    "path": "src/md/ratios.md",
    "content": "# Ratios e imágenes\n\n<!-- TOC -->\n\n- [Ratios](#ratios)\n- [Imágenes](#imagenes)\n\n<!-- /TOC -->\n\n---\n\nCon los ratios puede obtener elementos de un proporcion de ancho y alto definidos. Por ejemplo **3 x 1** (el triple de ancho que de alto). Tenga en cuenta que por limitaciones de css los elementos con ratio siempre tienen el 100% del ancho de su contenedor.\n\n<a id=\"markdown-ratios\" name=\"ratios\"></a>\n## Ratios\n\nUse las clases `breakpoint-ratio-x-y` donde `x` y `y` son numeros enteros del 1 al 4. `x` representa el ancho y `y` el alto.\n\n```html\n<div class=\"ed-grid lg-grid-3 lg-60 lg-to-center s-pxy-1 s-border s-radius s-shadow-bottom\">\n    <div class=\"s-ratio-16-9 lg-ratio-2-3 s-bg-blue s-mb-2 lg-mb-0\"></div>\n    <div class=\"lg-cols-2\">\n        <h3>Bienvenido a a EDgrid</h3>\n        <p>EDgrid es una libreria construida con Sass (y con versión CSS) \n            para Responsive Web Design (RWD). Es muy ligero, personalizable.</p>\n        <div class=\"button\">Comenzar con EDgrid</div>\n    </div>\n</div>\n```\n\n<div class=\"ed-grid lg-grid-3 lg-60 lg-to-center s-pxy-1 s-border s-radius s-shadow-bottom l-block\">\n    <div class=\"s-ratio-16-9 lg-ratio-2-3 s-bg-blue s-mb-2 lg-mb-0\"></div>\n    <div class=\"lg-cols-2\">\n        <h3>Bienvenido a a EDgrid</h3>\n        <p>EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable.</p>\n        <div class=\"button\">Comenzar con EDgrid</div>\n    </div>\n</div>\n\nAdemás EDgrid incluye las clases `breakpoint-ratio-16-9`, `breakpoint-ratio-9-16` y `breakpoint-ratio-21-9` Ya que son proporciones comunes de elementos multimedia.\n\n\n<a id=\"markdown-imagenes\" name=\"imagenes\"></a>\n## Contenedores de imágenes\n\nPuede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen. Solo agregue la clase `img-container`.\n\n```html\n<div class=\"ed-grid s-grid-2 m-grid-3 lg-grid-4 s-cross-center\">\n    <div class=\"s-ratio-4-3 img-container\">\n        <img src=\"https://cocha2018.ed.team/assets/img/banner-edcamp.jpg\">\n    </div>\n    <div class=\"s-ratio-9-16 img-container\">\n        <img src=\"https://cocha2018.ed.team/assets/img/banner-edcamp.jpg\">\n    </div>\n    <div class=\"circle\">\n        <img src=\"https://cocha2018.ed.team/assets/img/banner-edcamp.jpg\">\n    </div>\n    <div class=\"s-ratio-16-9 img-container\">\n        <img src=\"https://cocha2018.ed.team/assets/img/banner-edcamp.jpg\">\n    </div>\n</div>\n```\n\nLa imagen es la misma en todos los casos:\n\n<div class=\"ed-grid s-grid-2 m-grid-3 lg-grid-4 l-block s-cross-center\">\n    <div class=\"s-ratio-4-3 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"s-ratio-9-16 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"circle img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n    <div class=\"s-ratio-16-9 img-container\">\n        <img src=\"/assets/img/edcamp-mexico.png\">\n    </div>\n</div>\n\n* Puede usar la clase `circle` para obtener un círculo perfecto sin usar clases de ratio. Si va a usarlo para contener una imagen, agregué tambien la clase `img-container`.\n"
  },
  {
    "path": "src/md/skeleton.md",
    "content": "# Skeleton\n\nLos componenentes skeleton son una vista previa del contenido que se muestra antes de que se carguen los datos para reducir la frustración del usuario con los tiempos de cargas lentos en un sitio web. Una vez que terminan de cargar, el skeleton desaparece.\n\nEn sí no existe un componente único para los skeleton, porque todo dependerá de la UI que tengan en su proyecto, pero eso no es problema ya que con el prototipado usted podrá recrear la gran mayoría de ésta.\n\n## Skeleton de card\n\n<div class=\"ed-grid m-grid-2 rows-gap l-section\">\n    <article class=\"s-shadow-bottom m-order-1\">\n        <div class=\"s-bg-grey s-ratio-16-9 img-container s-radius-tl s-radius-tr\"></div>\n        <div class=\"s-bg-white s-pxy-2\">\n            <div class=\"s-bg-grey s-py-2 s-mb-2\"></div>\n            <div class=\"s-bg-grey s-py-1 s-mb-1\"></div>\n            <div class=\"s-bg-grey s-py-1 s-70\"></div>\n        </div>\n        <footer class=\"s-py-4 s-bg-grey\">\n            <div class=\"s-py-1\"></div>\n        </footer>\n    </article>\n    <article class=\"s-shadow-bottom\">\n        <div class=\"s-ratio-16-9 img-container s-radius-tl s-radius-tr\">\n            <img src=\"/assets/img/poster-curso.png\">\n        </div>\n        <div class=\"s-bg-white s-pxy-2\">\n            <h3>Curso Bases de Datos Desde Cero</h3>\n            <p class=\"s-mb-0\">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>\n        </div>\n        <footer class=\"s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl\">\n            <div class=\"s-10 s-mr-1\">\n            <div class=\"circle \">\n                <img  src=\"/assets/img/alexys.jpg\">\n            </div>\n            </div>\n            <p class=\"s-mb-0\">Prof. Alexys Lozada</p>\n            <div class=\"button s-to-right\">$40USD</div>\n        </footer>\n    </article>\n</div>\n\n```html\n<article class=\"s-shadow-bottom\">\n    <div class=\"s-bg-grey s-ratio-16-9 img-container s-radius-tl s-radius-tr\"></div>\n    <div class=\"s-bg-white s-pxy-2\">\n        <div class=\"s-bg-grey s-py-2 s-mb-2\"></div>\n        <div class=\"s-bg-grey s-py-1 s-mb-1\"></div>\n        <div class=\"s-bg-grey s-py-1 s-70\"></div>\n    </div>\n    <footer class=\"s-py-4 s-bg-grey\">\n        <div class=\"s-py-1\"></div>\n    </footer>\n</article>\n```\n"
  },
  {
    "path": "src/md/visibilidad.md",
    "content": "# Visibilidad\nEl componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará.\n\n## Uso con CSS\nUse las clases `from-breakpoint` o `to-breakpoint` donde **breakpoint** es un breakpoint válido de EDgrid (`s,m,l,xl`)\n\n`from-lg` hará al elemento visible a partir de 1024px e invisible por debajo de esa medida.\n\n`to-xl` Hará al elemento visible por debajo de 1440px e invisible por encima de él.\n\n## Uso con Sass\nEn la versión Sass cuenta con cuatro mixins que reciben como parámetro un breakpoint del core de ed-grid ( `s,m,l,xl`) o uno en `px`, `em` o `rem`.\n\n* `showFrom($bp)` Muestra el elemento solo por encima del breakpoint especificado en el parámetro.\n* `showTo($bp)` Muestra el elemento solo por debajo del breakpoint especificado en el parámetro.\n* `hideFrom($bp)` Oculta el elemento por encima del breakpoint especificado en el parámetro.\n* `hideTo($bp)` Oculta el elemento por debajo del breakpoint especificado en el parámetro.\n\nEjemplo\n```scss\n.menu-movil {\n  @include hideFrom(lg)\n}\n\n.menu-desktop {\n  @include showFrom(xl)\n}\n```\n\nCompila a\n```scss\n@media screen and (min-width:1024px){\n  .menu-movil{\n    display:none;\n  }\n}\n\n@media screen and (max-width:1440px){\n  .menu-desktop{\n    display:none;\n  }\n}\n```\n"
  },
  {
    "path": "src/pug/config/config.pug",
    "content": "- var title = \"EDgrid | Inicio\"\n- var description = \"Descripcion de la pagina\"\n- var ogUrl = \"index.html\"\n- let docsMenu = false\n\n- var img = \"\"\n- var title = \"\"\n- var description = \"\"\n- var clase = \"\"\n- var boton = \"\"\n- var botones = \"\"\n"
  },
  {
    "path": "src/pug/config/template.pug",
    "content": "block config\n  include config\n\ndoctype html\nhtml(lang=\"es\")\n  head\n    title= title\n    meta(charset=\"utf-8\")\n    meta(name=\"viewport\" content=\"initial-scale=1.0, width=device-width\")\n    meta(name=\"description\" content= description)\n    // Estilos\n    link(rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:700\")\n    link(rel=\"stylesheet\" href=\"/css/styles.css?180113\")\n    link(rel=\"shortcut icon\" href=\"/assets/img/logo/favicon.png\")\n    //- Open Graph Protocol\n    meta(property=\"og:title\" content= title)\n    meta(property=\"og:type\" content=\"website\")\n    meta(property=\"og:description\" content= description)\n    meta(property=\"og:url\" content= ogUrl)\n    meta(property=\"og:image\" content=\"/assets/img/logo/edgrid-poster.jpg\")\n    meta(property=\"og:site_name\" content=\"EDteam\")\n    meta(property=\"og:locale\" content=\"es_PE\")\n    meta(property=\"og:locale:alternate\" content=\"es_CO\")\n    meta(property=\"og:locale:alternate\" content=\"es_MX\")\n    meta(property=\"og:locale:alternate\" content=\"es_DO\")\n    meta(property=\"og:locale:alternate\" content=\"es_BO\")\n    //- Twitter Cards\n    meta(property=\"twitter:card\" content=\"summary_large_image\")\n    meta(property=\"twitter:title\" content= title)\n    meta(property=\"twitter:site\" content=\"@EDteamLat\")\n    meta(property=\"twitter:description\" content=description)\n    meta(name=\"theme-color\" content=\"#007BDF\")\n  // Body\n  body(itemscope itemtype=\"http://schema.org/WebPage\")\n    include ../includes/header\n    // Banner section\n    block banner\n    // Main\n    if docsMenu\n      .l-block\n      .ed-grid.cols-l-4.main-section.l-big-section\n        aside(itemscope=\"itemscope\" itemtype=\"http://schema.org/WPSideBar\" role=\"complementary\").main-sidebar.sidebar-first\n          .vertical-menu-toggle.to-l#vertical-menu-toggle(data-content=\"Filtros\")\n          include ../includes/docs-menu\n        .span-l-3\n          block main\n    else\n      .l-block\n      .main-section.l-big-section\n        block main\n    // Footer\n    include ../includes/footer\n    script(src=\"/js/scripts.js\")\n"
  },
  {
    "path": "src/pug/includes/banner.pug",
    "content": "mixin banner(img, title, description, clase, boton, botonClass, botonUrl, botonText, botones)\n  .main-banner.background.s-py-4.grey-700.l-block.img-container(class=clase)\n    .ed-grid.lg-grid-6\n      .lg-cols-4.lg-x-2.s-center\n        .main-banner__data\n          .t1.s-mb-2\n            span.color.white-color= title\n          if description\n            p.color.white-color.s-opacity-8(class=boton || botones ? 'l-block' : 's-mb-0')= description\n          if boton\n            a(class='button--'+botonClass href=botonUrl target=\"_blank\")= botonText\n          if botones\n            .s-center\n              a.button.ghost.blue-400.s-mr-2(href=\"/documentacion\" title=\"Documentación de EDgrid\")\n                span Documentación\n              a.button.ghost.blue-400(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en Github\")\n                span Github\n          if block\n            block\n"
  },
  {
    "path": "src/pug/includes/cards.pug",
    "content": "mixin card(cardImage, cardTitle, cardSub, cardText, cardlink, user, imageUser,  linkuser)\n  .testimony-card.s-column.s-border.s-radius.s-bg-white.s-shadow-bottom\n    .img-container.s-ratio-16-9\n      img(src=cardImage).s-radius-tl.s-radius-tr\n    .content.s-pxy-2.s-column\n      h2.t3.s-mb-1=cardTitle\n      p.color.color-text-light=cardSub\n      .card__body\n        p=cardText\n      footer.card__footer.s-cross-center.nowrap\n        .card__btn.small.s-mr-1\n          a(target=\"_blank\" href=cardlink title=cardTitle).button.small.ghost Ver página\n        if (user !== \"no\")\n          .s-to-right.s-cross-center.user-avatar\n            .photo.s-mr-1\n              .img-container.circle\n                img(src=imageUser)\n            a(target=\"_blank\" href=linkuser)= user\n"
  },
  {
    "path": "src/pug/includes/collaborator.pug",
    "content": "mixin collaborator(name, job, url, photo)\n  article.s-mb-0.s-column.s-cross-center.s-pxy-2\n    a(href=url target=\"_blank\").s-70.s-to-center.s-mb-2\n      div.img-container.circle\n        img(src=photo)\n    p.t4.s-mb-1.s-center= name\n    p.color.blue-500.s-mb-0.smaller.font-semibold= job\n"
  },
  {
    "path": "src/pug/includes/docs-menu.pug",
    "content": "mixin sidebar-section(title)\n  section.s-mb-2.m-mb-3\n    p.t5.s-mb-1= title\n    block\n\nmixin sidebar-link(value, url)\n  li(itemprop=\"url\")\n    a(href=url itemprop=\"name\" title=value)= value\n\nnav(itemscope itemtype=\"http://schema.org/WPSideBar\").vertical-menu#vertical-menu\n  ul\n    +sidebar-section('Comenzar con EDgrid')\n      +sidebar-link('Instalación', '/documentacion/instalacion.html')\n      +sidebar-link('Estructura de archivos', '/documentacion/estructura.html')\n      +sidebar-link('Personalización', '/documentacion/personalizar.html')\n      +sidebar-link('Breakpoints', '/documentacion/breakpoints.html')\n\n    +sidebar-section('Filas y columnas')\n      +sidebar-link('Flexbox', '/documentacion/layout-flexbox.html')\n      +sidebar-link('CSS Grid', '/documentacion/layout-css-grid.html')\n      +sidebar-link('Modo desarrollo', '/documentacion/modo-dev.html')\n\n    +sidebar-section('Layout')\n      +sidebar-link('Estilos base', '/documentacion/base.html')\n      +sidebar-link('Secciones y espaciado', '/documentacion/layout.html')\n      +sidebar-link('Distribución', '/documentacion/distribucion.html')\n      +sidebar-link('Alineación', '/documentacion/alineacion.html')\n      +sidebar-link('Visibilidad', '/documentacion/visibilidad.html')\n      +sidebar-link('Mediaqueries', '/documentacion/mediaqueries.html')\n      +sidebar-link('Videos responsive', '/documentacion/videos.html')\n      +sidebar-link('Ratios e imágenes', '/documentacion/ratios.html')\n\n    +sidebar-section('Helpers y prototipado')\n      +sidebar-link('Funciones', '/documentacion/funciones.html')\n      +sidebar-link('Prototipado de EDgrid', '/documentacion/prototipado.html')\n      +sidebar-link('Prototipado avanzado', '/documentacion/prototipado-avanzado.html')\n\n    +sidebar-section('Componentes')\n      +sidebar-link('Cards', '/documentacion/cards.html')\n      +sidebar-link('Banner', '/documentacion/banner.html')\n      +sidebar-link('Skeleton', '/documentacion/skeleton.html')\n      +sidebar-link('Menú responsive', '/documentacion/menu-responsive.html')\n"
  },
  {
    "path": "src/pug/includes/feature-item.pug",
    "content": "mixin main-feature(img, title, text)\n  .main-feature.s-pxy-2\n    .main-feature__img\n      img(src=img)\n    h3= title\n    p.s-mb-0.small= text\n"
  },
  {
    "path": "src/pug/includes/footer.pug",
    "content": "footer.main-footer(role=\"contentinfo\" itemscope itemtype=\"http://schema.org/WPFooter\")\n  .ed-container.main-footer--content\n\n    .ed-item.l-50.s-to-center.s-center\n      p.smaller.s-mb-1 EDgrid es una librería Sass/Css para crear diseños web responsive y mobile first.\n        a(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en EDgrid\").icon-github.space\n        a(href=\"documentacion\" target=\"_blank\" title=\"Documentación de EDgrid\").icon-docs.space\n      p.smaller.s-mb-1 EDgrid es una marca de #[a(target=\"_blank\" href=\"https://ed.team\") EDteam], ambas fundadas por #[a(target=\"_blank\" href=\"https://alvaro.ceo\") Álvaro Felipe].\n      p.smaller.l-block= `2015 - ${new Date().getFullYear()}`\n\n      .s-cross-center.s-main-center\n        a.s-mr-3(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\")\n          img(src=\"/assets/img/icons/github.svg\" width=20 height=20)\n        a(href=\"https://twitter.com/EDgridcss\" target=\"_blank\")\n          img(src=\"/assets/img/icons/twitter.svg\" width=20 height=20)\n"
  },
  {
    "path": "src/pug/includes/header.pug",
    "content": "header(itemscope itemtype=\"http://schema.org/WPHeader\").main-header\n  .ed-grid.s-grid-5.cols-lg-10\n    .s-cols-2.s-cross-center(itemscope itemtype=\"http://schema.org/Organization\")\n      a(href=\"/\" itemprop=\"url\")\n        img(alt=\"Logotipo de EDgrid\" itemprop=\"logo\" src=\"/assets/img/logo/EDgrid-logo.svg\").main-logo\n    .s-cols-3.lg-cols-8.main-menu-container.s-cross-center.s-main-end\n      nav(itemscope itemtype=\"http://schema.org/SiteNavigationElement\" role=\"navigation\").main-menu#main-menu\n        include main-menu\n      .main-menu-toggle.to-l#main-menu-toggle\n\n"
  },
  {
    "path": "src/pug/includes/main-banner.pug",
    "content": "mixin main-banner\n  .main-banner.background.grey-800.l-section\n    .ed-grid.lg-grid-2.row-gap.s-gap-2.m-gap-4\n      .s-column.s-main-center.lg-main-center.lg-cross-start.s-center.lg-left\n        h1.bigger-title\n          span.color.white-color Maqueta sitios #[<br/>] #[span.color.blue-400 y aplicaciones web] #[<br/>] sin una línea de CSS\n        p.color.grey-400.m-60.m-to-center.lg-100 EDgrid implementa un sistema de diseño flexible y personalizable para construir layouts y componentes responsive a la velocidad de la luz ⚡\n        .s-main-center\n          a.button.blue-500.s-mr-2.s-mb-2.m-mb-0(href=\"/documentacion/instalacion.html\" title=\"Documentación de EDgrid\")\n            span 📄 Lee la documentación\n          a.button.ghost.blue-400.s-mb-2.m-mb-0(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\" title=\"EDgrid en Github\")\n            span 😺 Repo en Github\n      div\n        .img-container.s-ratio-16-9\n          img.s-radius-1(src=\"/assets/img/logo/edgrid-poster.jpg\")\n"
  },
  {
    "path": "src/pug/includes/main-menu.pug",
    "content": "block link-section\n  - var active = 'Documentación';\n\n- var menu = { 'Documentación': '/documentacion/instalacion.html', 'Casos de éxito': '/casos-de-exito', 'Changelog': '/changelog', 'Créditos': '/creditos', 'Ir a EDteam': 'https://ed.team' };\n\nul\n  each val, key in menu\n    - var target = val === 'https://ed.team' ? '\"_blank\"' : ''\n    li(itemprop=\"url\")\n      a(href=val target=target itemprop=\"name\" title= \"Enlace de \" + key)= key\n"
  },
  {
    "path": "src/pug/pages/casos-de-exito/index.pug",
    "content": "extends ../../config/template\ninclude ../../includes/banner\ninclude ../../includes/cards\nappend config\n  -title = \"Casos de éxito\"\n  -description = \"Casos de éxito que se encuentran actualmente en producción y que utilizan la librería de EDgrid.\"\n  -ogUrl = \"/casos-exito.html\"\n\n  -img = \"/assets/img/docs-banner.jpg\"\n  -titleBanner = \"Casos de éxito\"\n  -descriptionBanner = \"¿Tienes un sitio en producción que use EDgrid?\"\n  -clase = \"grey-700\"\n  -boton = false\n  -botonClass= \"\"\n  -botonUrl=\"\"\n  -botonText =\"\"\n  -botones = false\n\nblock banner\n  +banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)\n    .s-pt-2\n      a(href=\"https://form.asana.com?hash=31f9f176c441c66d609b556604bcdedd200b3712c944519a869686a6fb11ca4c&id=1189924623721081\" target=\"_blank\").button.blue-500 ⚡ Envíanos tu caso\nblock main\n  main.main-section\n    .ed-grid.lg-grid-3.rows-gap.l-section\n        -for (var i = 0; i < casos.length ; i++)\n          -var caso = casos[i]\n          +card(caso.img, caso.title, caso.subtitle, caso.description, caso.url, caso.user, caso.imageUser, caso.linkUser)\n    .ed-grid.s-center\n      h3 ¿Quieres que tu sitio sea parte de esta página?\n      div\n        a(href=\"https://form.asana.com?hash=31f9f176c441c66d609b556604bcdedd200b3712c944519a869686a6fb11ca4c&id=1189924623721081\" target=\"_blank\").button.blue-500 ⚡ Envíanos tu caso\n"
  },
  {
    "path": "src/pug/pages/changelog/index.pug",
    "content": "extends ../../config/template\ninclude ../../includes/banner\nappend config\n  -title = \"EDgrid | Changelog\"\n  -description = \"Registro de cambios que ha tenido la librería EDgrid.\"\n  -ogUrl = \"/funciones.html\"\n\n  -img = \"/assets/img/docs-banner.jpg\"\n  -titleBanner = \"Changelog\"\n  -descriptionBanner = \"Lanzamientos importantes de EDgrid\"\n  -clase = \"grey-700\"\n  -boton = false\n  -botonClass= \"\"\n  -botonUrl=\"\"\n  -botonText =\"\"\n  -botones = false\n\nblock banner\n  +banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)\n\nblock main\n  .ed-grid.lg-grid-6\n    .lg-cols-4.lg-x-2\n      ul.data-list\n        li.s-column.s-cross-start\n          .container.s-column\n            .s-main-justify\n              span.s-mb-1.strong Actual (v 3.0)\n              a(href=\"https://github.com/escueladigital/EDgrid/archive/master.zip\" itemprop=\"url\" target=\"_blank\").button.small.icon-download.space Descargar versión\n            ul.small.s-pl-0\n              li - CSS Grid para crear layouts\n              li - Versión desarrollo para CSS grid\n              li - Modo dev en hover para CSS grid y flexbox\n              li - Correcciones en clases de alineación\n              li - Se eliminó el componente Menu (pasó a ser legacy)\n              li - Corrige error en los .ed-container con la clase .full\n              li - Prototipado y prototipado avanzado\n              li - Sección de componentes creados con EDgrid\n              li - CDN para a versión CSS\n              li - Modifica estructura de archivos del core principal\n              li - Mejoras en código en general\n        li\n          p\n            span.strong v2.1.6 (Mayo 2017)\n            br\n            span.small Agrega CSS grid y resuelve varios bugs menores.\n          a(href=\"https://github.com/escueladigital/EDgrid/archive/v2.0.2.zip\" itemprop=\"url\" target=\"_blank\").button.small.icon-download.space Descargar versión\n        li\n          p\n            span.strong v2.0 (3 dic 2016)\n            br\n            span.small Cambia su enfoque al de librería (pretendía ser un framework) en versión Sass y CSS. Permite usar mixins que compilano solo el código necesario, además de activar y desactivar componentes.\n          a(href=\"https://github.com/escueladigital/EDgrid/releases/tag/v2.0.0\" itemprop=\"url\" target=\"_blank\").button.small.icon-download.space Descargar versión\n        li\n          p\n            span.strong v1.2 (26 sep 2015)\n            br\n            span.small Se cambia floats por flexbox. Se usan las clases <code>.ed-container</code> y <code>.ed-item</code> en remplazo de <code>.grupo</code> y <code>.caja</code>\n          a(href=\"https://github.com/escueladigital/EDgrid/releases/tag/1.2\" itemprop=\"url\" target=\"_blank\").button.small.icon-download.space Descargar versión\n        li\n          p\n            span.strong v1.0 (19 abr 2015)\n            br\n            span.small Uso de floats, clases <code>.grupo</code> y <code>.caja</code>\n          a(href=\"https://github.com/escueladigital/EDgrid/releases/tag/v1.0\" itemprop=\"url\" target=\"_blank\").button.small.icon-download.space Descargar versión\n"
  },
  {
    "path": "src/pug/pages/creditos/index.pug",
    "content": "extends ../../config/template\ninclude ../../includes/banner\ninclude ../../includes/collaborator\nappend config\n  -title = \"EDgrid | Créditos\"\n  -description = \"Créditos de quien realizo la librería, colaboro desarrollando el portal.\"\n  -ogUrl = \"/creditos.html\"\n\n  -img = \"/assets/img/docs-banner.jpg\"\n  -titleBanner = \"Créditos\"\n  -descriptionBanner = \"Gente que ha ayudado a construir la librería.\"\n  -clase = \"dark-color\"\n  -boton = false\n  -botonClass= \"\"\n  -botonUrl=\"\"\n  -botonText =\"\"\n  -botones = false\n\nblock banner\n  +banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)\n    p.s-opacity-8.s-mb-0 ¿Quieres ser uno de ellos?\n    .s-pt-2\n      a(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\").button.blue-500 😼 Colabora en EDgrid\n\nblock main\n  .ed-grid\n    .s-to-center.s-65\n      main.ed-grid.m-grid-2.lg-grid-3.row-gap.l-section\n        +collaborator(\"Álvaro Felipe\", \"CEO de EDteam\", \"https://www.linkedin.com/in/alvarofelipe/\", \"/assets/img/people/alvaro-felipe.jpg\")\n        +collaborator(\"Alexis Mora Angulo\", \"UX Designer\", \"https://twitter.com/Jopzik\", \"/assets/img/people/alexis-mora.jpg\")\n        +collaborator(\"Carlos Cuatin\", \"Frontend Developer\", \"https://github.com/carloscuatin\", \"/assets/img/people/carlos-cuatin.jpg\")\n        +collaborator(\"Camilo Rodríguez\", \"Web Developer\", \"https://github.com/aeroxmotion\", \"/assets/img/people/camilo-rodirguez.png\")\n        +collaborator(\"Daniel Romero\", \"Backend Developer\", \"https://github.com/danielromeroauk\", \"/assets/img/people/daniel-romero.jpg\")\n        +collaborator(\"Franco Correa\", \"Web Developer\", \"https://github.com/francocorreasosa\", \"/assets/img/people/franco-correa.jpg\")\n        +collaborator(\"Ernesto Graterol\", \"UI Designer\", \"https://github.com/Revod\", \"/assets/img/people/ernesto-graterol.png\")\n        +collaborator(\"Jose Daniel Posso Garcia\", \"Developer\", \"https://github.com/daniel7byte\", \"/assets/img/people/jose-daniel.png\")\n        +collaborator(\"Alex Andrei\", \"Frontend Developer\", \"https://www.linkedin.com/in/alex-andrei/\", \"/assets/img/people/alex-andrei.jpg\")\n        +collaborator(\"Johelyn Cordovao\", \"Web Designer\", \"https://github.com/AKUmajinn\", \"/assets/img/people/johelyn.jpg\")\n  .ed-grid.s-center\n    h3 ¿Quieres ser parte de esta página?\n    div\n      a(href=\"https://github.com/escueladigital/EDgrid\" target=\"_blank\").button.blue-500 😼 Colabora en EDgrid\n"
  },
  {
    "path": "src/pug/pages/documentacion/alineacion.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Base (CSS/Sass)\"\n  -description = \"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"\n  -ogUrl = \"/base.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/alineacion.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/banner.pug",
    "content": "extends ../../config/template\ninclude ../../includes/main-banner\nappend config\n  -title = \"EDgrid | Banner\"\n  -description = \"Componente banner creado con el prototipado de EDgrid.\"\n  -ogUrl= \"/banner.html\"\n  -docsMenu = true\n\nblock banner\n  section.main-banner.background.grey-800.l-section\n    .ed-grid.lg-grid-2.row-gap.s-gap-2.m-gap-4\n      .s-column.s-main-center.lg-main-start.lg-cross-start.s-center.lg-left\n        h1.bigger-title\n          span.color.white-color Banner principal #[<br/>] #[span.color.blue-400 de dos columnas] #[<br/>] con EDgrid\n        p.white-color.s-opacity-8 Creado utilizando los componentes de columnas. Totalmente responsive.\n        .s-main-center\n          a.button.blue-500.s-mr-2.s-mb-2.m-mb-0 Botón 1\n          a.button.ghost.blue-400.s-mb-2.m-mb-0 Botón 2\n      div\n        .img-container.s-ratio-16-9\n          img.s-radius-1(src=\"/assets/img/og-image.jpg\")\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    :markdown-it\n      ## Banner de dos columnas\n      Al copiar el código del componente banner usted sólo conseguirá la estructura de éste para que coloque el contenido que desee.\n\n      Los estilos empleados en la demostración (como el color de fondo o estilos del texto) provienen de la [guía de estilos](https://ux.ed.team/) de EDteam.\n\n      ```html\n      <section class=\"l-section s-py-4\">\n        <!-- Separación del contenido en columnas -->\n        <div class=\"ed-grid lg-grid-2 row-gap s-gap-2 m-gap-4\">\n          <!-- Contenido de la columna 1 -->\n          <div class=\"s-column s-main-center lg-main-start lg-cross-start s-center lg-left\">\n            <h1>Banner principal de dos columnas con EDgrid</h1>\n            <p>Creado utilizando los componentes de columnas. Totalmente responsive.</p>\n            <!-- Botones -->\n            <div class=\"s-main-center\">\n              <a class=\"button s-mr-2 s-mb-2 m-mb-0\">Botón 1</a>\n              <a class=\"button s-mb-2 m-mb-0\">Botón 2</a>\n            </div>\n          </div>\n          <!-- Contenido de la columna 2 -->\n          <div>\n            <div class=\"img-container s-ratio-16-9\">\n              <img class=\"s-radius-1\" src=\"/assets/img/og-image.jpg\">\n            </div>\n          </div>\n        </div>\n      </section>\n      ```\n\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/base.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Base (CSS/Sass)\"\n  -description = \"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"\n  -ogUrl = \"/base.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/base.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/breakpoints.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | CSS\"\n  -description = \"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"\n  -ogUrl= \"documentacion/breakpoints.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/breakpoints.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/cards.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Cards (Sass/CSS)\"\n  -description = \"Componente card creado con el prototipado de EDgrid.\"\n  -ogUrl = \"/cards.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/cards.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/distribucion.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Distribucion\"\n  -description = \"Distrubción y dirección de los elementos\"\n  -ogUrl = \"/docs/distribucion.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/distribucion.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/estructura.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Estructura\"\n  -description = \"La siguiente es la estructura de archivos de ed-grid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)\"\n  -ogUrl= \"/estructura.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/estructura.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/flexbox-helpers.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Flexbox (CSS/Sass)\"\n  -description = \"El core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece mcuhas utilidades extra para aprovechar el poder de flexbox. Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.\"\n  -ogUrl = \"/documentacion/flexbox.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/docs/flexbox.md\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/funciones.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Funciones (Sass)\"\n  -description = \"ed-grid incluye dos funciones útiles en el RWD: em($px) y rem($px). Estas funciones convierten un número en px a em o rem respectivamente. Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles\"\n  -ogUrl = \"/documentacion/funciones.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/funciones.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/grids.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Grid (CSS/Sass)\"\n  -description = \"La principal diferencia de ed-grid 2 con su versión anterior es que podemos decidir qué componentes compilar a CSS. En la versión 1, todo el CSS era compilado generando código innecesario. Si usted desea puede trabajar solo con la versión CSS de ed-grid 2, y añadir clases al código HTML para construir su layout según el flujo de trabajo recomendado. El CSS de ed-grid 2 se clasifica en 2 grupos:\"\n  -ogUrl= \"/grid.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/grids.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/helpers.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Helpers (CSS/Sass)\"\n  -description = \"Los helpers son ayudas al trabajo que fueron llamadas utilidades en la versión anterior de ed-grid. Se pueden usar con CSS (cssHelpers) o Sass. Alineación de elementos. Se aplica al mismo elemento que se quiere alinear (no a su contenedor). Tenga en cuenta que se usa float y se requiere declarar un ancho para que funcione bien. Puede declarar anchos usando clases al igual que con los ed-item.\"\n  -ogUrl = \"/documentacion/helpers.html\"\n  -docsMenu = true\n\nblock main\n    main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n      include:markdown-it(html) /src/md/helpers.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/index.pug",
    "content": "extends ../../config/template\ninclude ../../includes/banner\nappend config\n  -title = \"EDgrid | Documentación\"\n  -description = \"Puede usar EDgrid con CSS y Sass.\"\n  -ogUrl= \"/documentacion\"\n  -docsMenu = true\n\n  -img = \"/assets/img/docs-banner.jpg\"\n  -titleBanner = \"Documentación\"\n  -descriptionBanner = \"EDgrid es muy fácil de aprender. En una hora ya lo estará usando en sus proyectos\"\n  -clase = \"dark-color\"\n  -boton = false\n  -botonClass= \"\"\n  -botonUrl=\"\"\n  -botonText =\"\"\n  -botones = false\n\nblock banner\n  +banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    :markdown-it\n      # Comenzar con EDgrid\n      EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente.\n\n      EDgrid es un proyecto de [EDteam](https://ed.team) usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.\n\n      Si encuentra algun error o tiene sugerencias de mejoras, [puede escribirlas en Github](https://github.com/escueladigital/EDgrid/issues).\n\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/instalacion.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Base (CSS/Sass)\"\n  -description = \"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"\n  -ogUrl = \"/documentacion/instalacion.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    :markdown-it\n\n      # Comenzar con EDgrid\n      EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente. En una hora ya lo estará usando en sus proyectos.\n\n      Creado por [EDteam](https://ed.team) y usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.\n\n      Si encuentra algun error o tiene sugerencias de mejoras, [puede escribirlas en Github](https://github.com/escueladigital/EDgrid/issues).\n\n      ## Instalación\n\n      Puede usar EDgrid con [Sass](https://ed.team/cursos/sass) (recomendado) y [CSS](https://ed.team/cursos/css).\n\n      ### Instalación de versión Sass\n\n      Para instalar la versión Sass puede utilizar npm:\n\n      ```bash\n      npm install --save-dev ed-grid\n      ```\n\n      También puede usar yarn:\n\n      ```bash\n      yarn add ed-grid --dev\n      ```\n\n      Posteriormente, impórtelo en su estructura de archivos Sass\n\n      ```scss\n      @import \"~ed-grid/ed-grid\"\n      ```\n\n      ### Instalación de versión CSS\n      Descargue la última [versión CSS]() de EDgrid e impórtela en su proyecto como cualquier otra hoja de estilos. También puede usar del CDN para importaciones rápidas.\n\n      ```HTML\n      <link href=\"https://unpkg.com/ed-grid@3.0.0/src/css/ed-grid.min.css\" rel=\"stylesheet\">\n      ```\n\n      \\* *Al usar EDgrid en su versión CSS no podrá [personalizar la librería](/documentacion/personalizar.html), utilizar el [prototipado avanzado](/documentacion/prototipado-avanzado.html) y compilar sólo el código necesario, entre otras opciones que sólo se pueden hacer con la versión de Sass*\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/layout-css-grid.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Flujo de trabajo (CSS/Sass)\"\n  -description = \"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"\n  -ogUrl= \"/flujo.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/layout-css-grid.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/layout-flexbox.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Flujo de trabajo (CSS/Sass)\"\n  -description = \"Sass o CSS Puede usar ed-grid con CSS (añadiendo el archivo css e insertando clases en html) o con Sass (mixins preconstruidos). Se recomienda Sass para aprovechar todo el potencial de ed-grid. A lo largo de esta documentación se indicará si nos referimos al trabajo con Sass o CSS.\"\n  -ogUrl= \"/flujo.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/layout-flexbox.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/layout.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Base (CSS/Sass)\"\n  -description = \"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"\n  -ogUrl = \"/base.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/layout.md\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/mediaqueries.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Mediaqueries (Sass)\"\n  -description = \"Con ed-grid escribir media queries es tan sencillo como usar cualquiera de estos tres mixins from($bp) to($bp) fromTo($from,$to) Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,l,xl o números especificados en px, em o rem. from($bp) remplaza al antiguo desde($size) significa que los estilos se aplicarán desde ese breakpoint en adelante.\"\n  -ogUrl= \"/mediaqueries.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/mediaqueries.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/menu-responsive.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Menú responsive (Sass/CSS)\"\n  -description = \"Componente menú responsive creado con EDgrid.\"\n  -ogUrl = \"/menu-responsive.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/menu-responsive.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/menus.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Uso con CSS (cssCore)\"\n  -description = \"Con ed-grid puede crear menus responsive fácilmente. Basta con crear una lista ul y los enlaces dentro de cada li. Uso con CSS (cssCore) Añada la clase ed-menu al ul de nivel superior. Añada la clase n-horizontal siendo n el breakpoint (s,m,l,xl) desde el cual el menú será horizontal. Añada alguna de las tres clases para cambiar el estilo: default nav-bar button-bar\"\n  -ogUrl = \"/menus.html\"\n  -docsMenu = true\n\nblock main\n    main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n      include:markdown-it(html) ../../../md/docs/menu.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/modo-dev.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Modo dev\"\n  -description = \"El modo dev (modo desarrollo en versiones anteriores) es una característica exclusiva de ed-grid (no existente en otros frameworks) que nos permite saber el breakpoint actual y los componentes del layout (ed-container y ed-item). Al activarlo el navegador muestra el layout de la siguiente manera: En la parte superior en una franja azul se muestra el breakpoint actual y la leyenda de colores para el ed-container y los ed-item. El layout de la página es coloreado de la siguiente manera:\"\n  -ogUrl= \"/modo-dev.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/modo-dev.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/offset.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Offset (Sass/CSS)\"\n  -description = \"Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries. Uso con CSS (cssCore) Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.\"\n  -ogUrl = \"/documentacion/offset.html\"\n  -docsMenu = true\n\nblock main\n    main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n      include:markdown-it(html) ../../../md/docs/offset.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/personalizar.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Configurar (Sass)\"\n  -description = \"Si va a trabajar con Sass lo primero es importarlo en su proyecto. @import 'path/ed-grid/ed-grid' Sin embargo, ed-grid posee un archivo config.scss que define las variables y que pueden sobreescribirse (antes de la importación). Recomendamos fijarse en estas tres variables\"\n  -ogUrl= \"/configurar.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/personalizar.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/prototipado-avanzado.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Prototipado avanzado (Sass/CSS)\"\n  -description = \"Cree su propio prototipado y vaya más allá de lo que ya tiene EDgrid.\"\n  -ogUrl = \"/prototipado-avanzado.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/prototipado-avanzado.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/prototipado.pug",
    "content": "extends /src/pug/config/template\nappend config\n  -title = \"EDgrid | Base (CSS/Sass)\"\n  -description = \"Los estilos base normalizan los elementos HTML para Responsive Web Design.\"\n  -ogUrl = \"/base.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/prototipado.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/ratios.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Ratios (Sass/CSS)\"\n  -description = \"Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos.\"\n  -ogUrl = \"/ratios.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/ratios.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/sass.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Sass\"\n  -description = \"Si va a trabajar con Sass, tenga en cuenta que como se explicó aquí, ed-grid genera dos grupos de código css: cssCore no recomendado si va a trabajar con Sass (desactivado por defecto para Sass) cssHelpers recomendado si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si es un usuario avanzado) Para activar o desactivar estos componentes redefina las variables $cssCore y $cssHelpers antes de importar ed-grid.\"\n  -ogUrl= \"/sass.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    :markdown-it\n      # Comprender EDgrid Sass\n\n      Si va a trabajar con Sass, tenga en cuenta que [como se explicó aquí](/documentacion/css.html), EDgrid genera dos grupos de código css:\n\n      * `cssCore` Clases utilitarias no recomendadas si va a trabajar con Sass (desactivado por defecto para Sass)\n      * `cssHelpers` Clases utilitarias recomendadas si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si desea)\n\n      Si es un usuario avanzado puede activar o desactivar estos componentes redefiniendo las variables `$cssCore` y `$cssHelpers` antes de importar EDgrid. Estas variables son booleans.\n\n      Por ejemplo, si desea construir todo su layout con Sass, sin usar clases en HTML, puede desactivar ambos:\n\n      ```scss\n      $cssCore: false;\n      $cssHelpers: false;\n      @import \"path/ed-grid/ed-grid\"\n      ```\n\n      Sin embargo, si usa la configuración recomendada, importe EDgrid sin preocuparse de estos valores.\n\n      ```scss\n      @import \"~ed-grid/ed-grid\";\n      ```\n\n"
  },
  {
    "path": "src/pug/pages/documentacion/skeleton.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Skeleton (Sass/CSS)\"\n  -description = \"Componente skeleton creado con el prototipado de EDgrid.\"\n  -ogUrl = \"/skeleton.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) ../../../md/skeleton.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/videos.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Videos responsive (Sass/CSS)\"\n  -description = \"ed-grid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint. El video siempre se expandirá al 100% del ancho de su contenedor. Uso con CSS (cssHelpers) Añada la clase ed-video al contenedor de su video (que puede ser un iframe elemento video o cualquier elemento con la clase .video)\"\n  -ogUrl = \"/videos.html\"\n  -docsMenu = true\n\nblock main\n    main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n      include:markdown-it(html) ../../../md/docs/videos.md\n"
  },
  {
    "path": "src/pug/pages/documentacion/visibilidad.pug",
    "content": "extends ../../config/template\nappend config\n  -title = \"EDgrid | Visibilidad\"\n  -description = \"El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará. Uso con CSS (cssHelpers) Use las clases from-bp o to-bp donde bp es un breakpoint válido de ed-grid (s,m,l,xl) from-bp hará al elemento visible a partir del breakpoint especificado e invisible por debajo de él. to-bp hará al elemento visible por debajo del breakpoint especificado e invisible por encima de él.\"\n  -ogUrl= \"/visibilidad.html\"\n  -docsMenu = true\n\nblock main\n  main(itemscope itemprop=\"mainContentOfPage\" role=\"main\")\n    include:markdown-it(html) /src/md/visibilidad.md\n"
  },
  {
    "path": "src/pug/pages/index.pug",
    "content": "extends ../config/template\ninclude ../includes/banner\ninclude  ../includes/main-banner\ninclude ../includes/feature-item\nappend config\n  -title = \"EDgrid - Libreria Sass/CSS de EDteam para construir layouts web responsive\"\n  -description = \"Libreria Sass/CSS de EDteam para construir layouts web responsive\"\n  -ogUrl = \"/index.html\"\n\n  -img = \"/assets/img/docs-banner.jpg\"\n  -titleBanner = \"EDgrid\"\n  -descriptionBanner = \"Libreria Sass/CSS de EDteam para construir layouts web responsive\"\n  -clase = \"\"\n  -boton = false\n  -botonClass= \"\"\n  -botonUrl=\"\"\n  -botonText =\"\"\n  -botones = true\n\nblock banner\n  //+banner(img, titleBanner, descriptionBanner, clase, boton, botonClass, botonUrl, botonText, botones)\n  +main-banner()\nblock main\n  main\n    .ed-grid\n        h1.s-to-center.s-center.l-section El responsive web design <br/> nunca fue tan sencillo\n        .main-features.ed-grid.m-grid-2.lg-grid-3.row-gap\n          +main-feature(\"assets/img/logo/EDgrid-logo.svg\", \"¿Qué es?\", \"EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.\")\n          +main-feature(\"assets/img/utils/layout.svg\", \"Solo Layout\", \"No añade botones, tipografías, colores ni otro estilo visual. Es layout puro para maquetar que no genera conflictos. Además EDgrid en su versión Sass compila solo el código necesario sin css extra.\")\n          +main-feature(\"assets/img/utils/help.svg\", \"Open Source\", \"Completamente gratuito y de código abierto (GPL2). Puede usarlo en proyectos comerciales, descargarlo y estudiar el código y crear sus propias versiones derivadas sin pagar una licencia.\")\n          +main-feature(\"assets/img/utils/grid.svg\", \"CSS Grid y Flexbox\", \"EDgrid usa las características más modernas de CSS: Flexbox y Grid. Además incluye fallbacks para Grid en navegadores que todavía no lo soporten.\")\n          +main-feature(\"assets/img/utils/rwd.svg\", \"Adiós columnas\", \"¿Cansado de las 12 columnas? Con EDgrid puedes crear layouts con completa libertad sin amarrarte a usar siempre doce columnas.\")\n          +main-feature(\"assets/img/utils/bug.svg\", \"Debug\", \"El modo dev se activa con una sola línea de código y te muestra la construcción del layout por debajo del capó. Así podrás corregir problemas con facilidad.\")\n\n"
  },
  {
    "path": "src/scss/ed-grid/components/_alignment.scss",
    "content": "/* Alineación de contenido */\n// Recorrer los breakpoints\n@each $size in $sizes {\n  // Lista de alineaciones\n  $aligns : left, center, right;\n  // Crea las alineaciones por cada breakpoint\n  @include from($size) {\n    // Crea las alineaciones de contenido\n    @each $align in $aligns {\n      .#{$size}-#{$align} {\n        text-align : $align;\n      }\n    }\n    // Crea las alineaciones de bloques\n    .#{$size}-to-left {\n      &[class*=button] { display: table }\n      margin-left  : 0;\n      margin-right : auto;\n\n    }\n    .#{$size}-to-center {\n      &[class*=button] { display: table }\n      margin-left  : auto;\n      margin-right : auto;\n    }\n    .#{$size}-to-right {\n      &[class*=button] { display: table }\n      margin-right : 0;\n      margin-left  : auto;\n    }\n\n    .#{$size}-block-left {\n      display      : block;\n      margin-left  : 0;\n      margin-right : auto;\n    }\n\n    .#{$size}-block-center {\n      display      : block;\n      margin-left  : auto;\n      margin-right : auto;\n    }\n\n    .#{$size}-block-right {\n      display      : block;\n      margin-right : 0;\n      margin-left  : auto;\n    }\n  }\n}\n\n// Order\n@each $size in $sizes {\n  @include from ($size) {\n    @for $i from 1 through $max-grid-columns {\n      .#{$size}-order-#{$i} {\n        order : $i;\n      }\n    }\n  }\n}\n\n// Flex aignments map\n// Used for build aligments properties in breakpoints\n$flex-alignments : (\n  row: (\n    flex-direction: row\n  ),\n  row-reverse: (\n    flex-direction: row-reverse\n  ),\n  column: (\n    flex-direction: column\n  ),\n  column-reverse: (\n    flex-direction: column-reverse\n  ),\n  main-start: (\n    justify-content: flex-start\n  ),\n  main-center: (\n    justify-content: center\n  ),\n  main-end: (\n    justify-content: flex-end\n  ),\n  main-justify: (\n    justify-content: space-between\n  ),\n  main-distribute: (\n    justify-content: space-evenly\n  ),\n  cross-baseline: (\n    align-items: baseline,\n    align-content: baseline\n  ),\n  cross-start: (\n    align-items: flex-start,\n    align-content: flex-start\n  ),\n  cross-center: (\n    align-items: center,\n    align-content: center\n  ),\n  cross-end: (\n    align-items: flex-end,\n    align-content: flex-end\n  )\n);\n\n/* Crea selectores agrupados para propiedades básicas de flexbox*/\n// Recorre los breakpoints\n@each $size in $sizes {\n  // Selector inicial (placeholder)\n  $selectors : '.flex';\n  // Recorre el mapa de selectores\n  @each $selector, $property in $flex-alignments {\n    // Crea el selector actual\n    $selector : \".#{$size}-#{$selector}\";\n    // Concatena el selector actual a la lista total de selectores (con coma)\n    $selectors : append($selectors, unquote($selector), comma);\n  }\n  @include from($size) {\n    #{$selectors} {\n      display   : flex;\n      flex-wrap : wrap;\n    }\n  }\n}\n\n/*Crea selectores de flex alignment en todos los breakpoints*/\n\n// Recorre los breakpoints\n@each $size  in $sizes {\n  @include from($size) {\n    // Recorre el mapa de selectores\n    @each $selector, $property in $flex-alignments {\n      // Construye el selector\n      .#{$size}-#{$selector} {\n        // Recorre el submapa de propiedades y valores\n        @each $prop, $value in $property {\n          // Imprime cada propiedad y valor\n          #{$prop} : $value;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_base.scss",
    "content": "// RWD Bases\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin      : 0;\n  font-family : sans-serif;\n}\n\n// Imágenes responsive\nimg {\n  max-width : 100%;\n  height    : auto;\n}\n\na {\n  text-decoration : none;\n\n  &:hover { text-decoration : underline }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_core-flexbox.scss",
    "content": "// placeholder para ed-container\n%ed-container {\n  display      : flex;\n  flex-wrap    : wrap;\n  max-width    : var(--max-width);\n  margin-left  : auto;\n  margin-right : auto;\n  width        : 100%;\n}\n\n// placeholder para ed-item\n%ed-item {\n  margin        : 0;\n  padding-left  : $gap / 2;\n  padding-right : $gap / 2;\n}\n\n// Hace que un elemento siempre mida el 100% del ancho disponible\n@mixin full {\n  max-width : 100%;\n}\n\n// mixin para crear un ed-container\n@mixin edContainer {\n  @extend %ed-container;\n\n  @include dev-container;\n}\n\n@mixin ed-container {\n  @extend %ed-container;\n\n  @include dev-container;\n\n  &.full {\n    @include full;\n  }\n\n}\n\n@mixin edItemWidth($currentBp, $prevBp, $coreBp){\n  // Si el tamaño actual es diferente al previo\n  // asignará el ancho en porcentaje\n  @if $currentBp != $prevBp{\n    @if $currentBp < 1 {\n      @include from($coreBp){\n        width : $currentBp * 100%;\n      }\n    }\n    @else {\n      @include from($coreBp){\n        width : $currentBp * 1%;\n      }\n    }\n  }\n}\n\n// mixin para crear un ed-item\n@mixin edItem($s:100,$m:$s,$l:$m,$xl:$l) {\n  @extend %ed-item;\n\n  @include dev-item;\n\n  // calcular el ancho para el primer breakpoint\n  // por defecto es 100% y se convertirá al porcentaje adecuado\n  // según el valor que se le pase\n  @if $s == 100 {\n    width : 100%;\n  } @else if $s < 1 {\n    width : $s * 100%;\n  } @else {\n    width : $s * 1%;\n  }\n\n  // widths for others breakpoints\n  // anchos para los demás breakpoints\n  @include edItemWidth($m, $s, m); //medium\n  @include edItemWidth($l, $m, l); //large\n  @include edItemWidth($xl, $l, xl); //xlarge\n}\n\n@mixin ed-item($s:100,$m:$s,$l:$m,$xl:$l) {\n  @extend %ed-item;\n\n  @include dev-item;\n\n  // calcular el ancho para el primer breakpoint\n  // por defecto es 100% y se convertirá al porcentaje adecuado\n  // según el valor que se le pase\n  @if $s == 100 {\n    width : 100%;\n  } @else if $s < 1 {\n    width : $s * 100%;\n  } @else {\n    width : $s * 1%;\n  }\n\n  // widths for others breakpoints\n  // anchos para los demás breakpoints\n  @include edItemWidth($m, $s, m); //medium\n  @include edItemWidth($l, $m, l); //large\n  @include edItemWidth($xl, $l, xl); //xlarge\n}\n\n// crear un ed-container\n.#{$container} { @include ed-container() }\n\n// crear un ed-item\n.#{$item} {\n  @include ed-item;\n\n  // un ed-item a la vez puede ser ed-container\n  // para evitar anidaciones innecesarias\n  &.#{$container}{\n    padding-left : 0;\n    padding-right : 0;\n  }\n}\n\n// Breakpoints\n@each $size in $sizes{\n  @include from($size) {\n    @for $i from 1 through 20 {\n      .#{$size}-#{$i*5},\n      .#{$item}.#{$size}-#{$i*5} {\n        width : $i * 5%;\n      }\n    }\n    @each $fraction in $fractions {\n      @for $i from 1 through $fraction {\n        .#{$size}-#{$i}-#{$fraction},\n        .#{$item}.#{$size}-#{$i}-#{$fraction} {\n          width : (100% / $fraction) * $i\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_core-grid.scss",
    "content": "// Calcula ancho de cada columna\n@mixin grid-column-width($i) {\n  // La cantidad de gaps es igual a la cantidad de columnas menos 1\n  $n : #{$i - 1};\n  // Formula para calcular el ancho de cada columna\n  $column-width : calc((100% - var(--gap) * #{$n}) / #{$i});\n  // Define las columnas en el contenedor\n  grid-template-columns : repeat($i, $column-width);\n}\n\n// gap para los EDgri containers con brakpoints\n// Probando cómo funciona la opción de prototipado\n@for $i from 0 through 4 {\n  @include prototype(gap-#{$i}, --gap, #{$l-unit * $i}, '.ed-grid');\n}\n\n.#{$grid-container} {\n  display               : grid;\n  grid-template-columns : 100%;\n  column-gap            : var(--gap);\n\n  @for $i from 0 through 4 {\n    &.gap-#{$i} {\n      --gap: #{$l-unit * $i};\n    }\n  }\n\n  // Evita que en tamaños moviles los items queden pegados a los lados\n  width                 : calc(100% - 2rem);\n  margin-left           : 1rem;\n  margin-right          : 1rem;\n  max-width             : var(--max-width);\n\n  // Por sobre el max width el container se centra\n  @include from($max-width) {\n    width        : 100%;\n    margin-left  : auto;\n    margin-right : auto;\n  }\n\n  // Agrega separación vertical entre filas\n  &.row-gap,\n  &.rows-gap {\n    row-gap : var(--gap);\n  }\n\n  // Para containers hijos de otro container o con clase full\n  // se elimninan los márgenes y se ocupa todo_ el ancho disponible\n  .#{$grid-container},\n  &.full {\n    width        : 100%;\n    max-width    : 100%;\n    margin-right : 0;\n    margin-left  : 0;\n  }\n\n  // Fuerza a ed-grid a tomar tamaños y alineaciones con clases\n  // Es por conflicto con la declaracion anterior, toca revisar\n  @each $size in $sizes {\n    @include from($size) {\n      @for $i from 1 through 20 {\n        .#{$grid-container}.#{$size}-#{$i*5},\n        .#{$grid-container} .#{$grid-container}.#{$size}-#{$i*5} {\n          width : $i * 5%;\n        }\n      }\n\n      .#{$grid-container}.#{$size}-to-center,\n      .#{$grid-container} .#{$grid-container}.#{$size}-to-center {\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .#{$grid-container}.#{$size}-to-right,\n      .#{$grid-container} .#{$grid-container}.#{$size}-to-right {\n        margin-left: auto;\n        margin-right: 0;\n      }\n\n      .#{$grid-container}.#{$size}-to-left,\n      .#{$grid-container} .#{$grid-container}.#{$size}-to-left {\n        margin-left: 0;\n        margin-right: auto;\n      }\n    }\n  }\n\n  // Define columnas en containers e items por breakpoint\n  @each $size, $screen-size in $breakpoints {\n    // Estilos por breakpoint\n    @include from($size) {\n      // Recorre la cantidad de columnas\n      @for $i from 1 through $max-grid-columns {\n        // Columnas en el contenedor\n\n        // Una columna\n        @if $i == 1 {\n          &.cols-#{$size}-1,\n          &.#{$size}-grid-1 {\n            grid-template-columns : 100%;\n          }\n        }\n\n        // Más de una columna\n        @if $i > 1 {\n          &.cols-#{$size}-#{$i},\n          &.#{$size}-grid-#{$i} {\n            @include grid-column-width($i);\n          }\n        }\n        // Columnas en los items\n        > .span-#{$size}-#{$i},\n        > .#{$size}-cols-#{$i} {\n          grid-column-end : span $i;\n        }\n\n        // rows en los items\n        > .#{$size}-rows-#{$i} {\n          grid-row-end : span $i;\n        }\n\n        // Inicio de columna en items\n        > .#{$size}-x-#{$i} {\n          grid-column-start : $i;\n        }\n\n        // Inicio de fila en items\n        > .#{$size}-y-#{$i} {\n          grid-row-start : $i;\n        }\n      }\n    }\n  }\n\n// Hack para las alineaciones\n// Ahora un edgrid puede alinear todos sus hijos\n &[class*=\"-main-\"],\n &[class*=\"-cross-\"] {\n   display: grid;\n }\n\n\n  @include dev-container;\n\n  > * {\n    @include dev-item;\n  }\n\n}\n\n"
  },
  {
    "path": "src/scss/ed-grid/components/_dev.scss",
    "content": "// altura de los pseudoelementos que imprimiran clases\n$info-height    : rem(20px);\n$info-font-size : $info-height * 0.6;\n\n%info {\n  content     : attr(class);\n  font-style  : italic;\n  font-size   : $info-font-size;\n  font-weight : normal;\n\n  z-index     : 1;\n  right       : 0;\n  position    : absolute;\n\n  display     : table;\n  width       : 100%;\n  padding     : 0 em(5px);\n  height      : $info-height;\n  line-height : $info-height;\n}\n\n// estilos para los containers en modo dev\n@mixin dev-container-style {\n  $dev-color    : tomato;\n  padding-top   : $info-height;\n  margin-bottom : 10px;\n  outline       : 1px solid $dev-color;\n  position      : relative;\n\n  .#{$container},\n  .#{$grid-container} { margin-bottom : 0 }\n\n  &:before {\n    @extend %info;\n    top        : 0;\n    background : rgba($dev-color, .3);\n    color      : $dev-color;\n  }\n}\n\n@mixin dev-container{\n  @if $dev == true {@include dev-container-style}\n  @else if $dev-hover == true {&:hover {@include dev-container-style}}\n}\n\n// estilos para los items en modo dev\n@mixin dev-item-style {\n  $dev-color       : steelblue;\n  position         : relative;\n  padding-bottom   : $info-height;\n  background-color : rgba($dev-color, 0.1);\n  outline          : 1px solid $dev-color;\n  background-clip  : content-box;\n\n  &:before {\n    @extend %info;\n    background : rgba($dev-color, .8);\n    color      : #FFF;\n    bottom     : 0;\n  }\n}\n\n@mixin dev-item {\n  @if $dev == true {@include dev-item-style}\n  @else if $dev-hover == true {&:hover {@include dev-item-style}}\n}\n\n// Mixin para modo desarrollo\n@mixin dev-mode {\n  margin   : 0 !important;\n  position : relative;\n  top      : 66px;\n\n  // imprimir información del breakpoint\n  &:before {\n    @extend %info;\n    position    : fixed;\n    background  : steelblue;\n    color       : #FFF;\n    font-size   : $info-height * 0.7;\n    text-align  : center;\n    line-height : 36px;\n    height      : 36px;\n    top         : 0;\n  }\n\n  @each $size, $screen-size in $breakpoints {\n    @include from($size) {\n      &:before {\n        content : \"ed-grid: size #{$size}, from #{$screen-size} (ed-containers: red, ed-items: blue, yellow)\";\n      }\n    }\n  }\n}\n\n// Incluir el modo dev en body\n@if $dev {\n  body { @include dev-mode }\n}\n\n// CSS\nbody.dev,\nbody.desarrollo {\n  @include dev-mode;\n\n  .ed-container, .ed-grid { @include dev-container-style; }\n\n  .ed-item, .ed-grid > * { @include dev-item-style; }\n\n  &-hover {\n\n    .ed-container, .ed-grid {\n      &:hover {\n        @include dev-container-style;\n      }\n    }\n\n    .ed-item, .ed-grid > * {\n      &:hover {\n        @include dev-item-style;\n      }\n    }\n\n  }\n\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_layout.scss",
    "content": "// SEPARACIONES\n// Use las siguientes clases para crear separaciones verticales armoniosas\n// Las clases cancel-l- cancelan el margin bottom del hermano anterior\n\n.l-block,\n.cancel-l-block,\n.l-section,\n.cancel-l-section,\n.l-big-section,\n.cancel-l-big-section {\n  margin-top : 0;\n}\n\n// Bloque\n.l-block {\n  margin-bottom : var(--vertical-block-space);\n}\n\n.cancel-l-block {\n  margin-top : calc(var(--vertical-block-space) * -1);\n}\n\n// Sección\n.l-section {\n  margin-bottom : calc(var(--vertical-block-space) * 2);\n}\n\n.cancel-l-section {\n  margin-top : calc(var(--vertical-block-space) * -2);\n}\n\n// Big section\n.l-big-section {\n  margin-bottom : calc(var(--vertical-block-space) * 4);\n}\n\n.cancel-l-big-section {\n  margin-top : calc(var(--vertical-block-space) * -4);\n}\n\n// sticky footer\nbody {\n  display        : flex;\n  flex-direction : column;\n  min-height     : 100vh;\n}\n\n.main-footer {\n  margin-top : auto;\n}\n\n// Distribución vertical de contenido\n// Puede sobreescribirlas usando las clases de arriba\n\n// Encabezados\nh1, h2, h3, h4, h5, h6 {\n  margin-top    : 0;\n  margin-bottom : var(--vertical-content-space);\n}\n\nh1 {\n  margin-bottom : calc(var(--vertical-content-space) * 1.5);\n}\n\n// Separación entre secciones de contenido\n// La norma recomienda encerrar cada sección en una etiqueta section\n// Pero en la práctica es dificil conseguirlo siempre así que la presencia\n// De un titulo indica el cambio de sección\np,\nvideo,\nblockquote,\narticle,\nsection,\nform,\nfigure,\niframe,\nul,\nol,\npre,\nhr,\ndl,\naddress,\ntable {\n  margin-top    : 0;\n  margin-bottom : calc(var(--vertical-content-space) * 1.5);\n\n  + h2 {\n    padding-top : calc(var(--vertical-content-space) * 1.5);\n  }\n\n  + h3 {\n    padding-top : var(--vertical-content-space);\n  }\n}\n\n// Eliminar separaciones\n\nul ul,\nol ol,\nul ol,\nol ul {\n  margin-bottom: 0;\n}\n\n// Creación de márgenes y paddings\n@include breakpoints {\n  // Crea cinco niveles de separacion\n  @for $i from 0 through 5 {\n    // Unidad de separación actual\n    $unit : $l-unit * $i;\n    // Valida el cero para evitar devolver 0rem como unidad\n    @if $i == 0 {\n      $unit : 0;\n    }\n    // Valida el 5 para devolver nueva clase y unidad\n    @if $i == 5 {\n      $i : \"05\";\n      $unit: $l-unit * 0.5;\n    }\n\n    // Padding top\n    &-pt-#{$i} {\n      padding-top : $unit;\n    }\n    // Padding left\n    &-pl-#{$i} {\n      padding-left : $unit;\n    }\n    // Padding bottom\n    &-pb-#{$i} {\n      padding-bottom : $unit;\n    }\n    // Padding right\n    &-pr-#{$i} {\n      padding-right : $unit;\n    }\n    // Padding vertical\n    &-py-#{$i} {\n      padding-top    : $unit;\n      padding-bottom : $unit;\n    }\n    // Padding horizontal\n    &-px-#{$i} {\n      padding-left  : $unit;\n      padding-right : $unit;\n    }\n    // Padding total\n    &-pxy-#{$i} {\n      padding : $unit;\n    }\n    // Margin right\n    &-mr-#{$i} {\n      margin-right : $unit;\n    }\n    // Margin bottom\n    &-mb-#{$i} {\n      margin-bottom : $unit;\n    }\n    // Margin bottom (negativo)\n    &-mt-#{$i} {\n      margin-top : $unit * -1;\n    }\n    // Margin top (negativo)\n    &-ml-#{$i} {\n      margin-left : $unit * -1;\n    }\n\n    // Elemento sticky\n    &-sticky-#{$i} {\n      position: sticky;\n      top: calc(var(--header-height) + #{$unit});\n    }\n  }\n  &-sticky-none {\n    position: static;\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_media-queries.scss",
    "content": "/// Devuelve true si el breakpoint es parte del core\n/// @group mq\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint\n/// @example scss\n///    .elemento {\n///      @if isCoreBreakpoint(l) {\n///        $customBp : 720px;\n///        ....\n///      }\n///    }\n@function isCoreBreakpoint($bp){\n  @if map-get($breakpoints,$bp) {\n    @return true\n  } @else {\n    @return false\n  }\n}\n\n/// Devuelve true si el breakpint es válido (em, rem, px)\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint a verificar.\n@function isValidBreakpoint($bp){\n  @if type-of($bp) == number and (unit($bp) == 'px' or unit($bp) == 'em' or unit($bp) == 'rem') {\n    @return true\n  } @else {\n    @return false\n  }\n}\n\n/// Obtiene un breakpoint del core\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint a obtener.\n@function getBp($bp){\n  @return map-get($breakpoints,$bp)\n}\n\n/// Convierte un valor en em o rem a px\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $value - var a convertir a pixeles.\n@function toPx($value){\n  @if type-of($value) == number {\n    @if unit($value) == 'em'{\n      @return ($value / 1em) * 16px;\n    } @else if unit($value) == 'rem'{\n      @return ($value / 1rem) * 16px\n    } @else if unit($value) == 'px' {\n      @return $value;\n    } @else {\n      @error \"La funcion toPx() solo acepta numeros en em o rem o px\"\n    }\n  } @else {\n    @error \"La funcion toPx() solo acepta numeros en em o rem\"\n  }\n}\n\n/// From (mayor que $bp)\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $from - breakpoint\n/// @example scss\n///     .elemento {\n///       width: 30%;\n///       @include from(m) {\n///         width: 50%;\n///       }\n///     }\n@mixin from($from){\n  // Si el bp es del core de EDgrid\n  @if isCoreBreakpoint($from){\n    // no imprime media query para tamaño s\n    @if $from == s {\n      @content\n    }\n    // imprime media query en los otros tamaños\n    @else {\n      @media screen and (min-width: getBp($from)){ @content }\n    }\n  }\n  // Si el bp no es del core de EDgrid pero es una unidad válida\n  @else if isValidBreakpoint($from){\n    @media screen and (min-width: $from){ @content }\n  }\n  // Error\n  @else {\n    @error 'El mixin from() solo puede recibir un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem'\n  }\n}\n\n/// To (es menor que $to)\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $to - breakpoint\n/// @example scss\n///     .elemento {\n///       width: 50%;\n///       @include to(m) {\n///         width: 30%;\n///       }\n///     }\n@mixin to($to){\n  // Si es un breakpoint del core\n  @if isCoreBreakpoint($to){\n    @if $to == s {\n      @content;\n    } @else {\n      @media screen and (max-width : getBp($to) - 1px) { @content }\n    }\n  }\n  // Si es un breakpoint válido (px, em, rem)\n  @else if isValidBreakpoint($to){\n    @media screen and (max-width: toPx($to) - 1px){ @content }\n  }\n  // Si no es un breakpoint válido lanzar error\n  @else {\n    @error 'El mixin to() solo puede recibir un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem'\n  }\n}\n\n/// fromTo la regla se ejecuta entre ambos breakpoints.\n/// @group   mq\n/// @author  Alvaro Felipe\n/// @param   {number} $from - breakpoint desde que medida se iniciara la regla.\n/// @param   {number} $to - breakpoint hasta que medida se ejecutara la regla.\n/// @example scss\n///     .elemento {\n///       background-color: cyan;\n///       @include fromTo(s, l) {\n///         background-color: darken(cyan, .8);\n///       }\n///     }\n@mixin fromTo($from,$to){\n  // Si ambos son breakpoints del core\n  @if isCoreBreakpoint($from) and isCoreBreakpoint($to){\n    @if getBp($to) > getBp($from) {\n      @media screen and (min-width : getBp($from)) and (max-width : getBp($to) - 1px) {\n        @content\n      }\n    } @else {\n      @error \"El segundo argumento del mixin fromTo debe ser mayor que el primero\"\n    }\n  }\n\n  // Si solo $from es breakpoint del core\n  @else if isCoreBreakpoint($from) and not isCoreBreakpoint($to){\n    @if isValidBreakpoint($to) {\n      @if toPx($to) > toPx(getBp($from)) {\n        @media screen and (min-width : getBp($from)) and (max-width : toPx($to) - 1px) {\n          @content\n        }\n      } @else {\n        @error \"El segundo argumento del mixin fromTo debe ser mayor que el primero\"\n      }\n    } @else {\n      @error \"El segundo argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem\"\n    }\n  }\n\n  // Si solo $to es breakpoint del core\n  @else if not isCoreBreakpoint($from) and isCoreBreakpoint($to) {\n    @if isValidBreakpoint($from) {\n      @if toPx(getBp($to)) > toPx($from){\n        @media screen and (min-width : $from) and (max-width : getBp($to) - 1px) {\n          @content\n        }\n      } @else {\n        @error \"El segundo argumento del mixin fromTo debe ser mayor que el primero\"\n      }\n    }\n    @else {\n      @error \"El primer argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem\"\n    }\n  }\n\n  // Si no son breakpoints del core pero son breakpoints válidos (px, em, rem)\n  @else if isValidBreakpoint($from) and isValidBreakpoint($to){\n    @if toPx($to) > toPx($from) {\n      @media screen and (min-width : $from) and (max-width : toPx($to) - 1px) {\n        @content\n      }\n    } @else {\n      @error \"El segundo argumento del mixin fromTo debe ser mayor que el primero\"\n    }\n  }\n\n  // Si al menos hay un breakpoint inválido\n  @else {\n    @error 'Los argumentos del mixin fromTo() deben ser breakpoints del Core (#{map-keys($breakpoints)}) o números en px, em o rem';\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_prototype.scss",
    "content": "@mixin ratio($h, $v) {\n  $width: 100%;\n  width: $width;\n  height: 0;\n  overflow: hidden;\n  padding-bottom: $width * ($v/$h);\n  position: relative;\n}\n\n$border-radius: (tl: top-left,\n  tr: top-right,\n  bl: bottom-left,\n  br: bottom-right);\n\n$z-indexs: (\n  z-back: var(--z-back),\n  z-normal: var(--z-normal),\n  z-tooltip: var(--z-tooltip),\n  z-fixed: var(--z-fixed),\n  z-modal: var(--z-modal),\n);\n\n@if $prototype==true {\n  .button {\n    display: inline-block;\n    padding: .5em 1em;\n    color: #FFF;\n    background: var(--color);\n    cursor: pointer;\n    text-decoration: none;\n    line-height: inherit;\n    border-radius: .25rem;\n    transition: transform .05s;\n    border: none;\n\n    &:hover {\n      background: var(--color-alt);\n    }\n  }\n\n  @each $index, $value in $z-indexs {\n    .#{$index} {\n      z-index: $value;\n    }\n  }\n\n  @include breakpoints {\n    $border: 1px solid var(--border-color);\n\n    // Bordes\n    &-border {\n      border: $border;\n    }\n\n    &-border-none {\n      border: none;\n    }\n\n    &-radius {\n      border-radius: var(--border-radius);\n    }\n\n    // boder top, left, right, bottom\n    @each $direction in top right bottom left {\n      &-border-#{$direction} {\n        border-#{$direction}: $border;\n      }\n\n      &-border-none {\n        border-#{$direction}: none;\n      }\n    }\n\n    // Border radius\n    @each $corner in map-keys($border-radius) {\n      &-radius-#{$corner} {\n        border-#{map-get($border-radius,$corner)}-radius: var(--border-radius);\n      }\n    }\n\n    @include l-unit(\"radius\", \"border-radius\");\n\n    @each $corner in map-keys($border-radius) {\n      @include l-unit(\"radius-#{$corner}\", \"border-#{map-get($border-radius,$corner)}-radius\");\n    }\n\n    @each $corner in map-keys($border-radius) {\n      &-radius-#{$corner}-none {\n        border-#{map-get($border-radius,$corner)}-radius: 0;\n      }\n    }\n\n    &-radius-none {\n      border-radius: none;\n    }\n\n    // Backgrounds\n    &-bg-blue {\n      background-color: var(--color);\n    }\n\n    &-bg-white {\n      background-color: #FFF;\n    }\n\n    &-bg-grey {\n      background-color: var(--light-bg);\n    }\n\n    &-bg-none {\n      background-color: transparent;\n    }\n\n    // ratios\n    @each $x in 1 2 3 4 {\n      @each $y in 1 2 3 4 {\n        &-ratio-#{$x}-#{$y} {\n          @include ratio($x, $y)\n        }\n      }\n    }\n\n    // 16,9\n    &-ratio-16-9 {\n      @include ratio(16, 9)\n    }\n\n    // 9,16\n    &-ratio-9-16 {\n      @include ratio(9, 16)\n    }\n\n    // 21,9\n    &-ratio-21-9 {\n      @include ratio(21, 9)\n    }\n\n    // Sombras\n    &-shadow {\n      box-shadow: 0 0 1rem #CCC;\n    }\n\n    &-shadow-bottom {\n      box-shadow: 0 0.5rem 1rem -0.5rem #CCC;\n    }\n\n    &-shadow-top {\n      box-shadow: 0 -0.5rem 1rem -0.5rem #CCC;\n    }\n\n    &-shadow-right {\n      box-shadow: 0.5rem 0 1rem -0.5rem #CCC;\n    }\n\n    &-shadow-left {\n      box-shadow: -0.5rem 0 1rem -0.5rem #CCC;\n    }\n\n    &-shadow-none {\n      box-shadow: none;\n    }\n\n    // Clases con flexbox\n    &-fxn {\n      flex: none;\n    }\n\n    &-fxw {\n      flex-wrap: nowrap;\n    }\n\n    &-fxg {\n      flex-grow: 1;\n    }\n\n    // Opacidad\n    @for $i from 1 through 10 {\n      &-opacity-#{$i} {\n        opacity: $i * 0.1;\n      }\n    }\n\n  }\n\n  .circle,\n  .square {\n    @include ratio(1, 1);\n  }\n\n  .circle {\n    border-radius: 50%;\n  }\n\n  .img-container {\n    position: relative;\n\n    img {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      top: 0;\n      left: 0;\n      object-fit: cover;\n    }\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_video.scss",
    "content": ".ed-video {\n  height         : 0;\n  overflow       : hidden;\n  padding-bottom : 56.25%;\n  position       : relative;\n  > iframe,\n  > video,\n  > .video {\n    position : absolute;\n    top      : 0;\n    left     : 0;\n    width    : 100%;\n    height   : 100%;\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/components/_visibility.scss",
    "content": "/// Muestra un elemento a partir del breakpoint especificado\n/// @group   visibility\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint a partir del cual mostrar el elemento\n/// @example scss\n///   .sidebar {\n///     @include showFrom(l);\n///   }\n@mixin showFrom($bp){\n  @include to($bp){\n    display : none;\n  }\n}\n\n/// Muestra un elemento por debajo del breakpoint especificado.\n/// @group   visibility\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint.\n/// @example scss\n///   .sidebar {\n///     @include showFrom(l);\n///   }\n@mixin showTo($bp){\n  @include from($bp){\n    display : none;\n  }\n}\n\n/// Oculta un elemento a partir del breakpoint especificado\n/// @group   visibility\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint a partir del cual ocultar el elemento\n/// @example scss\n///   .sidebar {\n///     @include hideFrom(l);\n///   }\n@mixin hideFrom($bp){\n  @include from($bp){\n    display : none;\n  }\n}\n\n/// Oculta un elemento por debajo del breakpoint especificado.\n/// @group   visibility\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - breakpoint\n/// @example scss\n///   .sidebar {\n///     @include hideFrom(l);\n///   }\n@mixin hideTo($bp){\n  @include to($bp){\n    display : none;\n  }\n}\n\n// Version css\n@each $size, $screenSize in $breakpoints {\n  .from-#{$size} { @include showFrom($size) }\n  .to-#{$size} { @include showTo($size) }\n}\n\n"
  },
  {
    "path": "src/scss/ed-grid/helpers/_functions.scss",
    "content": "/// Transforma un valor en pixeles a em.\n/// @group   functions\n/// @author  Alvaro Felipe\n/// @param   {number} $el - el valor en pixeles que se desea convertir.\n/// @param   {number} $context - el valor en pixeles del contenedor.\n/// @return  {number} el tamaño transformado en em.\n@function em($el,$context:16px) {\n  @if type_of($el) == number and unit($el) == 'px' {\n    @return ($el / $context) * 1em;\n  } @else {\n    @error 'Function em() requires a px unit as first argument / La función em() requiere una unidad de pixeles como primer argumento (el segundo es opcional)'\n  }\n}\n\n/// Transforma un valor en pixeles a rem.\n/// @group   functions\n/// @author  Alvaro Felipe\n/// @param   {number} $el - el valor en pixeles que se desea convertir.\n/// @return  {number} el tamaño transformado en rem.\n@function rem($el) {\n  @if type_of($el) == number and unit($el) == 'px' {\n    @return ($el / 16px) * 1rem;\n  } @else {\n    @error 'Function rem() requires a px unit as argument / La funcion rem() requiere una unidad de pixeles como argumento';\n  }\n}\n"
  },
  {
    "path": "src/scss/ed-grid/helpers/_mixins.scss",
    "content": "// Recorre cada uno de los breakpoints que hay en las variables por defecto\n@mixin breakpoints {\n  @each $size in $sizes {\n    @include from($size) {\n      .#{$size} {\n        @content;\n      }\n    }\n  }\n}\n\n// Mixin para crear seletores utilizando las unidades de medidas creadas con $l-unit\n// 05:0.25rem, 1:0.5rem, 2:1rem, 3:1.5rem, 4:2rem\n@mixin l-unit($selector, $property) {\n\n  @for $i from 0 through 5 {\n    // Unidad de separación actual\n    $unit: $l-unit * $i;\n\n    // Valida el cero para evitar devolver 0rem como unidad\n    @if $i==0 {\n      $unit: 0;\n    }\n\n    @if $i==5 {\n      $i: '05';\n      $unit: $l-unit * 0.5;\n    }\n\n    &-#{$selector}-#{$i} {\n      #{$property}: $unit;\n    }\n\n  }\n\n}\n\n/*\n* $names - Lista de nombres que usaremos para nombrar nuestras clases.\n*          Recorremos una lista por si queremos múltiples selectores con el mismo valor\n*          Ejemplo: (red-color, color-red)\n*          sería igual a .red-color { color : red; } .color-red { color : red; }\n*\n* $property, $value - Propiedad CSS con su respectivo valor\n*\n* $concact - En ocasiones necesitaremos concadenar para crear clases más específicas.\n*            Por la forma en que funciona el mixin no podemos usar concadenar desde los names.\n*            Para ver un ejemplo práctico vaya a la parte de los gaps en _core-grid.scss\n*\n* $debug - Ver cómo sería el resultado en la construcción de la clase y el CSS de salida.\n*          Por defecto está desactivado\n*/\n@mixin prototype($names, $property, $value, $concat: '', $debug : false) {\n\n  @each $name in $names {\n\n    // Recorremos cada breakpoint que tenemos almacenados en $sizes\n    @each $size in $sizes {\n\n      @if $size != 'l' {\n        // Creamos nuestro selector con las variables\n        $selector : '#{$concat}.#{$size}-#{$name}';\n\n        @include from($size) {\n\n          // Modo debug para saber ver cómo se crearía el selector y el CSS resultante\n          // Los \\a represetan saltos de línea en el string\n          @if $debug {\n            @debug ('\\a@media screen and min-width(#{map-get($breakpoints, $size)}) { \\a  #{$selector} { \\a    #{$property} : #{$value} \\a  }\\a}');\n          }\n\n          // Salida de código\n          #{$selector} {\n            #{$property} : $value;\n          }\n\n        }\n\n      }\n\n    }\n\n  }\n\n}\n"
  },
  {
    "path": "src/scss/ed-grid/legacy/_ed-menu.scss",
    "content": "// estilo default del menu\n/// Aplica un estilo por defecto al menu.\n/// @group   menu\n/// @author  Alvaro Felipe\n@mixin menuStyleDefault {\n  background : #eee;\n  li:hover { background : rgba(#000, .1)  }\n  ul       { background : darken(#eee, 5) }\n  a        { color      : #666            }\n}\n\n// estilo nav para el menu\n// incluye el breakpoint que lo cambia a horizontal\n@mixin menuStyleNav($bp) {\n  $border    : 1px solid rgba(#000, .1);\n  background : #EEE;\n  border     : $border;\n\n  li:hover { background : rgba(#000, .1)  }\n  ul       { background : darken(#eee, 5) }\n  a        { color      : #666            }\n\n  li {\n    border-bottom : $border;\n\n    &:last-child {\n      border-right  : none;\n      border-bottom : none;\n    }\n  }\n\n  ul {\n    border : $border;\n\n    li {\n      border-bottom : $border;\n\n      &:last-child { border-bottom : none }\n    }\n  }\n\n  @include from($bp) {\n    > li {\n      border-right  : 1px solid rgba(#000, .1);\n      border-bottom : none;\n    }\n  }\n}\n\n/// estilo button para el menú\n/// @group   menu\n/// @author  Alvaro Felipe\n@mixin menuStyleButton {\n  li {\n    margin-bottom : .5em;\n    margin-right  : .5em;\n  }\n\n  a {\n    border        : 1px solid rgba(#000, .1);\n    background    : #EEE;\n    line-height   : 2.5em;\n    padding       : 0 1.5em;\n    border-radius : 4px;\n    color         : #666;\n\n    &:hover { background : rgba(#000, .1) }\n  }\n}\n\n/// mixin que construye el menú sin un tema, solo maqueta\n/// @group   menu\n/// @author  Alvaro Felipe\n/// @param   {number} $bp - Breakpoint a partir del cual el menu se volvera horizontal.\n/// @param   {number} $style - estilo a usar en el menu las opciones son: [default | nav | button], este argumento es opcional.\n/// @example [scss | sass] - Usage\n@mixin edMenu($bp,$style:null) {\n  width : 100%;\n\n  &, ul {\n    margin-top    : 0;\n    margin-bottom : 0;\n    padding-left  : 0;\n    list-style    : none;\n  }\n\n  li {\n    position   : relative;\n    list-style : none;\n    flex       : auto;\n\n    // Si es padre de un submenu\n    &.parent-submenu {\n      display   : flex;\n      flex-wrap : wrap;\n\n      a { flex : auto }\n    }\n  }\n\n  //submenus\n  ul {\n    display  : none;\n\n    @include to($bp) {\n      &.show-submenu {\n        display       : block;\n        width         : 100%;\n        order         : 3;\n        margin-left   : 1em;\n        margin-bottom : .5em;\n      }\n    }\n  }\n\n  a {\n    display     : block;\n    line-height : 3em;\n    padding     : 0 1em;\n\n    &:hover { text-decoration : none }\n  }\n\n  // cambio a horizontal\n  @include from($bp) {\n    display     : flex;\n    align-items : center;\n\n    a { text-align : center }\n\n    // Ocultar el botón de expandir en horizontal\n    .expand { display : none}\n\n    ul {\n      position    : absolute;\n      left        : 0;\n      top         : 100%;\n      min-width   : 100%;\n      white-space : nowrap;\n\n      a { text-align : left }\n\n      ul {\n        top  : 0;\n        left : 100%;\n      }\n    }\n\n    // mostrar submenu\n    li:hover > ul { display : block }\n  }\n\n  // expand submenu button\n  .expand-submenu {\n    @include hideFrom($bp);\n    $size      : 3em;\n    position   : relative;\n    right      : 0;\n    width      : $size;\n    height     : $size;\n    cursor     : pointer;\n    transition : all .3s;\n\n    &::after {\n      content       : \"\";\n      position      : absolute;\n      width         : 40%;\n      height        : 40%;\n      top           : 20%;\n      left          : 30%;\n      border-left   : ($size * 0.15) solid;\n      border-bottom : ($size * 0.15) solid;\n      border-radius : ($size * 0.08);\n      transform     : rotate(-45deg);\n      transition    : all .3s;\n    }\n\n    &.active {\n      transform : rotate(180deg);\n    }\n  }\n\n  // incluir el estilo del menu si se ha definido\n  @if $style == default { @include menuStyleDefault  }\n  @if $style == nav     { @include menuStyleNav($bp) }\n  @if $style == button  { @include menuStyleButton   }\n\n  // compilar los mixins en modo CSS\n  // Se comenta para corregirlo luego de eliminar cssCore\n  //@if $cssCore == true {\n  //  &.default    { @include menuStyleDefault  }\n  //  &.nav-bar    { @include menuStyleNav($bp) }\n  //  &.button-bar { @include menuStyleButton    }\n  //}\n}\n\n/// mixin Nav (para el contenedor del menú)\n/// @group   menu\n/// @author  Alvaro Felipe\n/// @param   {string} $direction  - El eje desde donde aparecera el menu. Las opciones son [left | right | top | bottom]\n/// @param   {number} $bp  - breakpoint que indica hasta donde debe mostrarse en vertical.\n/// @example scss\n///   nav {\n///     @include edNav(left, m);\n///   }\n\n@mixin edNav($direction, $bp){\n  @include to($bp) {\n    $lrWidth   : 85%;\n    position   : fixed;\n    transition : all .3s;\n    height     : 100vh;\n    z-index    : 200;\n    overflow-y : auto;\n\n    @if $direction == left or $direction == right {\n      width : $lrWidth;\n    } @else {\n      width : 100%;\n    }\n\n    @if $direction == left {\n      left : $lrWidth * -1;\n\n      &.show-menu { left : 0 }\n    }\n\n    @if $direction == right {\n      right : $lrWidth * -1;\n\n      &.show-menu { right : 0 }\n    }\n\n    @if $direction == top {\n      width : 100%;\n      left : 0;\n      top : -100%;\n\n      &.show-menu { top : 0 }\n    }\n\n    @if $direction == bottom {\n      width : 100%;\n      left : 0;\n      bottom : -100%;\n\n      &.show-menu { bottom : 0 }\n    }\n  }\n}\n\n/// Toggle del menu\n/// @group   menu\n/// @author  Alvaro Felipe\n/// @param   {number} $size - especifica el tamaño del elemento toggle\n/// @param   {color} $color - especifica el color del toggle.\n/// @example scss\n///   .menu-toggle {\n///     @include navToggle(200px, $black);\n///   }\n@mixin navToggle($size, $color) {\n  $segmentHeight : ($size / 5);\n  position       : relative;\n  z-index        : 300;\n  width          : $size * 1.5;\n  height         : $size;\n  box-shadow     : 0 ($segmentHeight) $color inset;\n  cursor         : pointer;\n\n  &::after,\n  &::before {\n    content          : \"\";\n    position         : absolute;\n    width            : 100%;\n    height           : ($segmentHeight);\n    background-color : $color;\n    bottom           : 0;\n  }\n\n  &::after {\n    bottom : $segmentHeight * 2;\n  }\n}\n\n// Version CSS\n// Menus\n// se requiere la clase .ed-menu\n// y la clase para cambio a horizontal\n@if $legacy == true {\n  .ed-menu {\n    &.s-horizontal { @include edMenu(s) }\n    &.m-horizontal { @include edMenu(m) }\n    &.l-horizontal { @include edMenu(l) }\n    &.xl-horizontal { @include edMenu(xl) }\n  }\n\n  .ed-nav {\n    &.l-top { @include edNav(top, l)}\n    &.l-bottom { @include edNav(bottom, l)}\n    &.l-left { @include edNav(left, l)}\n    &.l-right { @include edNav(right, l)}\n    &.x-top { @include edNav(top, xl)}\n    &.xl-bottom { @include edNav(bottom, xl)}\n    &.xl-left { @include edNav(left, xl)}\n    &.xl-right { @include edNav(right, xl)}\n    &.m-top { @include edNav(top, m)}\n    &.m-bottom { @include edNav(bottom, m)}\n    &.m-left { @include edNav(left, m)}\n    &.m-right { @include edNav(right, m)}\n  }\n\n  .nav-toggle {\n    @include navToggle(20px, #333)\n  }\n\n}\n"
  },
  {
    "path": "src/scss/ed-grid/legacy/_grid.scss",
    "content": "// returns grid-item width based on columns number and gutter\n// retorna el ancho del grid-item basado en el número de columnas y el gutter\n@function item-width($width,$gutter){\n  @return calc(#{$width} - #{$gutter});\n}\n\n// asigns grid-item width for each breakpoint\n@mixin columnWidth($currentBreakpoint, $previousBreakpoint, $edgridBreakpoint ,$gutter,$gridItem){\n  // check if current breakpoint is not equal to previous breakpoint\n  @if $currentBreakpoint != $previousBreakpoint {\n    @include from($edgridBreakpoint){\n      $width: 100% / $currentBreakpoint;\n      & > #{$gridItem}{\n        width : item-width($width,$gutter);\n      }\n    }\n  }\n}\n\n/*\n| Mixin para crear cuadriculas\n|\n| $gridItemSelector: nombre del selector CSS de cada item de la cuadricula\n| $listColumns:\n|              * lista de numeros de columnas en cada breakpoint (separados por espacios). Ej: 1 2 3 4\n|              * el numero de columnas del ultimo breakpoint se hereda a breakpoints superiores\n| $gutter: separación entre cada item de la cuadricula (opcional)\n|\n*/\n/// mixin para crear cuadriculas\n/// @group   grid\n/// @author  Alvaro Felipe\n/// @param   {element} $selector - nombre del selector css de cada item de la cuadricula.\n/// @param   {list} $listColumns - lista de numeros de columnas en cada breakpoint. Ej: (1,2,3,4), el numero de columnas del ultimo breakpoint se hereda a breakpoints superiores\n/// @param   {number} $gutter - el espaciado entre cada elemento de la cuadricula. Por defecto es de 1em.\n/// @example scss\n///   .gallery {\n///     @include grid(li, 5 );\n///   }\n\n@mixin grid($gridItemSelector,$listColumns,$gutter:1em){\n // $width sirve para calcular el ancho de cada item\n  $width       : 100% / nth($listColumns,1);\n\n  // elimina el espaciado vertical de las imágenes\n  img {\n    display : block;\n  }\n\n  display      : flex;\n  flex-wrap    : wrap;\n  margin-left  : -($gutter / 2);\n  margin-right : -($gutter / 2);\n\n  // Evitar scroll horizontal\n  @at-root {\n    body {\n      overflow-x: hidden;\n    }\n  }\n\n  // por si el contenedor es un ul\n  @if $gridItemSelector == li {\n    margin     : 0;\n    padding    : 0;\n    list-style : none;\n\n    li {\n      margin-left : 0;\n      list-style  : none;\n    }\n  }\n\n  & > #{$gridItemSelector} {\n    width  : item-width($width,$gutter);\n    margin : $gutter / 2;\n  }\n\n  // calculate grid item width for each breakpoint\n  $indice: 1;\n  $longListColumns: length($listColumns);\n  @each $size, $_ in $breakpoints{\n    @if $indice > 1 and $indice <= $longListColumns{\n      @include columnWidth(nth($listColumns,$indice),nth($listColumns,$indice - 1),$size,$gutter,$gridItemSelector);\n    }\n    $indice: $indice + 1;\n  }\n\n  // Si soporta grid\n  @supports (grid-template-areas: 'header') {\n    $i: 1;\n    $longListColumns: length($listColumns);\n\n    display: grid;\n    grid-gap: $gutter;\n    margin-left : 0;\n    margin-right : 0;\n\n    // Restaurar el scroll horizontal (por si se necesitara)\n    @at-root {\n      body {\n        overflow-x: visible;\n      }\n    }\n\n    @each $size, $_ in $breakpoints{\n      @if $i <= $longListColumns {\n        @include from($size) {\n          grid-template-columns: repeat(nth($listColumns,$i),1fr);\n        }\n        $i: $i + 1;\n      }\n    }\n\n    // grid-item\n    > #{$gridItemSelector} {\n      width : 100%;\n      margin : 0;\n    }\n  }\n\n}\n"
  },
  {
    "path": "src/scss/ed-grid/legacy/_legacy.scss",
    "content": "@mixin padding($numero:1) {\n  padding-left  : $gap * $numero;\n  padding-right : $gap * $numero;\n}\n\n@mixin noPaddingContainer() {\n  > .#{$item} {\n    @include padding(0)\n  }\n}\n\n@mixin clearfix {\n  &:before,\n  &:after {\n    content : '';\n    width   : 100%;\n    display : table;\n    clear   : both;\n  }\n}\n\n@mixin toRight($width:auto,$margin-left:1em) {\n  float       : right;\n  width       : $width;\n  margin-left : $margin-left;\n}\n\n@mixin toLeft($width:auto,$margin-right:1em) {\n  float        : left;\n  width        : $width;\n  margin-right : $margin-right;\n}\n\n@mixin toCenter($width:auto) {\n  display      : block;\n  width        : $width;\n  margin-left  : auto;\n  margin-right : auto;\n  text-align   : center;\n}\n\n@mixin circle {\n  border-radius : 50%\n}\n\n@mixin full() {\n  width     : 100%;\n  max-width : 100%;\n  clear     : both;\n}\n\n@mixin stickyFooter {\n  @at-root {\n    body {\n      display        : flex;\n      flex-direction : column;\n      min-height     : 100vh;\n    }\n  }\n\n  margin-top : auto;\n}\n\n@mixin cssStyckyFooter {\n  display        : flex;\n  flex-direction : column;\n  min-height     : 100vh;\n\n  > footer {\n    margin-top : auto\n  }\n}\n\n@if $legacy == true {\n  .to-center {\n    display      : block;\n    margin-right : auto;\n    margin-left  : auto;\n\n    &.ed-container {\n      display : flex;\n    }\n  }\n\n  .to-left {\n    @include toLeft()\n  }\n\n  .to-right {\n    @include toRight()\n  }\n\n  .full {\n    @include full()\n  }\n\n  .circle {\n    @include circle()\n  }\n\n  .clearfix {\n    @include clearfix()\n  }\n\n  .no-padding.#{$container} {\n    @include noPaddingContainer()\n  }\n\n  .no-padding.#{$item} {\n    @include padding(0)\n  }\n\n  .padding {\n    @include padding(1)\n  }\n\n  .padding-2 {\n    @include padding(2)\n  }\n\n  .padding-3 {\n    @include padding(3)\n  }\n\n  body.sticky-footer {\n    @include cssStyckyFooter()\n  }\n\n  .center {\n    text-align : center;\n  }\n\n  .left {\n    text-align : left;\n  }\n\n  .right {\n    text-align : right;\n  }\n\n  // grid version CSS\n  .grid-container.grid-1234 {\n    @include grid('.grid-item', 1 2 3 4)\n  }\n\n  .grid-container.grid-2345 {\n    @include grid('.grid-item', 2 3 4 5)\n  }\n\n  // Offset CSS\n  @include cssOffset();\n\n  // Alineaciones\n\n  /* Clases para alineaciones con compatibilidad hacia atrás\n  Sedesactivarán en el futuro\n  */\n\n  .main-justify,\n  .main-distribute,\n  .main-center,\n  .main-start,\n  .main-end,\n  .cross-start,\n  .cross-center,\n  .cross-end,\n  .flex-reverse,\n  .flex-column,\n  .flex-reverse,\n  .abcenter {\n    display   : flex;\n    flex-wrap : wrap;\n  }\n\n  .main-justify {\n    justify-content : space-between\n  }\n\n  .main-distribute {\n    justify-content : space-evenly\n  }\n\n  .main-center {\n    justify-content : center\n  }\n\n  .main-start {\n    justify-content : flex-start\n  }\n\n  .main-end {\n    justify-content : flex-end\n  }\n\n  .flex-reverse {\n    flex-direction : row-reverse\n  }\n\n  .flex-column {\n    flex-direction : column\n  }\n\n  .flex-column-reverse {\n    flex-direction : column-reverse\n  }\n\n  .cross-start {\n    align-items   : start;\n    align-content : start;\n  }\n\n  .cross-center {\n    align-items   : center;\n    align-content : center;\n  }\n\n  .cross-end {\n    align-items   : end;\n    align-content : end;\n  }\n\n  .abcenter {\n    justify-content : center;\n    align-items     : center;\n  }\n}\n\n/* Mixins de alineacion con compatibilidad hacia atras*/\n@mixin crossCenter {\n  display       : flex;\n  flex-wrap     : wrap;\n  align-items   : center;\n  align-content : center;\n}\n\n@mixin mainCenter {\n  display         : flex;\n  flex-wrap       : wrap;\n  justify-content : center;\n}\n\n"
  },
  {
    "path": "src/scss/ed-grid/legacy/_offset.scss",
    "content": "@mixin cssOffset {\n  @each $size, $screen-size in $breakpoints{\n\n    @if $size == s {\n      @for $i from 1 through 20 {\n        .#{$size}-offset-#{$i*5}{\n          margin-left: unquote($i*5 + \"%\");\n        }\n      }\n      @each $fraction in $fractions{\n        @for $i from 1 through length($fractions){\n          .#{$size}-offset-#{$i}-#{$fraction} {\n            margin-left: (100% / $fraction) * $i;\n          }\n        }\n      }\n    }\n\n    @else {\n      @media all and (min-width: $screen-size){\n        //porcentajes\n        @for $i from 1 through 20 {\n          .#{$size}-offset-#{$i*5}{\n            margin-left: unquote($i*5 + \"%\");\n          }\n        }\n        //fracciones\n        @each $fraction in $fractions{\n          @for $i from 1 through $fraction {\n            .#{$size}-offset-#{$i}-#{$fraction} {\n              margin-left: (100% / $fraction) * $i;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n\n@mixin offsetWidth($currentBp, $prevBp, $coreBp){\n  @if $currentBp != $prevBp{\n    @if $currentBp < 1 {\n      @include from($coreBp){\n        margin-left : $currentBp * 100%;\n      }\n    }\n    @else {\n      @include from($coreBp){\n        margin-left : $currentBp * 1%;\n      }\n    }\n  }\n}\n\n/// mixin para aplicarle un desplazamiento a un elemento.\n/// Description el unico parametro necesario es el primero, luego los demas parametros si no estan especificados toman la medida del anterior.\n/// @group   offset\n/// @author  Alvaro Felipe\n/// @param   {number} $s - desplazamiento para medidas menores a 640px.\n/// @param   {number} $m - desplazamiento para medidas mayores a 640px y menores o iguales a 1024px.\n/// @param   {number} $l - desplazamiento para medidas mayores a 1024px y menores o iguales a 1440px.\n/// @param   {number} $xl -desplazamiento para medidas mayores a 1440px en adelante.\n/// @example scss\n///   .sidebar {\n///     @include offset(2, 5, 7);\n///   }\n\n\n@mixin offset($s,$m:$s,$l:$m,$xl:$l){\n  @if $s < 1 {\n    margin-left : $s * 100%;\n  } @else {\n    margin-left : $s * 1%;\n  }\n\n  @include offsetWidth($m,$s,m);\n  @include offsetWidth($l,$m,l);\n  @include offsetWidth($xl,$l,xl);\n}\n\n"
  },
  {
    "path": "src/scss/ed-grid-css.scss",
    "content": "// Esta configuración se usa solamente para compilar la versión CSS\n$cssCore : true !default;\n$buttons : true !default;\n@import \"ed-grid\";\n"
  },
  {
    "path": "src/scss/ed-grid.scss",
    "content": "// Configuraciones\n$prototype        : true !default;\n$dev              : false !default;\n$dev-hover        : false !default;\n$max-width        : 1200px !default;\n$l-unit           : .5rem !default;\n$gap              : $l-unit * 4 !default;  // 2rem\n$fractions        : 3 6 !default;\n$container        : ed-container !default;\n$item             : ed-item !default;\n$grid-container   : ed-grid !default;\n$max-grid-columns : 12 !default;\n$legacy           : false !default;\n\n// Breakpoints\n$breakpoints : (\n  s  : 0,\n  m  : 640px,\n  l  : 1024px,\n  lg : 1024px,\n  xl : 1440px\n) !default;\n\n$sizes: map-keys($breakpoints);\n\n// Importa archivos de configuración\n@import 'ed-grid/helpers/mixins';\n@import 'ed-grid/helpers/functions';\n\n// Importar componentes\n// Core\n@import 'ed-grid/components/base';\n@import 'ed-grid/components/media-queries';\n@import 'ed-grid/components/dev';\n@import 'ed-grid/components/core-flexbox';\n@import 'ed-grid/components/core-grid';\n@import 'ed-grid/components/layout';\n@import 'ed-grid/components/alignment';\n\n// Recommended Utilities\n@import 'ed-grid/components/visibility';\n@import 'ed-grid/components/prototype';\n@import 'ed-grid/components/video';\n\n// Not recomended (legacy)\n@import 'ed-grid/legacy/ed-menu';\n@import 'ed-grid/legacy/offset';\n@import 'ed-grid/legacy/grid';\n@import 'ed-grid/legacy/legacy';\n\n// CSS Variables\n:root {\n  // Prototype\n  --color                  : #007BDF;\n  --color-alt              : #006DC6;\n  --border-color           : #DFE0E0;\n  --light-bg               : #F0F0F0;\n  --border-radius          : #{$l-unit * 0.5}; // .25rem\n  // layout\n  --vertical-block-space   : #{$l-unit * 2};  // 1rem\n  --vertical-content-space : #{$l-unit * 2};  // 1rem\n  --gap                    : #{$l-unit * 2};  // 1rem\n  --max-width              : #{$max-width};\n\n  @include from(lg) {\n    --vertical-block-space : #{$l-unit * 4};\n    --gap                  : #{$l-unit * 4};  // 2rem\n  }\n}\n\n"
  },
  {
    "path": "src/scss/styles.scss",
    "content": "// Use este archivo para escribir los estilos de la página de documentación\n$legacy: false;\n@import \"ed-grid\";\n@import \"~edteam-style-guides/edteam-style-guides\";\n/*\n  This boilerplate is based in ITCSS and SMACSS\n*/\n//@import \"../../node_modules/edteam-style-guides/edteam-style-guides\";\n// Config\n//@import \"web-styles/config/functions\";\n//@import \"web-styles/config/variables\";\n//@import \"web-styles/config/mixins\";\n// libraries\n@import \"web-styles/libraries/prism\";\n// Base and elements (generic)\n//@import \"web-styles/base/base\";\n// LAYOUT\n// Escribe solo los estilos de layout (division en regiones del viewport)\n@import \"web-styles/layout/layout\";\n// MODULOS (SMACSS) O COMPONENTES (ITCSS)\n// Son los elementos de UI de tu interfaz, como botones, tablas, menus, etc.\n// Crea los archivos adicionales que necesites (uno por componente)\n@import \"web-styles/components/buttons\";\n@import \"web-styles/components/menus\";\n@import \"web-styles/components/demo\";\n@import \"web-styles/components/menu-responsive\";\n// Theme (colors and fonts)\n//@import \"web-styles/theme/typography\";\n//@import \"web-styles/theme/footer\";\n//@import \"web-styles/theme/banner\";\n//@import \"web-styles/theme/icons\";\n@import \"web-styles/components/main-features\";\n// Utilities (hacks)\n// Todos los hacks que hayas necesitado para solucionar conflictos\n// o resolver situaciones extremas. Se espera poder mejorarlos luego.\n@import \"web-styles/hacks/hacks\";\n"
  },
  {
    "path": "src/scss/web-styles/base/base.scss",
    "content": "*,\n*::before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  font-size: fontSize(small);\n}\n"
  },
  {
    "path": "src/scss/web-styles/components/_buttons.scss",
    "content": ""
  },
  {
    "path": "src/scss/web-styles/components/_demo.scss",
    "content": ".ed-grid-demo {\n  // border: 1px solid var(--dark-color);\n  margin-bottom: var(--vertical-block-space);\n  background: var(--light-bg);\n  border: 1px solid var(--border-color);\n\n  .ed-item, .box-demo {\n    min-height: 100px;\n    background-clip: content-box;\n    background-color: var(--color);\n    display: grid;\n    align-content: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    color: #fff;\n\n    &.ed-container {\n      display: flex;\n\n      .ed-item {\n        background-color: rgba(#000,.25);\n      }\n    }\n  }\n\n  .ed-grid {\n    background:var(--border-color);\n\n    > * {\n      min-height: 100px;\n      background: var(--color);\n      display: grid;\n      align-content: center;\n      justify-content: center;\n      font-size: 1.5rem;\n      color: #fff;\n    }\n\n    > .ed-grid {\n      background: rgba(#000,.25);\n    }\n  }\n}\n\n.dev-demo,\n.dev-demo-hover {\n  position: static !important;\n  top : initial;\n  border : 0;\n  @include dev-mode;\n\n  .ed-item, .ed-grid > * {\n    color: black;\n  }\n\n}\n\n.dev-demo {\n  .ed-container, .ed-grid { @include dev-container-style; }\n\n  .ed-item, .ed-grid > * { @include dev-item-style;}\n\n  &-hover {\n\n    .ed-container, .ed-grid {\n      &:hover {\n        @include dev-container-style;\n      }\n    }\n\n    .ed-item, .ed-grid > * {\n      &:hover {\n        @include dev-item-style;\n      }\n    }\n\n  }\n}\n"
  },
  {
    "path": "src/scss/web-styles/components/_main-features.scss",
    "content": "// Features de EDgrid que aparecen en el home\n.main-features {\n  text-align  : center;\n}\n\n// Imágenes de cada feature\n.main-feature__img {\n  --size   : 6rem;\n  width    : var(--size);\n  height   : var(--size);\n  overflow : hidden;\n  margin   : 0 auto 1rem;\n\n  img {\n    width : 100%;\n    height : 100%;\n    object-fit: contain;\n    object-position: center center;\n  }\n\n  .main-feature:first-child & {\n    width : calc(var(--size) * 2);\n  }\n}\n"
  },
  {
    "path": "src/scss/web-styles/components/_menu-responsive.scss",
    "content": "// Este es el verdadero código, pero para la demostración no podemos usar posicionamiento fijo\n/*\n.ed-menu {\n  position : fixed;\n  top      : 0;\n  width    : 100%;\n  z-index  : 100;\n\n  .logo { height : 2rem }\n\n  .nav {\n    @include to(lg) {\n      position   : fixed;\n      left       : 0;\n      bottom     : 0;\n      background : black;\n    }\n  }\n\n  .menu { list-style : none }\n\n  .link {\n    color : grey;\n    &.active { color : cornflowerblue }\n    @include to(lg) { color : lightgrey }\n  }\n\n  .icon {\n    --size : 1.5rem;\n    width  : var(--size);\n    height : var(--size);\n    fill   : currentColor;\n  }\n\n}\n*/\n\n.menu-responsive {\n  min-height: 500px;\n  position: relative;\n\n  @include from(lg) {\n    min-height: 300px;\n  }\n\n}\n\n.ed-menu {\n  top      : var(--header-height);\n  width    : 100%;\n  z-index  : 10;\n\n  @include from(lg) {\n    position: sticky;\n  }\n\n  .logo { height : 2rem }\n\n  .nav {\n\n    @include to(lg) {\n      position   : absolute;\n      left     : 0;\n      bottom   : 0;\n      background : black\n    }\n\n  }\n\n  .menu { list-style : none }\n\n  .link {\n    color : lightgrey;\n    &.active { color : cornflowerblue }\n    @include from(lg) { color : grey }\n  }\n\n  .icon {\n    --size : 1.25rem;\n    width  : var(--size);\n    height : var(--size);\n    fill   : currentColor;\n  }\n\n}\n"
  },
  {
    "path": "src/scss/web-styles/components/_menus.scss",
    "content": ""
  },
  {
    "path": "src/scss/web-styles/config/_functions.scss",
    "content": ""
  },
  {
    "path": "src/scss/web-styles/config/_variables.scss",
    "content": "// Typography\n$font-family: 'sans-serif';\n"
  },
  {
    "path": "src/scss/web-styles/hacks/_hacks.scss",
    "content": "@include to(lg) {\n  .vertical-menu {\n    background : var(--blue-900);\n\n    &::before {\n      color : var(--grey-200);\n      content : 'Documentación de EDgrid';\n    }\n\n    .t5 {\n      color : var(--grey-300);\n    }\n\n    a {\n      color : var(--grey-500);\n\n      &.active {\n        color : var(--red-500);\n      }\n\n    }\n\n  }\n\n}\n\n.vertical-menu {\n\n  li {\n    padding : 0;\n  }\n\n  a, a.active {\n    padding: 0.35rem 0;\n  }\n\n  @include from(lg) {\n    a.active {\n      box-shadow: 0 1px inset var(--border-color), 0 -1px inset var(--border-color);\n    }\n\n    a.active {\n      border-top : none;\n      border-bottom : none;\n    }\n  }\n\n}\n\n.main-banner {\n  @include from(lg) {\n    padding-bottom: var(--padding);\n  }\n}\n\n.testimony-card {\n\n  .content {\n    flex-grow: 1;\n  }\n\n  .card__footer {\n    flex-wrap: nowrap;\n    margin-top: auto;\n\n    .button {\n      white-space: nowrap;\n    }\n\n  }\n\n}\n\n\n.user-avatar {\n  flex-wrap: nowrap;\n\n  .photo {\n    width: 1.75rem;\n    height: 1.75rem;\n  }\n\n}\n\n.data-list .container.container {\n  width : 100%;\n  max-width : 100%;\n}\n\n\n.data-list li li {\n  list-style:  circle;\n  border-bottom : none;\n  padding-top : 0;\n  padding-bottom: 0.5rem;\n}\n\n\n.font-semibold {\n  font-weight: 600;\n}\n"
  },
  {
    "path": "src/scss/web-styles/layout/_layout.scss",
    "content": ".main-features{\n  .main-features__content{\n    .main-features__img{\n      display: block;\n      margin: 0 auto .5em;\n      width: 200px;\n      height: 98px;\n      background: url(../images/ed-grid--features.png);\n      background-size: 200px;\n    }\n  }\n}\n"
  },
  {
    "path": "src/scss/web-styles/libraries/_prism.scss",
    "content": "/* PrismJS 1.9.0\nhttp://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+scss&plugins=line-numbers+toolbar+show-language+copy-to-clipboard */\n/**\n * okaidia theme for JavaScript, CSS and HTML\n * Loosely based on Monokai textmate theme by http://www.monokai.nl/\n * @author ocodia\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n  color: #f8f8f2;\n  background: none;\n  text-shadow: 0 1px rgba(0, 0, 0, 0.3);\n  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.5;\n\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n  padding: 1em;\n  overflow: auto;\n  border-radius: 0.3em;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  background: #272822;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n  padding: .1em;\n  border-radius: .3em;\n  white-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n  color: slategray;\n}\n\n.token.punctuation {\n  color: #f8f8f2;\n}\n\n.namespace {\n  opacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.constant,\n.token.symbol,\n.token.deleted {\n  color: #f92672;\n}\n\n.token.boolean,\n.token.number {\n  color: #ae81ff;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n  color: #a6e22e;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string,\n.token.variable {\n  color: #f8f8f2;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.function {\n  color: #e6db74;\n}\n\n.token.keyword {\n  color: #66d9ef;\n}\n\n.token.regex,\n.token.important {\n  color: #fd971f;\n}\n\n.token.important,\n.token.bold {\n  font-weight: bold;\n}\n.token.italic {\n  font-style: italic;\n}\n\n.token.entity {\n  cursor: help;\n}\n\npre.line-numbers {\n  position: relative;\n  padding-left: 3.8em;\n  counter-reset: linenumber;\n}\n\npre.line-numbers > code {\n  position: relative;\n  white-space: inherit;\n}\n\n.line-numbers .line-numbers-rows {\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  font-size: 100%;\n  left: -3.8em;\n  width: 3em; /* works for line-numbers below 1000 lines */\n  letter-spacing: -1px;\n  border-right: 1px solid #999;\n\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n}\n\n.line-numbers-rows > span {\n  pointer-events: none;\n  display: block;\n  counter-increment: linenumber;\n}\n\n.line-numbers-rows > span:before {\n  content: counter(linenumber);\n  color: #999;\n  display: block;\n  padding-right: 0.8em;\n  text-align: right;\n}\npre.code-toolbar {\n  position: relative;\n}\n\npre.code-toolbar > .toolbar {\n  position: absolute;\n  top: .3em;\n  right: .2em;\n  transition: opacity 0.3s ease-in-out;\n  opacity: 0;\n}\n\npre.code-toolbar:hover > .toolbar {\n  opacity: 1;\n}\n\npre.code-toolbar > .toolbar .toolbar-item {\n  display: inline-block;\n}\n\npre.code-toolbar > .toolbar a {\n  cursor: pointer;\n}\n\npre.code-toolbar > .toolbar button {\n  background: none;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  overflow: visible;\n  padding: 0;\n  -webkit-user-select: none; /* for button */\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\npre.code-toolbar > .toolbar a,\npre.code-toolbar > .toolbar button,\npre.code-toolbar > .toolbar span {\n  color: #bbb;\n  font-size: .8em;\n  padding: 0 .5em;\n  background: #f5f2f0;\n  background: rgba(224, 224, 224, 0.2);\n  box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);\n  border-radius: .5em;\n}\n\npre.code-toolbar > .toolbar a:hover,\npre.code-toolbar > .toolbar a:focus,\npre.code-toolbar > .toolbar button:hover,\npre.code-toolbar > .toolbar button:focus,\npre.code-toolbar > .toolbar span:hover,\npre.code-toolbar > .toolbar span:focus {\n  color: inherit;\n  text-decoration: none;\n}\n\n"
  },
  {
    "path": "src/scss/web-styles/theme/_banner.scss",
    "content": ".main-banner {\n  @include to(l) {\n    .center [class*=\"button\"] {\n      font-size: fontSize(smaller);\n      margin : .5em;\n    }\n  }\n}\n"
  },
  {
    "path": "src/scss/web-styles/theme/_footer.scss",
    "content": ".main-footer {\n  padding :  2rem 0;\n  p {\n    opacity : .6;\n    margin : 0;\n  }\n\n  a:hover {\n    text-decoration : none;\n  }\n}\n"
  },
  {
    "path": "src/scss/web-styles/theme/_icons.scss",
    "content": "@charset \"UTF-8\";\n\n@font-face {\n  font-family : \"edgrid-website\";\n  src         : url(\"../fonts/edgrid-website.eot\");\n  src         : url(\"../fonts/edgrid-website.eot?#iefix\") format(\"embedded-opentype\"),\n  url(\"../fonts/edgrid-website.woff\") format(\"woff\"),\n  url(\"../fonts/edgrid-website.ttf\") format(\"truetype\"),\n  url(\"../fonts/edgrid-website.svg#edgrid-website\") format(\"svg\");\n  font-weight : normal;\n  font-style  : normal;\n\n}\n\n[data-icon]:before {\n  font-family             : \"edgrid-website\", sans-serif !important;\n  content                 : attr(data-icon);\n  font-style              : normal !important;\n  font-weight             : normal !important;\n  font-variant            : normal !important;\n  text-transform          : none !important;\n  speak                   : none;\n  line-height             : 1;\n  -webkit-font-smoothing  : antialiased;\n  -moz-osx-font-smoothing : grayscale;\n}\n\n[class^=\"icon-\"]:before,\n[class*=\" icon-\"]:before {\n  font-family             : \"edgrid-website\", sans-serif !important;\n  font-style              : normal !important;\n  font-weight             : normal !important;\n  font-variant            : normal !important;\n  text-transform          : none !important;\n  speak                   : none;\n  line-height             : 1;\n  -webkit-font-smoothing  : antialiased;\n  -moz-osx-font-smoothing : grayscale;\n}\n\n.icon-docs:before {\n  content : \"\\61\";\n}\n\n.icon-slack:before {\n  content : \"\\62\";\n}\n\n.icon-github:before {\n  content : \"\\63\";\n}\n\n.icon-link-external:before {\n  content : \"\\64\";\n}\n\n.icon-download:before {\n  content : \"\\65\";\n}\n\n.icon-left:before {\n  content : \"\\66\";\n}\n"
  },
  {
    "path": "src/scss/web-styles/theme/_typography.scss",
    "content": ""
  },
  {
    "path": "test.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Title</title>\n  <link rel=\"stylesheet\" href=\"css/styles.css\">\n  <style>\n    .dev .ed-grid {\n      outline: 1px solid hsl(0,100%,80%);\n      padding : 5px;\n      position : relative;\n    }\n    .dev .ed-grid::before {\n      content: attr(class);\n      position : absolute;\n      bottom : 0;\n      right : 0;\n      background : hsl(0,100%,80%);\n      color: #fff;\n      padding : 2px 6px;\n      opacity : .9;\n    }\n    .dev .ed-grid > * {\n      outline: 1px solid hsl(120,100%,40%);\n      position : relative;\n    }\n\n    .dev .ed-grid > *::before {\n      font-size : 14px;\n      font-weight : normal;\n      content: attr(class);\n      position : absolute;\n      bottom : 0;\n      right : 0;\n      background : hsl(120,100%,40%);\n      color: #fff;\n      padding : 2px 6px;\n      opacity : .9;\n    }\n  </style>\n</head>\n<body>\n\n</body>\n</html>\n"
  }
]