/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* 	==========================================================================
	Base styles: opinionated defaults
	========================================================================== */

	html {
		color: #222;
		font-size: 1em;
		line-height: 1.4;
	}

	/*
	 * Remove text-shadow in selection highlight:
	 * https://twitter.com/miketaylr/status/12228805301
	 *
	 * These selection rule sets have to be separate.
	 * Customize the background color to match your design.
	 */
	
	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}

	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}

	/*
	 * A better looking default horizontal rule
	 */

	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 1em 0;
		padding: 0;
	}

	/*
	 * Remove the gap between audio, canvas, iframes,
	 * images, videos and the bottom of their containers:
	 * https://github.com/h5bp/html5-boilerplate/issues/440
	 */

	audio,
	canvas,
	iframe,
	img,
	svg,
	video {
		vertical-align: middle;
	}

	/*
	 * Remove default fieldset styles.
	 */

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	/*
	 * Allow only vertical resizing of textareas.
	 */

	textarea {
		resize: vertical;
	}

/* 	==========================================================================
	Browser Upgrade Prompt
	========================================================================== */

	.browserupgrade {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

/*	==========================================================================
	Author's custom styles v1.0.0
	========================================================================== */

	body, html {
		height: 100%;
		min-height: 100%;
		background-color: #fff;
		font-family: 'Fira Sans', sans-serif;
		font-weight:300;
		color:#666;
	}

	h1,h2,h3,h4,h5,h6,p {
		margin:0;
	}
	
	a {
		color:#000000;
		text-decoration:none;
	}
		a:hover {
			color:#999;
		}

	strong {
		font-weight: 500;
	}
	/*
	 * Loading images.
	 */

	.loading {
		background:url('../recursos/ico_loading.gif') no-repeat center center;
	}

	#preload {
		width:1px;
		height:1px;
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
	}

	main {
		opacity: 0;
	}

	.loaded main,
	.no-js main {
		opacity:1;
		-webkit-transition:opacity 300ms ease-out;
		-moz-transition:opacity 300ms ease-out;
		transition:opacity 300ms ease-out;
	}

	/*
	 * Menu navegacion.
	 */

	nav {
		width:100%;
		position:fixed;
		top:0px;
		padding:0;
		margin:0;
		display:block;
		background:#fff;
		z-index:100;
		height:194px;
	}
		#login {

			/*width: 870px;*/
			text-align: center;
			line-height:.5em;
			font-size: .8125em;
		}
			#login > div:first-child {
				background:url('../recursos/icon_login.png') no-repeat center left;
				background-size: 10px;
				background-color: #666;
				width: auto;
				padding: 10px 14px 12px 32px;
				float: right;
				background-position-x: 14px;
				background-position-y: 5px;
				
				-webkit-border-bottom-right-radius: 12px;
				-webkit-border-bottom-left-radius: 12px;
				-moz-border-radius-bottomright: 12px;
				-moz-border-radius-bottomleft: 12px;
				border-bottom-right-radius: 12px;
				border-bottom-left-radius: 12px;
			}
			#login > div:hover {
				background-color: #ccc;
			}
			#login a {
				font-weight: 300 !important;
			}
	
		nav > div:first-child {
			padding:0px;
			clear: both;
		}
		nav .logo {
			margin:0px 32px 0 0;
			width:320px;
			height:140px;
			float:left;
		}
		nav ul {
			padding:14px 0 0;
			list-style: none;
			float:left;
			width:61%;
			margin:0;
			font-size:.875em;
			line-height:1.52em;
		}
			nav ul li {
				float: left;
				color: #999;
			}
				nav ul li:after {
					content: "|";
					padding: 0 12px;
				}
				nav ul li:last-child:after  {
					content: "";
					padding: 0 12px;
				}
				nav ul li a {
					color: #333;
					text-decoration: none;
				}
				nav ul li a:hover, nav ul li a.active {
					color: #999;
				}
				nav ul li a.active {
					font-weight: 500;
				}

	.f-nav { 
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0; 
	} /* this make our menu fixed top */


	/*
	 * Contenido.
	 */

	.content {
	}
		.quotes_container {
			position: relative;
			display:inline-block;
			color: #ffffff;
		}
			.quotes_container > div {
				width:440px;
			}
				.izq {
					float:left;
				}
				.der {
					float:right;
				}
				.quotes_container > div h2 {
					padding: 0px;
					font-size: 2.25em;
					line-height: 1.25em;
					margin-bottom: .5em;
					font-weight: 500;
				}
				.quotes_container > div p {
					width: 100%;
					font-size: 1.125em;
					line-height: 1.333em;
					margin-bottom: 1.333em;
				}

	/*
	 * Slides Styllig
	 */

	#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12, #slide13 { 
		width: 100%;
		padding: 48px 0;
		min-height:480px;
	}

	.content li {
		margin-bottom: 18px;
		color: #fff;
	}
	
	#slide1 {
		padding: 48px 0 32px;
	}

	#slide1, #slide13 {
		background:#fff;
		min-height:inherit !important;
	}
		#slide1 .quotes_container, #slide13 .quotes_container {
			color: #666;
		}
	
	#slide2 {
		background:url('../recursos/bcg_slide-1.jpg') 50% 50% no-repeat fixed;
	}
	
	#slide3 {
		background:url('../recursos/bcg_slide-2.jpg') 50% 50% no-repeat fixed;
	}

	#slide4 {
		background:url('../recursos/bcg_slide-3.jpg') 50% 50%no-repeat fixed;
	}

	#slide5 {
		background:url('../recursos/bcg_slide-4.jpg') 50% 50%no-repeat fixed;
	}

	#slide6 {
		background:url('../recursos/bcg_slide-5.jpg') 50% 50% no-repeat fixed;
	}

	#slide7 {
		background:url('../recursos/bcg_slide-6.jpg') 50% 50% no-repeat fixed;
	}

	#slide8 {
		background:url('../recursos/bcg_slide-7.jpg') 50% 50% no-repeat fixed;
	}

	#slide9 {
		background:url('../recursos/bcg_slide-8.jpg') 50% 50% no-repeat fixed;
	}

	#slide10 {
		background:url('../recursos/bcg_slide-9.jpg') 50% 50% no-repeat fixed;
	}

	#slide11 {
		background:url('../recursos/bcg_slide-10.jpg') 50% 50% no-repeat fixed;
	}

	#slide12 {
		background:url('../recursos/bcg_slide-11.jpg') 50% 50% no-repeat fixed;
	}

	#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
		background-size: cover;
	}
	
	#slide4 img, #slide5 img, #slide6 img, #slide7 img, #slide8 img, #slide9 img, #slide10 img, #slide11 img, #slide12 img {
		width:100%;
	}

	/*
	 * footer
	 */

	.footer {
		font-size:12px;
		padding-bottom:18px;
	}


	.content, .quotes_container, nav > div, .footer {
		width: 908px;
		margin: 0 auto;
	}



/*	==========================================================================
	Helper classes
	========================================================================== */

	/*
	 * Image replacement
	 */

	.ir {
		background-color: transparent;
		border: 0;
		overflow: hidden;
		/* IE 6/7 fallback */
		*text-indent: -9999px;
	}

	.ir:before {
		content: "";
		display: block;
		width: 0;
		height: 150%;
	}

	/*
	 * Hide from both screenreaders and browsers: h5bp.com/u
	 */

	.hidden {
		display: none !important;
		visibility: hidden;
	}

	/*
	 * Hide only visually, but have it available for screenreaders: h5bp.com/v
	 */

	.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	/*
	 * Extends the .visuallyhidden class to allow the element to be focusable
	 * when navigated to via the keyboard: h5bp.com/p
	 */

	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}

	/*
	 * Hide visually and from screenreaders, but maintain layout
	 */
	
	.invisible {
		visibility: hidden;
	}

	/*
	 * Clearfix: contain floats
	 *
	 * For modern browsers
	 * 1. The space content is one way to avoid an Opera bug when the
	 *    `contenteditable` attribute is included anywhere else in the document.
	 *    Otherwise it causes space to appear at the top and bottom of elements
	 *    that receive the `clearfix` class.
	 * 2. The use of `table` rather than `block` is only necessary if using
	 *    `:before` to contain the top-margins of child elements.
	 */

	.clearfix:before,
	.clearfix:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}

	.clearfix:after {
		clear: both;
	}

	/*
	 * For IE 6/7 only
	 * Include this rule to trigger hasLayout and contain floats.
	 */

	.clearfix {
		*zoom: 1;
	}

/*	==========================================================================
	EXAMPLE Media Queries for Responsive Design.
	These examples override the primary ('mobile first') styles.
	Modify as content requires.
	========================================================================== */

	@media only screen and (max-width: 1023px) {
		
		.content, .quotes_container, nav > div, .footer {
			width: 92%;
		}
		.quotes_container {
			width: 100%;
		}
			.quotes_container > div {
				width: 48%;
			}
				.quotes_container > div h2 {
					font-size: 1.8em;
					line-height: 1.25em;
				}
				.quotes_container > div p {
					font-size: 1em;
					line-height: 1.333em;
				}
		/*
		 * Menu navegacion
		 */
		nav {
			height:270px;
		}
			nav ul {
    			padding:14px 0 0;
				width:100%;
			}

		/*
		 * SLIDES
		 */
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			min-height:480px;
		}
	}
	
	@media only screen and (max-width: 767px) {

		body, html {
			font-size:18px;
			line-height:24px;
		}
		
		nav, .f-nav {
			position:relative;
		}
		/*
		 * Menu navegacion.
		 */
		nav ul li:after {
			padding: 0 8px;
		}

		.izq, .der {
			float:left;
		}

		/*
		 * SLIDE
		 */
		#slide5 .izq, #slide6 .der, #slide7 .izq, #slide8 .der, #slide9 .izq, #slide10 .der, #slide11 .der, #slide12 .izq {
			width:100%;
			text-align: center;
		}
		#slide5 img, #slide6 img, #slide7 img, #slide8 img, #slide9 img, #slide10 img, #slide11 img, #slide12 img {
			margin-top: 2em;
			width:66%;
		}


	}

	@media only screen and (max-width: 599px) {
		.content, .footer {
			width: 86%;
		}
		nav .logo {
			height: inherit;
		}
			.logo img {
				width:100%;
			}
		nav {
			height:initial;
		}
		nav ul {
			display:none;
		}

		.quotes_container > div {
			width:100%;
		}
		
		/*
		 * SLIDE
		 */
		#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			padding: 32px 0 48px;
		}
		#slide5 img, #slide6 img, #slide7 img, #slide8 img, #slide9 img, #slide10 img, #slide11 img, #slide12 img {
			width:100%;
		}
	}
	
	

	/* iPad in portrait & landscape */
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* Galaxy Tab 10.1 portrait & landscape */
	@media (min-device-width: 800px) and (max-device-width: 1280px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* Asus Nexus 7 portrait & landscape */
	@media (min-device-width: 601px) and (max-device-width: 906px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* iPhone 6+ in portrait & landscape */
	@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* iPhone 6 in portrait & landscape */
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* iPhone 5 in portrait & landscape */
	@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* Galaxy S3 & Galaxy S4 & Galaxy S5 Portrait and Landscape */
	@media screen and (device-width: 320px) and (device-height: 640px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}

	/* General Smartphones */
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 { 
			background-position: center center;
			background-attachment:inherit;
		}
	}	



	@media print,
		   (-o-min-device-pixel-ratio: 5/4),
		   (-webkit-min-device-pixel-ratio: 1.25),
		   (min-resolution: 120dpi) {
		/* Style adjustments for high resolution devices */
	}

/*	==========================================================================
	Print styles.
	Inlined to avoid required HTTP connection: h5bp.com/r
	========================================================================== */

	@media print {
		* {
			background: transparent !important;
			color: #000 !important; /* Black prints faster: h5bp.com/s */
			box-shadow: none !important;
			text-shadow: none !important;
		}

		a,
		a:visited {
			text-decoration: underline;
		}

		a[href]:after {
			content: " (" attr(href) ")";
		}

		abbr[title]:after {
			content: " (" attr(title) ")";
		}

		/*
		 * Don't show links for images, or javascript/internal links
		 */

		.ir a:after,
		a[href^="javascript:"]:after,
		a[href^="#"]:after {
			content: "";
		}

		pre,
		blockquote {
			border: 1px solid #999;
			page-break-inside: avoid;
		}

		thead {
			display: table-header-group; /* h5bp.com/t */
		}

		tr,
		img {
			page-break-inside: avoid;
		}

		img {
			max-width: 100% !important;
		}

		@page {
			margin: 0.5cm;
		}

		p,
		h2,
		h3 {
			orphans: 3;
			widows: 3;
		}

		h2,
		h3 {
			page-break-after: avoid;
		}
	}