:root {
	--sectionHeight: 650px;
}

.section {
	height: var(--sectionHeight);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}

#nutricion {
	background-image: url("/images/nutricion-animal-crianza-slide.jpg");
}

#pollo {
	background-image: url("/images/pollos-crianza-slide.jpg");
}

#huevo {
	background-image: url("/images/huevo-crianza-slide.jpg");
}

#cerdo {
	background-image: url("/images/cerdo-crianza-slide.jpg");
}

#borrego {
	background-image: url("/images/borregos-crianza-slide.jpeg");
}

#bovino {
	background-image: url("/images/ganado-bovino-crianza-slide.jpg");
}

.large-circle {
	width: calc(var(--sectionHeight) * 2);
	height: calc(var(--sectionHeight) * 2);
	border-radius: 50%;
	background-color: rgba(0,0,0,0.5);
}

.large-circle-left {
	position: absolute;
	top: 0;
	left: calc(var(--sectionHeight) * -1);
}

.large-circle-right {
	position: absolute;
	top: 0;
	right: calc(var(--sectionHeight) * -1);
}

.medium-circle {
	width: calc(var(--sectionHeight) * 2 * 0.7);
	height: calc(var(--sectionHeight) * 2 * 0.7);
	border-radius: 50%;
	background-color: rgba(0,0,0,0.5);
}

.medium-circle-left {
	position: absolute;
	top: calc(var(--sectionHeight) * 0.3);
	left: calc(var(--sectionHeight) * -1 * 0.7);
}

.medium-circle-right {
	position: absolute;
	top: calc(var(--sectionHeight) * 0.3);
	right: calc(var(--sectionHeight) * -1 * 0.7);
}

.small-circle {
	width: calc(var(--sectionHeight) * 2 * 0.4);
	height: calc(var(--sectionHeight) * 2 * 0.4);
	border-radius: 50%;
	background-color: rgba(0,0,0,0.5);
}

.small-circle-left {
	position: absolute;
	top: calc(var(--sectionHeight) * 0.6);
	left: calc(var(--sectionHeight) * -1 * 0.4);
}

.small-circle-right {
	position: absolute;
	top: calc(var(--sectionHeight) * 0.6);
	right: calc(var(--sectionHeight) * -1 * 0.4);
}

.isotriangle-left {
	background: rgba(0,0,0,0.45);
  display: inline-block;
  width: calc(180px * var(--times));
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	height: var(--sectionHeight);
}

.isotriangle-left:before {
  border-left: 180px solid rgba(0,0,0,0.45);
  border-top: calc(var(--sectionHeight) / 2) solid transparent;
  border-bottom: calc(var(--sectionHeight) / 2) solid transparent;
  content: "";
  position: absolute;
  left: calc(180px * var(--times));
	top: 0;
	bottom: 0;
  height: 0;
  width: 0;
}

.isotriangle-right {
	background: rgba(0,0,0,0.45);
  display: inline-block;
  width: calc(180px * var(--times));
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: var(--sectionHeight);
}

.isotriangle-right:before {
  border-right: 180px solid rgba(0,0,0,0.45);
  border-top: calc(var(--sectionHeight) / 2) solid transparent;
  border-bottom: calc(var(--sectionHeight) / 2) solid transparent;
  content: "";
  position: absolute;
  right: calc(180px * var(--times));
	top: 0;
	bottom: 0;
  height: 0;
  width: 0;
}

.triangle-left {
	background: rgba(0,0,0,0.45);
  display: inline-block;
  width: calc((250px * var(--times)) - 125px);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	height: var(--sectionHeight);
}

.triangle-left:before {
  border-left: 375px solid rgba(0,0,0,0.45);
  border-top: var(--sectionHeight) solid transparent;
  content: "";
  position: absolute;
  left: calc((250px * var(--times)) - 125px);
	top: 0;
	bottom: 0;
  height: 0;
  width: 0;
}

.triangle-right {
	background: rgba(0,0,0,0.45);
  display: inline-block;
  width: calc((250px * var(--times)) - 125px);
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: var(--sectionHeight);
}

.triangle-right:before {
  border-right: 375px solid rgba(0,0,0,0.45);
  border-top: var(--sectionHeight) solid transparent;
  content: "";
  position: absolute;
  right: calc((250px * var(--times)) - 125px);
	top: 0;
	bottom: 0;
  height: 0;
  width: 0;
}

h1 {
	color: var(--primaryColor);
	font-family: 'Aganè';
	font-size: 45px;
	font-weight: bold;
	line-height: 54px;
	margin-bottom: 23px;
}

h1 > span {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-weight: lighter;
}

p {
	color: #FFFFFF;
	font-family: 'Aganè';
	font-size: 18px;
	line-height: 19px;
}

.mouse-wrapper {
	position: absolute;
	bottom: 43px;
	left: 0px;
	right: 0px;
	width: 100%;
	text-align: center;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

.bounce {
	-moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}