/*
Proyecto | Estructura
Desarrollado por Italo Estrada
Versión: 30 de Marzo de 2016
Última Actualización: 30 de Marzo de 2016
Sitio Web: responsiveshoot.com
Contácto de Desarrollo: http://estrada.work
*/
/*doc
---
title: Indice
category: index
---
Para iniciar el proyecto solamente agrega a la cabecera:
```html_example
```
Ejemplo completo:
```html_example
```
*/
/*
/* de ancho 1. Generales de ancho - - -*/
body,html{
padding: 0px;
margin: 0px;
font-family: Arial;
width: 100%;
}
div{
/*position: relative;*/
}
a{
text-decoration: none;
}
/*
Precarga: Es utilizada para cargar
imagenes sin delay en las animaciones.
*/
.precarga{
position: absolute;
width:1px;
height: 1px;
top:-10px;
left:-10px;
}
.overflow-auto{
overflow: auto;
}
.overflow-hidden{
overflow: hidden;
}
/*doc
---
title: Texto Centrado
category: General
---
Esta clase centra el texto.
```html_example
Texto Centrado Lorem Ipsum
```
*/
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
/*doc
---
title: Texto Justificado
category: General
---
Esta clase justifica el texto
```html_example
Texto Justificado Lorem Ipsum
```
*/
.justify{
text-align: justify;
}
/*doc
---
title: Float Left
category: General
---
Hace que el elemento flote a la izquerda.
```html_example
```
*/
.float-left{
float:left;
}
/*doc
---
title: Texto Izquierdo
category: General
---
Esta clase alinea el texto a la izquierda
```html_example
Texto Justificado Lorem Ipsum
```
*/
.left{
text-align: left;
}
/*doc
---
title: Texto Mayúscula
category: General
---
Esta clase convierte el texto a mayúscula
```html_example
Texto mayuscula Lorem Ipsum
```
*/
.uppercase{
text-transform: uppercase;
}
/*doc
---
title: Espacio
category: Estructura
---
Espacio para agregar
seccion-spacer
```html_example
x x x x x x x x x x x x x
x x x x x x x x x x x x x
```
seccion-spacer-half
```html_example
x x x x x x x x x x x x x
x x x x x x x x x x x x x
```
seccion-spacer-quarter
```html_example
x x x x x x x x x x x x x
x x x x x x x x x x x x x
```
*/
.seccion-spacer{
height: 40px;
width:1%;
overflow: auto;
}
.seccion-spacer-half{
height: 20px;
width:1%;
overflow: auto;
}
.seccion-spacer-quarter{
height: 10px;
width:1%;
overflow: auto;
}
.seccion-spacer-margin{
margin-top: 40px;
}
.spacer-margin-right{
margin-right: 30px;
}
.seccion-spacer-bottom{
padding-bottom: 40px;
}
.hand{
cursor:pointer;cursor: hand;
}
.relative{
position: relative;
}
/* de ancho RESPONSIVE HIDE de ancho - - -*/
@media( max-width: 1200px){.hide_until_1200{display:none;}}
@media( max-width: 900px){.hide_until_900{display:none;}}
@media( max-width: 768px){.hide_until_768{display:none;}}
@media( max-width: 600px){.hide_until_600{display:none;}}
@media( max-width: 480px){.hide_until_480{display:none;}}
@media( max-width: 320px){.hide_until_320{display:none;}}
/* de ancho CONTENEDORES de ancho - - -*/
/*doc
---
title: Container
category: Estructura
---
Contenedor que enmarca el sitio web. Es necesario para responsive.
```html_example
CONTAINER
```
*/
.container{
width:100%;
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 1400px;
overflow: hidden;
}
/*doc
---
title: Container Feature
category: Estructura
---
Contenedor que obliga a un mínimo de 500px de alto.
```html_example
Container feature 500px mínimo de alto.
```
*/
.container_feature{
min-height: 500px;
}
/*doc
---
title: Container Feature Half
category: Estructura
---
Contenedor que obliga a un mínimo de 300px de alto.
```html_example
Container feature 300px mínimo de alto.
```
*/
.container_feature_half{
min-height: 300px;
}
/*doc
---
title: Container Feature Quarter
category: Estructura
---
Contenedor que obliga a un mínimo de 70px de alto.
```html_example
Container feature 70px mínimo de alto.
```
*/
.container_feature_quarter{
min-height: 70px;
}
/*doc
---
title: Container Width
category: Estructura
---
Contenedor con ancho regulado. Por porcentaje.
Nota la classe Marged centra el div por medio de margin
Para estas clases tenemos:
`.container_width_100` : Contenedor al 100%
`.container_width_90` : Contenedor al 90%
`.container_width_80` : Contenedor al 80%
`.container_width_70` : Contenedor al 70%
`.container_width_60` : Contenedor al 60%
`.container_width_50` : Contenedor al 50%
```html_example
Contenedor al 100% de ancho
```
```html_example
Contenedor al 90% de ancho
```
```html_example
Contenedor al 80% de ancho
```
```html_example
Contenedor al 70% de ancho
```
```html_example
Contenedor al 60% de ancho
```
```html_example
Contenedor al 50% de ancho
```
*/
/*doc
---
title: Padding
category: Estructura
---
Genera un espacio de padding a los elementos. De 3%
```html_example
Padding
```
*/
.padding{
padding:3%;
}
.absolute{
position: absolute;
}
.absolute-top-left{position: absolute;top:0px;left:0px;}
.absolute-top-right{position: absolute;top:0px;right:0px;}
.absolute-bottom-left{position: absolute;bottom:0px;left:0px;}
.absolute-bottom-right{position: absolute;bottom:0px;right:0px;}
/*doc
---
title: Container Feature
category: Estructura
---
Contenedor que obliga a un mínimo de 500px de alto.
```html_example
Container feature 400px mínimo de alto.
```
*/
.container_width_100{width: 100%;}
.container_width_90{width: 90%;}
.container_width_80{width: 80%;}
.container_width_70{width: 70%;}
.container_width_60{width: 60%;}
.container_width_50{width: 50%;}
.container_width_90.marged{ margin-left: 5%;}
.container_width_80.marged{ margin-left: 10%;}
.container_width_70.marged{ margin-left: 15%;}
.container_width_60.marged{ margin-left: 20%;}
.container_width_50.marged{ margin-left: 25%;}
@media( max-width: 768px){
.container_width_100{width: 100%;}
.container_width_90{width: 90%;}
.container_width_80{width: 90%;}
.container_width_70{width: 90%;}
.container_width_60{width: 90%;}
.container_width_50{width: 90%;}
.container_width_90.marged{ margin-left: 5%;}
.container_width_80.marged{ margin-left: 5%;}
.container_width_70.marged{ margin-left: 5%;}
.container_width_60.marged{ margin-left: 5%;}
.container_width_50.marged{ margin-left: 5%;}
}
/* de ancho - GRID COLUMNS de ancho - - - - - */
/*doc
---
title: Grid Container
category: Estructura
---
Para poder aplicar un contenedor de grid, es necesario la clase `grid-container`
y cada columna debe de ser declarada también. `grid-columna`
`Dos columnas`
```html_example
