/*
	UTILIZAR LA REGLA DEL  62.5% CON FOUNDATION
	
	Foundation utiliza la unidad de medida 'em' para construir su grilla. La unidad
	de medida 'em' toma como referencia al font-size del elemento raíz (html) y la multiplica
	por la cantidad especificada. Normalmente, 1em equivale a 16px, por lo tanto el ancho
	de la grilla de Foundation, por default 62.5em, equivale a 1000px.
	
	Si queremos usar la regla del 62.5% conjuntamente con la unidad de medida 'rem', debemos
	establecer -> html { font-size: 62.5% }, lo que haría que 1em sea equivalente a 10px
	
		1em = 16px
		1em * 62.5% = 10px
	
	Y por consiguiente, se redujera toda la grilla de Fonudation. Para evitar esto, hay que
	customizar Foundation (http://foundation.zurb.com/develop/download.html) con estos valores:
	
		'grid max-width' 		= 120em		[queda en 1200px]
		'gutter' 				= 3em		[queda en 30px]
		'topbar breakpoint' 	= 94em		[queda en 940px]
		
	Estos presets son los que ajustan la grilla de Foudation para contrarestar el efecto
	de "achicamiento" que se produce al usar html { font-size: 62.5% }
	Se pueden usar otros presets, siempre teniendo en cuenta que 1em corresponderá a 10 pixeles.
		
*/


html { font-size: 	62.5%; }

/* ***** */


body {
	background: 	#f4f3f0;
	font-family: 	"ProximaNova", Arial, sans-serif;
	font-weight: 	400;
	color: 			#FFF;
	margin: 		0;
}

h1, h2, h3, h4, h5, h6 {
	color: 			#FFF;
    font-family: 	inherit;
    font-style: 	normal;
    font-weight: 	700;
    margin-bottom: 	1.8rem;
    margin-top: 	1.4rem;
}

h1 {
	font-size: 		3.2rem;
	line-height: 	4rem;
	color: 			#800000;
}

h2 {
	font-size: 		2.4rem;
	line-height: 	2.8rem;
	font-weight: 	600;
	color: 			white;
	margin: 		1rem 0 1rem 0;
}

h3 {
	font-size: 		2.1rem;
	line-height: 	2.5rem;
	font-weight: 	600;
	color: 			white;
	margin: 		.5rem 0 1.5rem 0;
}

h4 {
	font-size: 		1.8rem;
	line-height: 	2.2rem;
	font-weight: 	400;
	color:			white;
	margin: 		2rem 0;
}

.cld {
	font-family: 	"ClarendonBold";
	font-weight:	400;
	text-transform:	uppercase;
}

#home h4.cld {
	margin: 		.5rem 0 1.5rem 0;
}

p, a, li,
table tr th, table tr td {
    font-family: 	inherit;
    font-size: 		1.4rem;
    font-weight: 	400;
    line-height: 	1.8rem;
}

table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
	line-height: 1.8rem;
}

p {
	margin: 		1.25rem 0;
}

a,
a:visited,
a:focus,
a:hover {
	color: 			#FFF;
	text-decoration:none;
}

ul:not(.list) {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
}

strong, b {
	font-weight: 	700;
}

label {
	font-size: 		1.4rem;
	line-height: 	2.4rem;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, button, .button {
	font-size: 		1.4rem;
	/*line-height: 	2.4rem;*/
	/*
	padding: 		.8rem;
	height: 		3.7rem;
	*/
}

button.small, .button.small {
	font-size: 		1rem;
	line-height: 	1.6rem;
	
}

button, .button {
	/*
	padding: 		.8rem 3rem;
	text-transform: uppercase
	*/
}


/* Display */

.block { display: block; }


/* Margins & paddings */

.p10 { padding: 1rem !important; }
.p15 { padding: 1.5rem !important; }
.p20 { padding: 2rem !important; }

.pLR10 { padding: 0 1rem !important; }
.pLR15 { padding: 0 1.5rem !important; }
.pLR20 { padding: 0 2rem !important; }

.pr50 { padding-right: 5rem !important }
.pr100 { padding-right: 10rem !important }

.no-margin { margin: 0 !important; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }

/* Fonts */

.fs10 { font-size: 1rem !important; line-height: 1.2rem !important; }
.fs12 { font-size: 1.2rem !important; line-height: 1.4rem !important; }
.fs13 { font-size: 1.3rem !important; line-height: 1.5rem !important; }
.fs14 { font-size: 1.4rem !important; line-height: 1.6rem !important; }
.fs15 { font-size: 1.5rem !important; line-height: 1.8rem !important; }
.fs16 { font-size: 1.6rem !important; line-height: 1.9rem !important; }
.fs17 { font-size: 1.7rem !important; line-height: 2rem !important; }
.fs18 { font-size: 1.8rem !important; line-height: 2.2rem !important; }
.fs20 { font-size: 2rem !important; line-height: 2.4rem !important; }
.fs22 { font-size: 2.2rem !important; line-height: 2.6rem !important; }
.fs24 { font-size: 2.4rem !important; line-height: 2.8rem !important; }

.light {
	font-family: "ProximaNovaLight", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.italic,
em {
	font-family: "ProximaNovaItalic", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}

strong em {
	font-family: "ProximaNovaBoldItalic", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.semibold {
	font-family: "ProximaNovaSemibold", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}


.bold,
strong {
	font-family: "ProximaNovaBold", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.boldItalic {
	font-family: "ProximaNovaBoldItalic", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.to-upper {
	text-transform: uppercase;
}

/* Colors */

/* Grey */
.grey { color: #cac4b2 !important; }
.grey-bgr { background-color: #cac4b2 !important; }

/* Very Light grey */
.very-light-grey { color: #f4f3f0 !important; }
.very-light-grey-bgr { background-color: #f4f3f0 !important; }

/* White */
.white { color: white !important; }
.white-bgr { background-color: white !important; }

/* Electric Blue (Facebook) */
.electric-blue { color: #405ba8 !important; }
.electric-blue-bgr { background-color: #405ba8 !important; }


/* *** Guarda **** */

/* Yellow */
.yellow { color: #fdc400  !important }
.yellow-bgr { background-color: #fdc400  !important }

/* Green */
.green { color: #97bf15  !important }
.green-bgr { background-color: #97bf15  !important }

/* Ocre */
.ocre { color: #e1ab00  !important }
.ocre-bgr { background-color: #e1ab00  !important }

/* Red */
.red { color: #c71625  !important }
.red-bgr { background-color: #c71625  !important }

/* Orange */
.orange { color: #e95d16  !important }
.orange-bgr { background-color: #e95d16  !important }

/* Pink */
.pink { color: #d20072  !important }
.pink-bgr { background-color: #d20072  !important }

/* Turquoise */
.turquoise { color: #00a095  !important }
.turquoise-bgr { background-color: #00a095  !important }

/* Blue */
.blue { color: #007aad  !important }
.blue-bgr { background-color: #007aad  !important }

/* Violet */
.violet { color: #773e8c  !important }
.violet-bgr { background-color: #773e8c  !important }

/* Light brown */
.brown { color: #958968  !important }
.brown-bgr { background-color: #958968  !important }

/* Light grey */
.light-grey { color: #cac4b2  !important }
.light-grey-bgr { background-color: #cac4b2  !important }

/* Multicolor */
.multicolor-bgr {
	background: url(../img/multicolor-bgr.png) left top repeat-y;
	background-size: 100%;
}