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

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

	.nfw-row { 
		position: relative; 
		/*width: 940px; */
		width: 1140px; 
		height: 20%;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		/* con la actualizacion necesito dar mas espacio entre las filas para que se va bien el efecto zoom */
		/*padding: 0.9% 0px;				*/
	}
	
	.nfw-row .nfw-row { 
		width: auto; 
		margin: 0;
	 }

	/*.fullwidth-section { margin-bottom: 40px; }*/
	
	/**
 	 * 1. Full width sections insert a .nfw-row directly into it so we made this hack to make it 100%
 	 */
	 
	.fullwidth-section > .nfw-row { width: 100%; /* 1 */ }
	
	.fullwidth-section  .nfw-row .nfw-row { 
		/*width: 940px; */
		width: 1140px; 
		margin: 0 auto; 
	}
	
	.fullwidth-section  .nfw-row .nfw-row  .nfw-row{ width:auto; }	
	
	/*  */
	
 	.nfw-span1, 
	.nfw-span2, 
	.nfw-span3, 
	.nfw-span4, 
	.nfw-span5, 
	.nfw-span6, 
	.nfw-span7, 
	.nfw-span8, 
	.nfw-span9, 
	.nfw-span10, 
	.nfw-span11, 
	.nfw-span12 { 
		float: left; 
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		/* con la actualizacion necesito dar mas espacio entre las filas para que se va bien el efecto zoom */
    padding: 0.8% 1px;				
	}
	
	.nfw-span1 { 
		width: 6.382978723404255%;  
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span2 { 
		width: 14.893617021276595%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span3 { 
		width: 23.404255319148934%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span4 { 
		width: 31.914893617021278%;
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span5 { 
		width: 40.42553191489362%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span6 { 
		width: 48.93617021276595%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span7 { 
		width: 57.44680851063829%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span8 { 
		width: 65.95744680851064%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span9 { 
		width: 74.46808510638297%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span10 { 
		width: 82.97872340425532%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span11 { 
		width: 91.48936170212765%; 
		margin-left: 2.127659574468085%; 
	}
	
	.nfw-span12 { 
		width: 100%; 
		/*margin-left: 2.127659574468085%; */
	}
	
	.nfw-span1:first-child, 
	.nfw-span2:first-child, 
	.nfw-span3:first-child, 
	.nfw-span4:first-child, 
	.nfw-span5:first-child, 
	.nfw-span6:first-child, 
	.nfw-span7:first-child, 
	.nfw-span8:first-child, 
	.nfw-span9:first-child, 
	.nfw-span10:first-child, 
	.nfw-span11:first-child, 
	.nfw-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) {
	
		
		.fullwidth-section  .nfw-row .nfw-row,
		.nfw-row { width: 1170px; }
		
	
	}
 	
/* ==========================================================================
   #Tablet (Portrait)
   ========================================================================== */

/*	@media (min-width: 768px) and (max-width: 979px 1187px) {*/
	@media (min-width: 768px) and (max-width: 1153px) {
		
		.fullwidth-section  .nfw-row .nfw-row,
		.nfw-row { width: 705px; }
		
		.hidden-desktop { display: inherit !important; } 
		.visible-desktop { display: none !important; }
		.visible-tablet { display: inherit !important; } 
		.hidden-tablet { display: none !important; }
		
	}

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

	@media (max-width: 767px) {
		
		.fullwidth-section  .nfw-row .nfw-row,
		.nfw-row { width: auto; }
		
		.nfw-span1,
		.nfw-span2,
		.nfw-span3,
		.nfw-span4,
		.nfw-span5,
		.nfw-span6,
		.nfw-span7,
		.nfw-span8,
		.nfw-span9,
		.nfw-span10,
		.nfw-span11,
		.nfw-span12 { 
			float: none;
			display: block;
			width: 100%;
			margin-left: 0;
		}
		
		.fullwidth-section  .nfw-row .nfw-row, 
		.nfw-row { padding: 0 20px; }
                
                .fullwidth-section:first-child .nfw-row { padding: 0; }

		.fullwidth-section  .nfw-row .nfw-row  .nfw-row , 
		.nfw-row .nfw-row { 
			width: auto; 
			padding: 0; 
			margin: 0; 
		}
		
		
		
		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-phone { display: inherit !important; }
		.hidden-phone { display: none !important; }
		
	}
	
/* ==========================================================================
   #Align
   ========================================================================== */

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

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

	.responsive-img { 
		max-width: 70%; 
		height: auto; 
	}
@media only screen and (min-width: 320px) and (max-width: 767px) {
		.responsive-img { 
		max-width: 45%; 
		}
}

@media only screen and (min-width: 768px) and (max-width: 1153px) {
			.responsive-img { 
		max-width: 70%; 
		}
}

@media only screen and (min-width: 1154px) and (max-width: 1190px) {
		.responsive-img { 
		max-width: 70%; 
		}
}

/**
 	 * 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 nfw-rows
 	 */
	
	.fullwidth-section:after,	
	.nfw-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;
	}