@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css?family=Tenor+Sans');

* {
	box-sizing: border-box; /* Padding y borde no incrementan el ancho */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
	font-size: 10px;
	font-family: 'Open Sans', sans-serif;
	color: #7F8A8E;
}

h1 {
	
}

h2 {
	font-family: 'Tenor Sans', sans-serif;
	color: #ffffff;
	font-size: 3em;
	line-height: 1.1em;
	/*margin-bottom: 30px;*/
}

h3 {

	color: #ffffff;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1em;
	margin-bottom: 15px;
}

h4 {
	
}

p {
	font-size: 1.4em;
	
}

a {
	
}

a:link {
	
}

a:visited {
	
}

a:hover {
	
}

img {
	width: 100%;
}


/*HEADER*/

header {
	background-color: rgba(77, 77, 77, 0.75);
	height: 60px;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
}

header .logo {
	margin-top: 20px;
	display: inline-block;
	max-width: 140px;
}

/* TOGGLE BUTTOM */

.toggle-button {
	position: absolute;
	top: 20px;
	right: 30px;
	display: block;
	width: 35px;
	margin: 0 auto 10px;
	z-index: 999;
}

.toggle-button span {
	display: block;
	height: 20px;
	border-top: solid 4px #fff;
	border-bottom: solid 4px #fff;
	position: relative;
}

.toggle-button span:after {
	content:"";
	width: 100%;
	height: 4px;
	background:#fff;
	display: block;
	top: 50%;
	position: absolute;
	margin-top: -2px;
}

/*NAV*/

nav.principal {
	display: none;
}

nav.mobile {
	position: absolute;
	top: 60px;
	width: 100%;
	display: none;
}

nav.mobile ul {
	padding: 0;
	background-color: #4eae99;
	padding: 0;
	position: relative;
	z-index: 9999;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}

nav.mobile ul li {
	font-size: 1.4em;
	text-transform: uppercase;
	list-style-type: none;
	color: #fff;
	padding: 5px 30px;
	border-bottom: 1px solid #fff;
}

nav.mobile ul li a:link, nav.mobile ul li a:visited {
	color: inherit;
	text-decoration: none;
}

nav.principal ul {
	padding: 0;

}

nav.principal ul li {
	font-size: 1.3em;
	font-weight: 600;
	text-transform: uppercase;
	list-style-type: none;
	color: #fff;
	padding-bottom: 3px;
}

nav.principal ul li.active {
	border-bottom: 2px solid #fff;
}

nav.principal ul li a:link, nav.principal ul li a:visited {
	color: inherit;
	text-decoration: none;
}

/*FOOTER*/

footer {
}

/* -- CONTENIDO -- */

section.sec-uno .row {
	padding-bottom: 30px;
	min-height: 100vh;
}

section.sec-dos .row {
	padding-bottom: 30px;
	min-height: 90vh;	
}

section.sec-tres .row, section.sec-cuatro .row {
	padding-bottom: 30px;
}

section.sec-uno {
	background-color: #4eae99;
	background-image: url(../img/fdo-home-mobile.jpg);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

section.sec-uno .container {
	position: relative;
}

section.sec-uno .cont-txt {
	padding-bottom: 40px;
}

section.sec-dos {
	background-color: #4eae99;
	background-image: url(../img/fdo-sec2-mobile.jpg);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

section.sec-dos .cont-txt {
	padding-top: 40px;
}

section.sec-uno h2 {
	font-size: 3em;
	padding-bottom: 10%;
}

section.sec-uno h2, section.sec-dos h2 {
	text-shadow: -3px 3px 2px rgba(58, 58, 58, 0.5);
	text-transform: uppercase;
}

section.sec-uno h3 {
	color: #fff;
	text-shadow: -2px 2px 2px rgba(58, 58, 58, 0.5);
}

section.sec-cuatro {
	background-color: #4eae99;
	background-image: url(../img/fdo-reporte-mobile.jpg);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

section.sec-cuatro {
	padding-top: 40px;
	position: relative;
	background-color: #4eae99;
}

section.sec-cuatro p {
	color: #fff;
}

.cont-video {
	max-width: 320px;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

p.bajada {
	font-weight: 700;
}

section.sec-dos p {
	color: #fff;
}

section.sec-cuatro h2 {
	color: #fff;
	text-transform: uppercase;
}

.video-home {
	border: 4px solid #fff;
	max-width: 640px;
	margin: 30px auto;
	z-index: 2;
}

.video-home img {
	max-width: 670px;
}

figure.reporte {
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 20px;
}

section.historias .container-scroll {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 20px 0px 0 0px;
	width: 100%;
	max-height: 210px;
	overflow-y: scroll;
}

.container-scroll {
	width: 100%;
	max-height: 200px;
	overflow-y: scroll;
}

section.historias h2 {
	font-size: 1.8em;
	padding: 0 0 0px 0;
	margin-bottom: 0;
	color: #4D4D4D;
	text-transform: uppercase;
}

section.historias .container-selector {
	color: #2585C7;
	overflow: hidden;
	padding: 10px 0px 0px 0px;
}

.container-selector span {
	color: #7F8A8E;
	font-size: 2em;
}

section.historias .container-selector a {
	line-height: 0.1em;
	color: #7F8A8E;
	font-size: 4.5em;
	margin: 0 10px;
	vertical-align: text-top;
}

section.historias .container-selector a:hover {
	color: #e75a24;
}

/* ScrollBar */

#scroll-txt::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#scroll-txt::-webkit-scrollbar
{
	width: 12px;
	background-color: transparent;
}

#scroll-txt::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #b3b3b3;
}


/* Botones */

.btn {
	font-weight: 600;
	border-radius: 50px;
	border: none;
	padding: 14px 40px;
	margin: 30px 0;
	text-transform: uppercase;
}

.btn-primary {
	background-color: #fff;
	color: #4DB8A1;
}

.btn-primary:hover {
	background-color: #08559b;
}

.btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
	border: none;
}

.hide-mobile-md-down {
	display: none;
}

.show-mobile-md-down {
	display: block;
}

.subir {
	text-align: center;
	padding-bottom: 20px;
}

.subir img {
	width: 66px;
}

/* Reset botones */

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline: none !important;
	border: none !important;
  	box-shadow: none;
}

.btn-default.active.focus, 
.btn-default.active:focus, 
.btn-default.active:hover, 
.btn-default:active.focus, 
.btn-default:active:focus, 
.btn-default:active:hover, 
.open>.dropdown-toggle.btn-default.focus, 
.open>.dropdown-toggle.btn-default:focus, 
.open>.dropdown-toggle.btn-default:hover {
	background-color: inherit !important;
	box-shadow: none;
}


/* - Para igualar el alto de las columnas  (no soporta ie9) - */

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.row { /* para que no se exceda los margenes laterales */
    margin-right: 0px;
    margin-left: 0px;

}
/* - FIN - Para igualar el alto de las columnas - */


/* - Para quitar los margenes del container fuild - */

.container-fluid {
   padding-right: 0px;
   padding-left: 0px;
}
/* - FIN Para quitar los margenes del container fuild - */

.transition {
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s; 
}

.der {
	text-align: right;
}

.centro {
	text-align: center;
}

/****************************/
	
/* MQ*/

@media (min-width: 320px) and (orientation: portrait) {

.fancybox-slide--iframe .fancybox-content {
	height: 40% !important;
	max-width: calc(100% - 40px) !important;
	width: 100% !important;
}

}

@media (min-width: 320px) and (orientation: portrait) {

.cont-video {
	max-width: 320px;
	width: 100%;
	position: absolute;
	top: 0;
	right: initial;
}

section.sec-uno h2 {
	padding-bottom: 20%;
	font-size: 4em;
}

}


@media screen and (min-width: 640px) {

}

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

h2 {
	font-size: 2.8em;
	margin-bottom: 30px;
}

h3 {
	font-size: 1.8em;
}

header {
	z-index: 9999;
}

section.sec-dos .col-left {
	padding-top: 40px;
}

section.historias .container-scroll {
	max-height: 200px;
}

.container-scroll {
	max-height: 243px;
}

section.sec-dos {
	background-image: url(../img/fdo-compromiso.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-cuatro {
	background-image: url(../img/fdo-reporte.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.cont-video {
	top: 0;
	max-width: initial;
	width: 48%;
}

}

@media (min-width: 768px) and (orientation: portrait) {

section.sec-uno .row, section.sec-dos section.sec-cuatro .row {
	min-height: 100vh;
}

section.sec-tres .row {
	padding-bottom: 40px;
}

section.sec-uno h2 {
	padding-bottom: 30%;
	font-size: 5em;
}


/*
section.sec-uno {
	background-image: url(../img/fdo-home-768.jpg);
	background-position: left center;
}

section.sec-dos {
	background-image: url(../img/fdo-home-768.jpg);
	background-position: left center;
}

section.sec-cuatro {
	background-position: left center;
	position: relative;
}

*/

}


@media (min-width: 992px) {

h2 {
	font-size: 4em;
	margin-top: 0;
}

h3 {
	font-size: 2em;
}

header {
	height: 90px;
}

header .logo {
	max-width: 190px;
	margin-top: 30px;
}

section.sec-uno .row, section.sec-dos .row, section.sec-tres .row, section.sec-cuatro .row {
	min-height: 100vh;
}

.container {
    max-width: 1280px;
}

.toggle-button {
	display: none;
}

nav.principal {
	display: block !important;
	overflow: hidden;
	margin-top: 46px;
}

nav.mobile {
	display: none !important;
}

nav.principal ul {
	text-align: right;
	padding: 10px 0;
}

nav.principal ul li {
	font-size: 1.3em;
	display: inline-block;
	margin-left: 15px;
	background-color: transparent;
	border-bottom: 2px solid transparent;
}

nav.principal ul li:hover {
	border-bottom: 2px solid #fff;
}

.hide-mobile-md-down {
	display: block;
}

.show-mobile-md-down {
	display: none;
}

.video-home {
	border: 4px solid #fff;
	position: absolute;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4%;
	left: 0;
	right: 0;
	width: 400px;
	z-index: 2;
}

.der-desk {
	text-align: right; 
}

figure.reporte {
	display: inline-block;
}

.fancybox-slide--iframe .fancybox-content {
	height: 100% !important;
}

section.historias .container-scroll {
	background-color: rgba(255, 255, 255, 0.2);
	padding: 20px 20px 0 20px;
}



section.historias .container-selector {
	margin-top: 0;
}

section.sec-uno {
	background-image: url(../img/fdo-home.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-tres .historia-uno {
	background-image: url(../img/fdo-historia1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-tres .historia-dos {
	background-image: url(../img/fdo-historia2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-tres .historia-tres {
	background-image: url(../img/fdo-historia3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-tres .historia-cuatro {
	background-image: url(../img/fdo-historia4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
}

section.sec-uno h2 {
	padding-bottom: 0;
	font-size: 3.8em;
}

section.sec-dos .cont-txt {
	padding-top: 0px;
}


.cont-video {
	position: absolute;
	top: 0;
	right: 3%;
	max-width: initial;
	width: 48%;
}

}


@media (min-width: 1024px) {


.container-scroll p {
	padding-right: 20px;
}

section.sec-dos .col-left {
	padding-top: 140px;
}

.container-scroll {
	max-height: 240px;
	overflow-y: scroll;
	width: 90%;
}

.subir {
	text-align: center;
	padding-bottom: 0px;
	position: absolute;
	bottom: 9%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

.subir img {
	width: 66px;
}

section.sec-uno {
	background-position: center center;
}

section.sec-dos {
	background-position: center center;
}

section.sec-uno .cont-txt {
	padding-bottom: 0px;
}

section.historias h2 {
    font-size: 2em;
    padding: 0 0 0 20px;
}

section.sec-tres .historia-uno {
	background-position: center center;
	background-size: contain;
}

section.sec-tres .historia-dos {
	background-position: center center;
	background-size: contain;
}

section.sec-tres .historia-tres {
	background-position: center center;
	background-size: contain;
}

section.sec-tres .historia-cuatro {
	background-position: center center;
	background-size: contain;
}

section.sec-cuatro {
	background-position: center center;
}

.cont-video {
	width: 44%;
}

}

@media (min-width: 1200px) {

nav.principal ul li {
	margin-left: 20px;
}

.video-home {
	width: 540px;
}

.historias .container-scroll {
	max-height: 250px;
}

.container-scroll {
	max-height: 190px;
}

figure.reporte {
	max-width: 100%;
}

section.sec-tres .historia-uno {
	background-size: cover;
}

section.sec-tres .historia-dos {
	background-size: cover;
}

section.sec-tres .historia-tres {
	background-size: cover;
}

section.sec-tres .historia-cuatro {
	background-size: cover;
}

.cont-video {
	width: 44%;
}

}


@media (min-width: 1360px) {

p {
	font-size: 1.6em;
	line-height: 1.6em;
}

header .logo {
	margin-top: 32px;
	max-width: 204px;
}

h2 {
	font-size: 5em;
}

h3 {
	font-size: 2.2em;
}

.video-home {
	width: 600px;
}

section.historias h2 {
	font-size: 2.5em;
}

section.historias .container-scroll {
	max-height: 210px;
}

section.historias .container-selector a {
	font-size: 5.5em;
}

section.sec-uno h2 {
	padding-bottom: 20px;
	font-size: 4.5em;
}


section.sec-cuatro h2 {
	font-size: 4em;
	color: #fff;
	text-transform: uppercase;
}

section.sec-cuatro h2 span {
	font-size: 1.4em;
	line-height: 1em;
}

.cont-video {
	width: 42%;
}

.btn {
	font-size: 2.2em;
	padding: 12px 40px;
}

}

@media (min-width: 1440px) {

nav.principal {
	margin-top: 44px;
}

.video-home {
	width: 640px;
}

}

@media (min-width: 1680px) {

h2 {
	font-size: 6em;
}

.historias .container-scroll {
	max-height: 280px;
}

section.sec-uno h2 {
	padding-bottom: 20px;
	font-size: 6em;
}

section.historias h2 {
	font-size: 3em;
}

.container-scroll {
	max-height: 240px;
}

.cont-video {
	width: 50%;
}

.col-xxl-7 {
	flex: 0 0 70%;
    max-width: 70%;
}

}