/* INCLUYE BASE; LAYOUT, GRID */

/**
 * 	Name: base.css
 *
 *	T.O.C
 *
 *	=CssReset
 *  =Typography
 *  =Typography - Links
 *  =Typography - Lists
 *  =Typography - Images
 *  =Typography - Tables
 *  =Typography - Forms
 *  =Misc
 *
 */


/* ==========================================================================
   =CssReset
   ========================================================================== */
* {
	 box-sizing:  content-box;
	 -webkit-box-sizing:  content-box;
	 font-family: 'Roboto', Arial, sans-serif ;
}


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote,
	a, abbr, acronym, address, big, cite,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	/* HTML5 display-role reset for older browsers */

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol,
	ul {
		list-style: none;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/**
	 * 1. Always force vertical scroll
	 * 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
	 * 3. For animations
	 */

	html {
		font-size: 100%;
		overflow-y: scroll; /* 1  */
		-ms-text-size-adjust: 100%; /* 2 */
    	-webkit-text-size-adjust: 100%; /* 2 */
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden; /* 3 */
	}

/* ==========================================================================
   =Typography
   ========================================================================== */

	body {
		background-color: #fff;
		color: #7a7885;
		font: 14px "Roboto", Arial, sans-serif;
		line-height: 24px;
		font-weight: normal;
		/*letter-spacing: 1.5px;*/
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Roboto', Arial, sans-serif;
		font-weight: 900;
		text-transform: uppercase;
	}

	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
		color: #7a7885;
		font-weight: inherit;
	}



h1 {
	font-size: 32px;
	line-height: 54px;
	margin-bottom: 24px;
	letter-spacing: 5px;
	font-weight: bold;
	text-transform: inherit;
	color: black;
}
h1 a:hover{
	text-decoration: none;
	color: #F39200;
}


h2 {
	font-size: 23px;
	line-height: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: inherit;
	text-align: left;
	color: black;
}


h3 {
	font-size: 19px;
	line-height: normal;
	margin-top: 28px;
	margin-bottom: 18px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: inherit;
	text-align: left;
	color: black;
}



	h4 {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 24px;
		letter-spacing: 2px;
	}

	h5 {
		font-size: 14px;
		line-height: 21px;
		margin-bottom: 2px;
		letter-spacing: 2px;
	}

	h6 {
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
	}

	p { margin-bottom: 20px; }
	em { font-style: italic; }
	strong { font-weight: 700; }
	small { font-size: 90%; }

	sub {
		vertical-align: sub;
		font-size: 75%;
	}

	sup {
		vertical-align: super;
		font-size: 75%;
	}

	abbr[title] {
		border-bottom: 1px dotted #999;
		cursor: help;
	}

	address {
		display: block;
		margin-bottom: 20px;
	}

	blockquote {}

	blockquote p { font-style: italic; }

	blockquote span {
		display: block;
		margin-top: 5px;
		color: #999999;
	}

	blockquote span:before { content: "\2013 \00A0"; }

	hr {
		height: 0;
		border: solid #e0e0e0;
		border-width: 1px 0 0 0;
		margin: 30px 0;
	}




	/* Typography Helper Classes */

	/**
	 * <div class="hr"></div> acts like an <hr />
	 */

	.hr {
		border-top: 1px solid #e0e0e0;
		margin: 30px 0;
	}

	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-center { text-align: center; }

	.text-highlight {
		padding: 10px;
		border-radius: 2px;
		background-color: #f6f6f6;
		color: #7a7885;
	}

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

	.mute{ color: #999; }

	p.last,
	h1.last,
	h2.last,
	h3.last,
	h4.last,
	h5.last,
	address.last { margin-bottom: 0; }

	@media (max-width: 767px) {

		/**
		 * 1. Hide background on mobile devices
		 */

		body {
			background: none; /* 1 */
			background-color: #fff;
		}

		p.last,
		h1.last,
		h2.last,
		h3.last,
		h4.last,
		h5.last,
		address.last { margin-bottom: 20px; }

		.text-right { text-align: left; }

	}

/* ==========================================================================
   =Typography - Links
   ========================================================================== */

	a,
	a:visited {
		color: #5c5a69;
		text-decoration: none;
	}

   /**
	* 1. Remove the gray background color from active links in IE 10.
	*/

	a:active {
 		background: transparent; /* 1 */
	}

	a:hover,
	a:focus {
		color: #5c5a69;
		outline: 0;
		text-decoration: underline;
	}

/* ==========================================================================
   =Typography - Lists
   ========================================================================== */

	ul,
	ol {
		margin-bottom: 20px;
		list-style-position: inside;
	}

	ul ul,
	ul ol,
	ol ol,
	ol ul {
		margin-bottom: 0;
		margin-left: 30px;
	}

	li {}

	ul { list-style-type: disc; }
	ol { list-style-type: decimal; }

	/* List Helper Classes */

	ul.last,
	ol.last { margin-bottom: 0; }

	@media (max-width: 767px) {

		ul.last,
		ol.last { margin-bottom: 20px; }

	}

/* ==========================================================================
   =Typography - Images
   ========================================================================== */

	img {
		max-width: 100%;
		height: auto;
		border: none;
	}

	/* Images Helper Classes */

	.img-align-left {
		float: left;
		margin: 10px 20px 0 0;
	}

	.img-align-right {
		float: right;
		margin: 5px 0 0 10px;
	}

/* ==========================================================================
   =Typography - Tables
   ========================================================================== */

	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		margin-bottom: 20px;
		background-color: transparent;
	}

	caption {
		margin: 20px 0;
		font-weight: 700;
		text-align: center;
	}

	table th,
	table td {
		padding: 8px;
		border-top: 1px solid #7a7885;
		vertical-align: top;
	}

	table th {
		border-top: 0;
		font-weight: 700;
	}

	table thead th { vertical-align: bottom; }

/* ==========================================================================
   =Typography - Forms
   ========================================================================== */

	form {}

	fieldset {}

	form p {}

	label {
		display: block;
		margin-bottom: 5px;
	}

	label span { color: #d50f25; }

	select,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	input[type="radio"],
	input[type="checkbox"] { cursor: pointer; }

	/*
	 * 1. stop safari from overwriting input styles
	 */

	input,
	textarea,
	select {
		-webkit-appearance: none; /* 1 */
		display: block;
		max-width: 100%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 10px 20px;
		border: 2px solid #d7d7d7;
		border-radius: 3px;
		margin-bottom: 10px;
		background: #fff;
		font: 14px "Roboto", Arial, sans-serif;
		line-height: 21px;
	}

	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	textarea:focus {
		border-color: #7a7885;
		outline: 0;
	}

	select { height: 55px; }

	select:focus {
	  outline: thin dotted #bbb;
	  outline: 5px auto -webkit-focus-ring-color;
	  outline-offset: -2px;
	}

	textarea {
		min-height: 100px;
		overflow: auto;
	}

	.radio,
	.checkbox {
		min-height: 18px;
		padding-left: 18px;
	}

	.radio input[type="radio"],
	.checkbox input[type="checkbox"] {
		float: left;
		margin-left: -18px;
	}

	input:-moz-placeholder,
	textarea:-moz-placeholder {
		color: #999;
	}

	input:-ms-input-placeholder,
	textarea:-ms-input-placeholder {
		color: #999;
	}

	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder {
		color: #999;
	}





/* ==========================================================================
   =Menu
   ========================================================================== */

/* =Menu Basics
   ========================================================================== */

	.sf-menu,
	.sf-menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.sf-menu > li { float: left; }

	.sf-menu > li > a {
		position: relative;
		display: block;
	}

	/**
 	 * 1. z-index is 1025 because the sticky menu is 1020
 	 */

	.sf-menu .sf-mega,
	.sf-menu li.dropdown ul {
		position: absolute;
		z-index: 1025; /* 1 */
		top: 100%;
		left: 0;
		display: none;
	}

	.sf-menu li.dropdown { position: relative; }

	.sf-menu li.dropdown ul ul {
		top: -1px;
		left: 100%;
	}

	.sf-menu li:hover > .sf-mega,
	.sf-menu li.sfHover > .sf-mega,
	.sf-menu li.dropdown:hover > ul,
	.sf-menu li.dropdown.sfHover > ul { display: block; }

/* =Menu Skin
   ========================================================================== */

	.sf-menu { float: right; }

	.sf-menu a {
		display: block;
		padding: 15px 0;
		border-bottom: 1px solid #d7d7d7;
		font: 13px 'Roboto', Arial, sans-serif;
		font-weight: 400;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
	}

	.sf-menu li.dropdown a { padding: 20px; }

	.sf-menu li:last-child > a { border-bottom: none; }

	.sf-menu > li > a,
	.sf-menu > li.dropdown > a {
		padding: 27px 15px;
		border: none;
		color: #7a7885;
		font-size: 16px;
		font-weight: 500;
	}

	.sf-menu > li a i { margin-right: 5px; }

	.sf-menu > li.current > a,
	.sf-menu > li > a:hover,
	.sf-menu li.sfHover > a {
		color: #565462;
		text-decoration: none;
	}

/* =DropDown
   ========================================================================== */

	/**
 	 * 1. allow long menu items to determine submenu width
 	 */

	.sf-menu li.dropdown ul {
		min-width: 245px; /* 1 */
		border: 1px solid rgba(0, 0, 0, 0.1);
		background-color: #7a7885;
	}

	.sf-menu > li.dropdown > ul {}

	.sf-menu > li.dropdown > ul li a:hover,
	.sf-menu > li.dropdown > ul li.sfHover > a { color: #d7d7d7; }

/* =Mega Menu Section
   ========================================================================== */

	.sf-mega {
		width: 100%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 15px 0;
		border: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 0;
		background-color: #7a7885;
		color: #fff;
	}

	.sf-mega-section {
		float: left;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 0 25px;
		border-right: 1px solid #d7d7d7;
	}

	.sf-mega-section:last-child { border-right: none; }

	.sf-mega-section a:hover { color: #d7d7d7; }

	.sf-mega-section .btn {
		display: inline-block;
		padding: 5px 10px;
		border: 2px solid #fff;
	}

	/**
 	 * 1. set mega menu section size, as a percentage of the mega menu width
 	 */

	.sf-mega.sf-mega-1-col .sf-mega-section{ width: 100%; } /* 1 */

	.sf-mega.sf-mega-2-col .sf-mega-section{ width: 50%; }

	.sf-mega.sf-mega-3-col .sf-mega-section{ width: 33.3333333333%; }

	.sf-mega.sf-mega-4-col .sf-mega-section{ width: 25%; }

/* =Menu Arrows
   ========================================================================== */

	.sf-arrows .sf-with-ul:after {
		position: absolute;
		top: 50%;
		right: 0;
		width: 0;
		height: 0;
		border: 4px solid transparent;
		border-top-color: #7a7885;
		margin-top: -3px;
		content: "";
	}

	.sf-arrows > li > .sf-with-ul:focus:after,
	.sf-arrows > li:hover > .sf-with-ul:after,
	.sf-arrows > .sfHover > .sf-with-ul:after {  }

	.sf-arrows ul .sf-with-ul:after {
		border-color: transparent;
		border-left-color: #fff;
		margin-top: -5px;
		margin-right: 10px;
	}

	.sf-arrows ul li > .sf-with-ul:focus:after,
	.sf-arrows ul li:hover > .sf-with-ul:after,
	.sf-arrows ul .sfHover > .sf-with-ul:after {  }

	@media (min-width: 768px) and (max-width: 979px) {

		#menu { display: none; }

	}

	@media (max-width: 767px) {

		#menu { display: none; }

	}

/* ==========================================================================
   =Mobile Menu
   ========================================================================== */

	#mobile-menu {
		border-bottom: 1px solid #e0e0e0;
		margin-bottom: 0;
	}

	#mobile-menu li {
		display: block;
		margin: 0;
	}

	#mobile-menu > li > ul,
	#mobile-menu > li > ul > li > ul {
		display: none;
		margin-left: 0;
	}

	#mobile-menu .sf-mega {
		display: none;
		padding: 0;
		border: none;
		margin: 0;
		background-color: #fff;
	}

	#mobile-menu .sf-mega-section {
		float: none;
		width: 100%;
		padding: 0;
		border: none;
	}

	#mobile-menu .sf-mega-section ul { margin-left: 0; }

	#mobile-menu li a {
		position: relative;
		display: block;
		padding: 15px 25px;
		border-top: 1px solid #e0e0e0;
		color: #111;
		font-size: 13px;
		text-align: left;
		text-decoration: none;
	}

	#mobile-menu ul a { padding-left: 45px; }

	#mobile-menu ul li ul a  { padding-left: 65px; }

	#mobile-menu .mobile-menu-submenu-arrow {
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 100%;
		border-left: 1px solid #e0e0e0;
		color: #111;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
	}

	#mobile-menu .mobile-menu-submenu-arrow:hover { background-color: #f3f3f3; }

	#mobile-menu li a:hover {}

	#mobile-menu { display: none; }

/* ==========================================================================
   =Mobile menu trigger
   ========================================================================== */

	#mobile-menu-trigger {
		float: right;
		display: none;
		font-size: 32px;
	}

	@media (min-width: 768px) and (max-width: 979px) {

		#mobile-menu-trigger {
			display: block;
			margin-top: 72px;
			margin-right: 0;
		}

	}

	@media (max-width: 767px) {

		#mobile-menu-trigger {
			position: absolute;
			top: 14px;
			right: 20px;
			display: block;
			padding: 10px;
			margin-top: 0;
		}

	}

	@media only screen and (min-width: 480px) and (max-width: 767px) {

		#mobile-menu-trigger { right: 30px; }

	}






/**
 *	Name: grid.css
 *
 *	T.O.C
 *
 *	=Base Grid
 *	=Large Display
 *	=Tablet (Portrait)
 *	=Mobile (Portrait and Landscape )
 *	=Portrait and landscape
 *	=Landscape
 *	=Align
 *	=Responsive Images and Embeds
 *	=Clearing
 *	=ResponsiveFormInputs
 *
 */


/* ==========================================================================
   =Base Grid
   ========================================================================== */

	.row {
		position: relative;
		width: 940px;
		margin: 0 auto;
	}

	.row .row {
		width: auto;
		margin: 0;
	 }

 	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 { float: left; }

	.span1 {
		width: 60px;
		margin-left: 20px;
	}

	.span2 {
		width: 140px;
		margin-left: 20px;
	}

	.span3 {
		width: 220px;
		margin-left: 20px;
	}

	.span4 {
		width: 368px;
		margin-left: 20px;
	}

	.span5 {
		width: 380px;
		margin-left: 20px;
	}

	.span6 {
		width: 460px;
		margin-left: 20px;
	}

	.span7 {
		width: 540px;
		margin-left: 20px;
	}

	.span8 {
		width: 620px;
		margin-left: 20px;
	}

	.span9 {
		width: 700px;
		margin-left: 20px;
	}

	.span10 {
		width: 841px;
		margin-left: 14px;
	}

	.span11 {
		width: 860px;
		margin-left: 20px;
	}

	.span12 {
		width: 940px;
		margin-left: 20px;
	}

	.span1:first-child,
	.span2:first-child,
	.span3:first-child,
	.span4:first-child,
	.span5:first-child,
	.span6:first-child,
	.span7:first-child,
	.span8:first-child,
	.span9:first-child,
	.span10:first-child,
	.span11:first-child,
	.span12:first-child { margin-left: 0; }

	.visible-phone { display: none !important; }
	.visible-tablet { display: none !important; }
	.hidden-desktop { display: none !important; }
	.visible-desktop { display: inherit !important; }

/* ==========================================================================
   =Large Display
   ========================================================================== */

	@media (min-width: 1400px) {

		.row { width: 1170px; }

		.span1 {
			width: 70px;
			margin-left: 30px;
		}

		.span2 {
			width: 170px;
			margin-left: 30px;
		}

		.span3 {
			width: 270px;
			margin-left: 30px;
		}

		.span4 {
			width: 462px;
			margin-left: 30px;
		}

		.span5 {
			width: 470px;
			margin-left: 30px;
		}

		.span6 {
			width: 570px;
			margin-left: 30px;
		}

		.span7 {
			width: 670px;
			margin-left: 30px;
		}

		.span8 {
			width: 770px;
			margin-left: 30px;
		}

		.span9 {
			width: 870px;
			margin-left: 30px;
		}

		.span10 {
			width: 1040px;
			margin-left: 30px;
		}

		.span11 {
			width: 1070px;
			margin-left: 30px;
		}

		.span12 {
			width: 1170px;
			margin-left: 30px;
		}

	}

/* ==========================================================================
   =Tablet (Portrait)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 979px) {

		.row { width: 705px; }

		.span1 {
			width: 45px;
			margin-left: 15px;
		}

		.span2 {
			width: 105px;
			margin-left: 15px;
		}

		.span3 {
			width: 165px;
			margin-left: 15px;
		}

		.span4 {
			width: 259px;
			margin-left: 15px;
		}

		.span5 {
			width: 285px;
			margin-left: 15px;
		}

		.span6 {
			width: 345px;
			margin-left: 15px;
		}

		.span7 {
			width: 405px;
			margin-left: 15px;
		}

		.span8 {
			width: 465px;
			margin-left: 15px;
		}

		.span9 {
			width: 525px;
			margin-left: 15px;
		}

		.span10 {
			width: 618px;
			margin-left: 15px;
		}

		.span11 {
			width: 645px;
			margin-left: 15px;
		}

		.span12 {
			width: 705px;
			margin-left: 15px;
		}

		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-tablet { display: inherit !important; }
		.hidden-tablet { display: none !important; }

	}

/* ==========================================================================
   =Mobile (Portrait and Landscape )
   ========================================================================== */

/* =Portrait and landscape
   ========================================================================== */

	@media (max-width: 767px) {

		.row { width: auto; }


		.row { padding: 0 20px; }

		.row .row {
			width: auto;
			padding: 0;
			margin: 0;
		}

		.span1,
		.span2,
		.span3,
		.span4,
		.span5,
		.span6,
		.span7,
		.span8,
		.span9,
		.span10,
		.span11,
		.span12 {
			float: none;
			display: block;
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
					box-sizing: border-box;
			margin-left: 0;
		}

		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-phone { display: inherit !important; }
		.hidden-phone { display: none !important; }

	}

/* =Landscape
   ========================================================================== */

	@media only screen and (min-width: 480px) and (max-width: 767px) {

		.row { padding: 0 40px; }

	}

/* ==========================================================================
   =Align
   ========================================================================== */

	.float-left { float: left; }
	.float-right { float: right; }

/* ==========================================================================
   =Responsive Images and Embeds
   ========================================================================== */

	.responsive-img {
		max-width: 100%;
		height: auto;
	}

	/**
 	 * 1. 16/9 ratio
 	 */

	.responsive-embed {
		position: relative;
		overflow: hidden;
		height: 0;
		padding: 0;
		padding-bottom: 56.25%; /* 1 */
		margin-bottom: 20px;
	}

	.responsive-embed iframe,
	.responsive-embed object,
	.responsive-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* ==========================================================================
   =Clearing
   ========================================================================== */

	/**
 	 * Automatically Clear Fix rows
 	 */

	.row:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	/**
 	 * Clear Fix hack
	 * Usage:  add  class="fixed"  to div's that have floated elements in them
 	 */

	.fixed:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	/**
 	 * Clear content
	 * Usage:  <br class="clear">
 	 */

	.clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
	}

/* ==========================================================================
   =ResponsiveFormInputs
   ========================================================================== */

	/**
	 * 1. Reset float inherited from .span*
 	 * 2. Reset margin-left inherited from .span*
 	 */

	input.span1,
	textarea.span1,
	select.span1,
	input.span2,
	textarea.span2,
	select.span2,
	input.span3,
	textarea.span3,
	select.span3,
	input.span4,
	textarea.span4,
	select.span4,
	input.span5,
	textarea.span5,
	select.span5,
	input.span6,
	textarea.span6,
	select.span6,
	input.span7,
	textarea.span7,
	select.span7,
	input.span8,
	textarea.span8,
	select.span8,
	input.span9,
	textarea.span9,
	select.span9,
	input.span10,
	textarea.span10,
	select.span10,
	input.span11,
	textarea.span11,
	select.span11,
	input.span12,
	textarea.span12,
	select.span12 {
		float: none; 	/* 1 */
		margin-left: 0; /* 2 */
	}