/*
	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%; }

/* ***** */


/* ******* */
/* FONTS   */
/* ******* */
/* Brandon Grotesque Light */
@font-face {
    font-family: 'BrandonGrotesqueLight';
    src: url('fonts/brandon_light-webfont.eot');
    src: url('fonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_light-webfont.woff2') format('woff2'),
         url('fonts/brandon_light-webfont.woff') format('woff'),
         url('fonts/brandon_light-webfont.ttf') format('truetype'),
         url('fonts/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Brandon Grotesque Medium */
@font-face {
    font-family: 'BrandonGrotesqueMedium';
    src: url('fonts/brandon_med-webfont.eot');
    src: url('fonts/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_med-webfont.woff2') format('woff2'),
         url('fonts/brandon_med-webfont.woff') format('woff'),
         url('fonts/brandon_med-webfont.ttf') format('truetype'),
         url('fonts/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Brandon Grotesque Regular */
@font-face {
    font-family: 'BrandonGrotesque';
    src: url('fonts/brandon_reg-webfont.eot');
    src: url('fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('fonts/brandon_reg-webfont.woff') format('woff'),
         url('fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('fonts/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Brandon Grotesque Regular */
@font-face {
    font-family: 'BrandonGrotesqueBold';
    src: url('fonts/brandon_bld-webfont.eot');
    src: url('fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_bld-webfont.woff2') format('woff2'),
         url('fonts/brandon_bld-webfont.woff') format('woff'),
         url('fonts/brandon_bld-webfont.ttf') format('truetype'),
         url('fonts/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
	background: 	#FFF;
	font-family: 	"BrandonGrotesque", Arial, sans-serif;
	font-weight: 	300;
	color: 			#231f20;
	margin: 		0;
}


h1, h2, h3, h4, h5, h6 {
	color: 			#231f20;
    font-family: 	"BrandonGrotesque", Arial, sans-serif;
    font-style: 	normal;
    font-weight: 	normal;
    margin-bottom: 	1.8rem;
    margin-top: 	1.4rem;
}

h1 {
	font-size: 		3.7rem;
	line-height: 	5rem;
	margin: 		1rem 0 3rem;
    text-transform: uppercase;
}

h2 {
	font-size: 		2.5rem;
	line-height: 	3.4rem;
	margin: 		0;
    text-transform: uppercase;
}

h3 {
	font-size: 		2.2rem;
	line-height: 	3rem;
	margin:			1.5rem 0;
    text-align:	 	center;
    text-transform: uppercase;
	color:			black;
	text-shadow:	0 1px 0 white;
}

h4 {
	font-family:	Roboto, Arial, sans-serif;
	font-weight:	bold;
	font-size: 		1.8rem;
	line-height: 	3rem;
	margin:			1rem 0;
	color: 			#5f6f7e;
	text-shadow:	0 1px 0 white;
}



p, a, li,
table tr th, table tr td {
    font-family: 	inherit;
    font-size:		1.4rem;
    font-weight: 	inherit;
    line-height: 	2.2rem;
}
/*
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.5rem 0;
}

a,
a:visited,
a:focus,
a:hover {
	color: 			#000;
	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 {

	border: 1px solid black;
	padding: 1.4rem;
	font-family: "BrandonGrotesque";
	font-size: 1.2rem;
	line-height: 1.4rem;
	height: 4.2rem;
	text-transform: uppercase;
	width: 80%;
	box-shadow: none;
}

input[type="submit"],
input[type="button"] { 
	border: 1px solid black;
	padding: 1rem;
	font-family: "BrandonGrotesqueBold";
	font-size: 2rem;
	line-height: 1.4rem;
	height: 4.2rem;
	text-transform: uppercase;
	min-width: 150px;
	background: white;
	text-align: left;
}

textarea {
	height: 160px;
	width: 100%;
}

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

button, .button {
}

[data-abide] .error small.error, [data-abide] .error span.error, [data-abide] span.error, [data-abide] small.error { font-size: 1.2rem; }


/* 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; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }

/* 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.5rem !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: "Roboto", Arial, sans-serif;
	font-weight: 300;
	font-style: normal;
}

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

.toUpper {
	text-transform: uppercase;
}

.bran {
	font-family: "BrandonGrotesque";
}

.branBold {
	font-family: "BrandonGrotesqueBold";
}

.branMed {
	font-family: "BrandonGrotesqueMedium";
}


/* Colors */

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

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

/* Grey */
.grey-bgr { background-color: #f0f0f4 !important }
.dark-grey-bgr { background-color: #5f6f7e !important }