/**
 * RESUMEN
 *
 * Este archivo maneja el layout del sitio web. En lugar de configurar
 * los componentes de los layouts uno por uno, creamos un sistema separado
 * que sólo tiene un propósito: 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. Cuando necesitamos una canaleta (gutter) vertical entre dos containers
 * usamos estas clases. Se escalan a sí mismas automáticamente para que así
 * se salten la mitad del whitespace entre dos elementos. Cuando dos elementos
 * se colocan uno al lado del otro, una canaleta con el tamaño apropiado aparece
 * entre ellos automáticamente. Para obtener todo el efecto, debemos hacer float
 * a un elemento hacia la izquierda, y el otro a la derecha con las clases correctas.
 *
 * 2. Si necesitas centrar un elemento horizontalmente, usa esta class.
 *
 * 3. 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--full-width           	{ width: 100%; }

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

.layout__item--66-percent-w-gutter  	{ width: calc(66.6% - 1.071rem); } /* [1] */

.layout__item--50-percent-w-gutter  	{ width: calc(50%   - 1.071rem); } /* [1] */

.layout__item--33-percent-w-gutter  	{ width: calc(33.3% - 1.071rem); } /* [1] */


.layout__item--content-w-sticked-footer { min-height: calc(100vh - 80px); }


.layout__item--centered-horizontally { /* [2] */
  margin-left:  auto;
  margin-right: auto;
}


 .layout__item--floated-left  { float: left; } /* [3] */
 .layout__item--floated-right { float: right; }/* [3] */





/*------------------------------------*\
  #CANALETAS
\*------------------------------------*/

.gutter--horizontal-small { margin-bottom: 2.142rem; }

.gutter--horizontal-big   { margin-bottom: 2.857rem; }





/*------------------------------------*\
  #HELPERS
\*------------------------------------*/

.clearfix:after {
  content:  "";
  display:  table;
  clear:	both;
}