/**
 * RESUMEN
 *
 * Este archivo maneja el layout del sitio web. En lugar de configurar
 * los componentes del layout uno por uno, creamos un sistema separado
 * que sólo tiene un objetivo: decirle a cada elemento qué tamaño
 * debe tener y dónde debe aparecer.
 *
 * Las clases declaradas aquí pueden ser invocadas en cualquier container
 * para que sean del tamaño correcto y se comporten de la manera correcta.
 */


/**
 * TABLA DE CONTENIDOS 
 *
 * LAYOUT
 * Elementos.................Las reglas de tamaños de los containers.
 * Modificadores..............Las reglas que modifican al layout; ej. floats.
 *
 * CANALETAS
 * Canaletas horizontales....Las reglas de los whitespace horizontales entre los containers.
 *
 * HELPERS
 * Clearfix...............Una class que puede ser invocada en containers floated.
 */





/*------------------------------------*\
  #LAYOUT
\*------------------------------------*/

/**
 * 1. Si necesitas hacer float a un elemento, estas clases son para ti.
 * No olvides invocar a la class .clearfix, 
 * de la sección  HELPERS, en el container.
 */

 .layout__item--75-percent { width: 75%; }

 .layout__item--25-percent { width: 25%; }
 
 
 .layout__item--floated-left  { float: left; } /* [2] */
 
 .layout__item--floated-right { float: right; }/* [2] */
 
 
 
 
 
 /*------------------------------------*\
   #HELPERS
 \*------------------------------------*/
 
 .clearfix:after {
   content:  "";
   display:  table;
   clear:    both;
 }