* {

margin:0;
padding: 0;
box-sizing: border-box;

}

@font-face {
	font-family: 'san_francisco_text_regular';
	src: url('font/san_francisco_text_regular.otf');
}

@font-face {
    font-family: 'san_francisco_text_regular';
	src: url('font/san_francisco_text_light.otf');
    font-weight: 300;
    font-style: normal;
}

body{

font-family: 'san_francisco_text_regular';
background: #EFEFEF;


}

.contenedor{
	padding: 30px 0;
	width: 90%;
	max-width: 1500px;
	margin: auto;
	overflow: hidden;

}

@font-face {
	font-family: 'san_francisco_text_bold';
	src: url('font/san_francisco_text_bold.otf');
}

.titulo {
	color: #D50000;
	font-size: 30px;
	text-align: center;
	margin-bottom: 30px;
	font-family: 'san_francisco_text_bold';
}

.red-low {
	color: #F33F3F;
}

.gradient{
	background: linear-gradient(100.99deg, #FFD8D8 11.19%, #FEC2FF 34.52%, #CE91FF 63.62%, #B1E3FF 90.31%, #86FFCC 98.25%);
}

.gradient-dinamic {
    background: linear-gradient(100.99deg, #FFD8D8 , #FEC2FF, #CE91FF, #B1E3FF, #86FFCC);
    background-size: 200% 200%;
  
    -webkit-animation: AnimationName 21s ease infinite;
    -moz-animation: AnimationName 21s ease infinite;
    -o-animation: AnimationName 21s ease infinite;
    animation: AnimationName 21s ease infinite;
  
    border-color: #ffffff00;
    padding: 0vw 2vw 0vw 2vw;
  }
  
  @-webkit-keyframes AnimationName {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
  }
  @-moz-keyframes AnimationName {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
  }
  @-o-keyframes AnimationName {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
  }
  @keyframes AnimationName {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
  }
  
  @media screen and (max-width: 768px) {
    .relleno-card {
      background: linear-gradient(195deg, #df50ff, #ff8c8c, #f28cff, #8ce0ff, #97ff8c, #97ff8c);
      background-size: 200% 200%;
    
      -webkit-animation: AnimationName 21s ease infinite;
      -moz-animation: AnimationName 21s ease infinite;
      -o-animation: AnimationName 21s ease infinite;
      animation: AnimationName 21s ease infinite;
    
      border-color: #ffffff00;
      margin: 0vw 0vw 0vw 0vw;
      padding: 0vw 2vw 0vw 2vw;
    }
  }

.dropdown-item:active{
	background-color: #c2c2c2!important;
}

.gradient-border-segael {
    border: 0.5px solid;
    border-image: linear-gradient(to right, #F7AC25, #51AF33);
    border-image-slice: 1;
}


.titulos {
color: #575757;
font-size: 1.6rem;
font-weight: 300;
}

.text-plomo{
	color: #575757;
}

.cursor-pointer {
	cursor: pointer;
}

.input-buscar{
	background: #FFFFFF;
	padding: 5px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	border: 0px;
}

.shadoww {
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.shadoww:hover {
	box-shadow: none;
}

.bttn {
	color: #fff;
	padding: 5px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
}

.btn-red-degree {
	background: linear-gradient(90deg, #F43F3F -1.72%, #D60101 100%);
	border-radius: 10px;
}

.btn-red-degree:hover {
	background: linear-gradient(90deg, #db3636 -1.72%, #b10909 100%);
	border-radius: 10px;
}

.card-footer-green {
	background-color: #C5FFDD;
	color: #00C853;
	font-size: 1.2rem;
}

.card-footer-blue {
	background-color: #B8D9FF;
	color: #0075FF;
	font-size: 1.2rem;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
 }

::placeholder {
    font-weight: 300;
}

.container-gradient-red {
	background: linear-gradient(92.42deg, #F43F3F 80.8%, #FF6D6D 97.61%);
}

/*header*/
header{

width: 100%;
height: 800px;
background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, hsla(275, 66%, 13%, 0.473), hsla(350, 81%, 42%, 0.473)),url(img/ganaderia6.jpg);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, hsla(275, 66%, 13%, 0.473), hsla(350, 81%, 42%, 0.473)),url(img/ganaderia6.jpg); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: cover;
background-attachment: fixed;
position: relative;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 9);

}
nav{
	text-align: right;
	padding: 30px 50px 0 0;

}
nav > a{
	color:#fff;
	font-weight: 300;
	text-decoration:none ;
	margin-right: 10px;

}
nav > a:hover{
	text-decoration: underline;


}
.textos-header h1{
	font-size: 50px;
	color: #fff;
}
.textos-header h2{
	font-size: 30px;
	font-weight: 300;
	color: #fff;
}

.wave{

	position: absolute;
	bottom: 0;
	width: 100%;

}
header .textos-header{
	display: flex;
	height: 430px;
	width: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;

}

/*abaut us*/
main .contenedor-sobre-nosotros{
	padding: 30px 0 60px 0;
}

.contenedor-sobre-nosotros{
	display: flex;
	justify-content: space-evenly;


}
.imagen-abaut-us{
	width: 48%;
}
.sobre-nosotros .contenido-textos{
	width: 48%;
}
.contenido-textos h3{
margin-bottom: 10px;

}
.contenido-textos h3 span{

	background: #4d0686;
	color: #fff;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	width: 30px;
	height: 30px;
	padding: 2px;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
	margin-right: 5px;
	
}
.contenido-textos p{
	padding: 0px 0px 30px 15px;
	font-weight: 300;
	text-align: justify;


}

/*galeria*/

.portafolio{
	background: #f2f2f2;
	
}
.galeria-port{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;

}
.imagen-port{

	width: 24%;
	margin-bottom: 10px;
	height: 250px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);


}
.imagen-port > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;


}
.hover-galeria{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: scale(0);
	background: hsla(273, 91%, 27%, 0.7);
	transition: transform .5s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.hover-galeria img{
	width: 200px;;
}
.hover-galeria p{
	color: #fff;
}

.imagen-port:hover .hover-galeria{

	transform: scale(1)
}


/*Clients*/

.cards{
	display: flex;
	justify-content: space-evenly;
}
.cards .card{
background: #4d0686;
display:flex;
width: 46%;
height: 200px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);



}
.cards .card img{
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.cards .card > .contenido-texto-card{
	width: 60%;
	color: #fff;
}

.cards .card> .contenido-texto-card p{
	font-weight: 300;
	padding-top: 5px;
} 

/*our team us*/

.about-services{
	background: #f2f2f2;
	padding-bottom: 30px;
}
.servicio-cont{
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.servicio-ind{
	width: 28%;
	text-align: center;
	

}

.servicio-ind img{
	width: 250px;
	height: 250px;
	object-fit: cover;
	margin-left: 22%;
	display: block;

	

}
.servicio-ind h3{
	margin: 10px 0;
}
.servicio-ind p{
	font-weight: 300;
	text-align: justify;

}


/*footer*/

footer{
	background: #414141;
	padding: 60px 0 30px 0;
	margin: auto;
	overflow: hidden;
}

.contenedor-footer{
	display: flex;
	width: 90%;
	justify-content: space-evenly;
	margin: auto;
	padding-bottom: 50px;
	border-bottom: 1px solid #ccc;
}
.content-foo{
	text-align: left;
}

.content-foo a{
	text-decoration: none;
	color: #FFF;
}

.content-foo h4{
	
	color: #fff;
	border-bottom: 3px solid#ffffff;
	padding-bottom: 5px;
	margin-bottom: 10px;
	
}
.content-foo p{
	
	color: #ccc;
}
.titulo-final{
	text-align: center;
	font-size: 24px;
	margin: 20px 0 0 0;
	color: #9e9797;

}

@media screen and (max-width: 900px){
	header{
		background-position: center;
	}
	.contenedor-sobre-nosotros{
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}
	.sobre-nosotros .contenido-textos{
		width: 90%;

	}
	.imagen-abaut-us{
		width: 90%;

	}
	/*galeria*/

	.imagen-port{
		width: 44%;
	}
	/*clientes con flexbox*/
	.cards{
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}
	.cards .card{
		width: 90%;
	}
	
	.cards .card:first-child{
		margin-bottom: 30px;
	}
	/*servicios*/
	.servicio-cont{
		justify-content: center;
		flex-direction: column;

	}
	.servicio-ind{
		width: 100%;
		text-align: center;

	}
	.servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
		margin-bottom: 60px;
	}
	.servicio-ind img{
		width: 90%;
	}

}

/*ahora para moviles de 500px*/
@media screen and (max-width:500px) {
	nav{
		text-align: center;
		padding: 30px 0 0 0;

	}

	nav >a{
		margin-right: 5px;

	}
	.textos-header h1{
		font-size: 35px;

	}
	.textos-header h2{
		font-size: 20px;
	}
	/*Abaut us*/
	.imagen-abaut-us{
		margin-bottom: 60px;
		width: 99%;
	
	}
	.sobre-nosotros .contenido-textos{
		width: 95%;
	}

	/*galeria*/
	.imagen-port{
		width: 99%;
	}
	/*clientes*/
	.cards .card{
		height: 450px;
		display: flex;
		flex-direction: column;
		align-items: center ;

	
	}
	.cards .card img{
		width: 90px;
		height: 90px;
	}

	/*contenido footer*/
	.contenedor-footer{
		flex-direction: column;
		border: none;

	}
	.content-foo{
		margin-bottom: 20px;
		text-align: center;


	}
	.content-foo h4{
		border: none;
	}
	.content-foo p{
		color: #ccc;
		padding-bottom: 20px;
		text-align: left;

	}

	.content-foo p:hover{
		color: #ff4a4a;

	}

	.texto-none {
		text-decoration: none;
	}


	.titulo-final{
		font-size: 20px;

	}


}


select {
	padding: 8px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

select option {
	background-color: #f4f4f4;
	color: #333;
	padding: 8px;
	border-radius: 5px;
}

/* Botón */
.btn {
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
}

.btn-custom {
    padding: 5px 20px;
    font-size: 20px;
}

.btn-download-custom {
    padding: 5px 25px;
    font-size: 20px;
}

.btn-color {
	background-color: #D50000;
	color: #fff;
}

.btn-hover:hover {
	background-color: #d50000a6;
}


/*  Paginación  */
.pagina-actual{
	padding: 5px;
	color: #ffffff;
	background-color: #00C853;
	border-radius: 10px;
}

.numero_page {
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
}

.numero_page:hover{
	color: #000000;
	background-color: #89ffba;
	border-radius: 10px;
}


/*  -  */