@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);


@font-face {
	font-family: 'Helveltica-Bold';
	src: url(../fonts/HelveticaLTStd-Bold.otf);
}

@font-face {
	font-family: 'Helveltica-Light';
	src: url(../fonts/HelveticaLTStd-Light.otf);
}

  
body {
	font-size: 0.75rem;
	font-family: 'Lato', sans-serif;
}

hr {border-color: white;}


/* Animacion de imagenes al ir bajando con el scroll */
@keyframes show {
	from {
		opacity: 0;
		scale: 25%;
	}

	to {
		opacity: 1;
		scale: 100%;
	}
}

@keyframes desplazamiento-desde-arriba {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes deslizamiento-desde-izquierda {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes deslizamiento-desde-derecha {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#nav-collapse>.navbar-nav>.nav-item>.nav-link{
	padding-right: .5rem !important;
        padding-left: .5rem !important;
}

#carousel-1>.carousel-inner {
    height: auto;
}

@media (max-width: 1024px){
	#carousel-1>.carousel-inner {
		height: auto!important;
	}
}
#card-publicaciones > div > article >.card-body{
	padding: 1.25rem !important;
}

.animacion-desplazado-scroll {
    view-timeline-name: --image-bottom;
    view-timeline-axis: block;

    animation-timeline: --image-bottom;
    animation-name: desplazamiento-desde-arriba;

    animation-range:  entry 15% cover 20%;
    /* animation-range: entry entry 25% cover 30%; */
    animation-fill-mode: both;
}

.animacion-mostrado-scroll {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: show;
	animation-range: entry 15% cover 20%;
	animation-fill-mode: both;
}

.animacion-deslizamiento-izquierda-scroll {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: deslizamiento-desde-izquierda;

	animation-range: entry 15% cover 20%;
	animation-fill-mode: both;
}
/* ------------------ */

/* Efecto de sombra en imagenes */

.sombreado {box-shadow: 7px 7px 12px 0 rgba(20, 20, 20, 0.3);}
.sombreado-fuerte{ box-shadow: 14px 14px 20px 0 rgba(20, 20, 20, 0.3);}

/* -------------------------- */

/* Clase para decoracion de texto del navbar */
.fuente-items-nav { font-family: 'Helveltica-Light'; font-size: 20px; }

/* Carrusel */
#carousel-1 .carousel-indicators li {
    background-color: #ffffff; 
	opacity: 1;
    width: 5vw; 
    height: 10px; 
    border-radius: 15px; 
    border: 2px solid transparent; 
    margin: 0 1px; 
}

/* Estilo para el indicador activo */
#carousel-1 .carousel-indicators .active {background: linear-gradient(90deg, rgba(154,167,44,1) 0%, rgba(100,108,32,1) 100%);}


/* Realizacion responsive de seccion de foto de trabajadora de PSA */
.imagen-adaptada {height: auto;}

.texto-responsive {
    font-size: calc(1rem + 0.5vw); 
    color: grey;
    font-family: 'Helveltica-Light';
}

h5.texto-responsive { font-family: 'Helveltica-Bold'; font-size: calc(1.5rem + 0.5vw);  }

/* -------------------------- */

/* Seccion Aplicacion movil e imagen */

/* Se usan las medidas en las medias queries */
.seccion-app-movil { width: 220px; height: 80px; } 
.imagen-principal-app-movil { height: auto; width: 100%; }
/* -------------------------- */


/* Seccion de contador encima de una imagen */
.imagen-conteo {
	height: 30vh;
	width: 100%;
}
.contenedor-conteo {position: relative;}

.texto-superpuesto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
	color: white; 
}

/* ----------------------- */


/* Seccion  Agricultura para el futuro */

.font-seccion-agricultura {
	font-family: 'Helveltica-Light'; 
	font-size: 18px; 
	text-align: start;
	color:grey
}


/* ---------------- */
/* Animacion de deslizamiento (Marcas aliadas) */
.contenedor-slider {
	width: 100%;
	overflow: hidden;
	position: relative;
}
  
.slider-derecha {
	display: flex;
	flex-wrap: nowrap;
	animation: slide-derecha 9s linear infinite;
}

.slider-izquierda {
	display: flex;
	flex-wrap: nowrap;
	animation: slide-izquierda 9s linear infinite;
}
  
  .slide-item {
	flex: 0 0 auto;  
	box-sizing: border-box; 
}
  
  .slide-img {
	width: 95%;
	height: 23vh;
	display: block;
}
   
/* Izquierda a derecha */
@keyframes slide-izquierda {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
} 

/* Derecha a izquierda */
@keyframes slide-derecha {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
} 

/* --------------------- */


#card-publicaciones .card {
	max-width: 100%;
	height: 750px;
}
#card-publicaciones  img {
	height: 450px;
	width: 100%;
}

/* Carrusel de testimonios */
#card-swiper .card {
    width: 80%; 
    max-width: 400px; 
    background: #ffffff;
    padding-top: 20px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
    margin: 20px auto;
	border-top-left-radius: 30px; 
    border-top-right-radius: 30px; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}

.contenedor-imagen {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
}

.imagen-perfil {
    width: 100%;
    height: auto;
}

.imagen-calificacion {
    margin-top: 0px;
    width: 30px; 
}

.card-footer-testimonios {
	
    background-image: url("../imgs/Elementos-PSA-47.png");
    background-size: fill;  
    background-position: center; 
    background-repeat: no-repeat; 
    color: white;
    position: relative;
}

.nombre {
    font-weight: bold;
    margin-bottom: 0;
}

/* ----------------- */
.swiper {height: 70vh;}

.custom-swiper-button {
    width: 30px; 
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-swiper-button::after {font-size: 20px; color: #a5b125}
.swiper-button-prev.custom-swiper-button::after {content: '<';}
.swiper-button-next.custom-swiper-button::after {content: '>';}

/*----- Footer -------*/
.font-tamaño-footer {
	font-family: 'Helveltica-Light';
	color: white;
	font-size: calc(0.7rem + 0.5vw); 
}

.font-titulo-footer {
	font-family: 'Helveltica-Bold'; 
	font-size: calc(1rem + 0.5vw); 
	color: #9eab2d;
}

.decoracion-href {
	text-decoration: none;
	color:white
}

a.decoracion-href:hover {color: #9eab2d;}

/* --------------------- */


/* cambios en el card de publicaciones */
.card-gris {border-color: gray;}
.card-verde {border-color: #a5b839;}
/* ---------------------------------- */

/* Seccion de blog de videos */
.texto-video {
	font-size: calc(1rem + 0.5vw); 
	font-family: 'Helveltica-Light';  
	color: grey;
}

.frase-video {
	font-size: calc(1.5rem + 0.5vw);   
	color: #9eab37;
}

/* --------------------- */




/* Cambio de diseño de paginador */

.paginacion-personalizada .page-item.active .page-link {
    background-color: #fff;
    border-color: transparent;
    color: #a5b839;
	font-family: 'Helveltica-Bold';
	font-weight: bold;
	font-size: 20px;
}

.paginacion-personalizada .page-link {
	background-color: #fff;
    border-color: transparent;
    color: #919192;
	font-family: 'Helveltica-Light';
	font-size: 20px;
}


.paginacion-personalizada .page-link:focus, 
.paginacion-personalizada .page-link:hover {
    background-color: #eaeaea;
    color: #919192;
    border-color: transparent;
	font-family: 'Helveltica-Light';
	font-size: 20px;
}

.paginacion-personalizada .page-item.disabled .page-link {
	background-color: #fff;
    border-color: transparent;
    color: #6c757d;
	font-family: 'Helveltica-Light';
	font-size: 20px;
}

.paginacion-personalizada .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paginacion-personalizada .page-item:first-child .page-link,
.paginacion-personalizada .page-item {margin: 0 5px;}
/* ---------------------------- */





/* Clases adicionales */

.mc-0 {margin: 0px;}
.word-break {word-break: break-word;}
.font-hl {font-family: 'Helveltica-Light';}
.font-hb {font-family: 'Helveltica-Bold';}

#modalMostrarVideo > div > div > .modal-body {
	padding: 0.125rem;
}

/* ------------------ */




/* Manejo de tamaños para el responsive */
@media (max-width: 1200px) {

	.imagenes-carrusel > img {height: 95vh; }
	.imagen-conteo { height: 200px; width: 100%; }
	.imagen-principal-app-movil { height: 60vh; width: 90%; }
	
	.px-lg-6 {padding-left: 3rem !important; padding-right: 3rem !important;}
	.pb-lg-6 {padding-bottom: 3rem !important;}

	.paginacion-personalizada .page-item.active .page-link {font-size: 20px}
	.paginacion-personalizada .page-link {font-size: 20px}
	.paginacion-personalizada .page-link:focus, 
	.paginacion-personalizada .page-link:hover {font-size: 20px}
	.paginacion-personalizada .page-item.disabled .page-link {font-size: 20px}
	
}

@media (min-width: 1200px) {
	.px-lg-6 {padding-left: 5rem; padding-right: 5rem;}
	.pb-lg-6 {padding-bottom: 5rem;}

	.imagen-principal-app-movil { height: 60vh; width: 90%; }

	#card-publicaciones .card {
		max-width: 100%;
		height: 700px;
	}
	#card-publicaciones  img {
		height: 400px;
		width: 100%;
	}
	
}
  
@media (max-width: 992px) {
	.imagenes-carrusel > img {height: 60vh;}
	.imagen-adaptada {height: 100%;}
	.seccion-app-movil { width: 220px; height: 70px; }
	.px-lg-6 {padding-left: 3rem !important; padding-right: 3rem !important;}
	.pb-lg-6 {padding-bottom: 3rem !important;}
	.imagen-conteo { height: 200px; width: 100%; }

	
	.paginacion-personalizada .page-item.active .page-link {font-size: 15px}
	.paginacion-personalizada .page-link {font-size: 15px}
	.paginacion-personalizada .page-link:focus, 
	.paginacion-personalizada .page-link:hover {font-size: 15px}
	.paginacion-personalizada .page-item.disabled .page-link {font-size: 15px}


	#card-publicaciones .card {
		max-width: 100%;
		height: 750px;
	}
	#card-publicaciones  img {
		height: 400px;
		width: 100%;
	}
}
  
@media (max-width: 768px) {
	.imagen-adaptada { height: 70vh; object-fit: fill; }
	.imagen-conteo { height: auto; }
	.seccion-app-movil { width: 220px; height: 70px; }
	.px-lg-6 {padding-left: 3rem !important; padding-right: 3rem !important;}
	.pb-lg-6 {padding-bottom: 3rem !important;}
	.font-seccion-agricultura {font-size: 15px;  text-align: center;}
	.imagen-principal-app-movil { height: 30vh; width: 90%; } 

	
	#card-publicaciones .card {
		max-width: 100%;
		height: 780px;
	}
	#card-publicaciones  img {
		height: 400px;
		width: 100%;
	}
}
  
  @media (max-width: 576px) {
	.imagen-adaptada { height: 40vh; object-fit: fill; }
	.imagen-conteo {height: 15vh;}
	.font-seccion-agricultura {font-size: 16px;  text-align: start;}

	.px-lg-6 {padding-left: 2rem !important; padding-right: 2rem !important;}
	.pb-lg-6 {padding-bottom: 2rem !important;}
	.seccion-app-movil { width: 140px; height: 50px; }
	.slide-img { width: 90%; height: 12vh; display: block; }
	#carousel-1 .carousel-indicators li {width: 30px; }

	.paginacion-personalizada .page-item.active .page-link {font-size: 12px}
	.paginacion-personalizada .page-link {font-size: 12px}
	.paginacion-personalizada .page-link:focus, 
	.paginacion-personalizada .page-link:hover {font-size: 12px}
	.paginacion-personalizada .page-item.disabled .page-link {font-size: 12px}

	
	#card-publicaciones .card {
		max-width: 100%;
		height: 750px;
	}
	#card-publicaciones  img {
		height: 450px;
		width: 100%;
	}
	
}