.garrafon_home{
  animation: anima_garrafon ease 1s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_garrafon ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_garrafon ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_garrafon ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_garrafon ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_garrafon{
  0% {left:0px;top:204px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_garrafon{
  0% {left:0px;top:204px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_garrafon {
  0% {left:0px;top:204px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_garrafon {
  0% {left:0px;top:204px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_garrafon {
  0% {left:0px;top:204px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

/*-----------------GARRAFON HISTORIA*/
.garrafon_nosotros{
  animation: anima_garrafon2 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_garrafon2 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_garrafon2 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_garrafon2 ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_garrafon2 ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_garrafon2{
  0% {left:585px;top:-100px;opacity:0;}  100% {left:585px;top:-130px;opacity:1;}
}

@-moz-keyframes anima_garrafon2{
  0% {left:585px;top:-100px;opacity:0;}  100% {left:585px;top:-130px;opacity:1;}
}

@-webkit-keyframes anima_garrafon2 {
  0% {left:585px;top:-100px;opacity:0;}  100% {left:585px;top:-130px;opacity:1;}
}

@-o-keyframes anima_garrafon2 {
  0% {left:585px;top:-100px;opacity:0;}  100% {left:585px;top:-130px;opacity:1;}
}

@-ms-keyframes anima_garrafon2 {
  0% {left:585px;top:-100px;opacity:0;}  100% {left:585px;top:-130px;opacity:1;}
}

/*-----------------GARRAFON calidad*/
.garrafon_calidad{
  animation: anima_garrafon3 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_garrafon3 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_garrafon3 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_garrafon3 ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_garrafon3 ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_garrafon3{
  0% {left:30px;top:-100px;opacity:0;}  100% {left:30px;top:-130px;opacity:1;}
}

@-moz-keyframes anima_garrafon3{
  0% {left:30px;top:-100px;opacity:0;}  100% {left:30px;top:-130px;opacity:1;}
}

@-webkit-keyframes anima_garrafon3 {
  0% {left:30px;top:-100px;opacity:0;}  100% {left:30px;top:-130px;opacity:1;}
}

@-o-keyframes anima_garrafon3 {
  0% {left:30px;top:-100px;opacity:0;}  100% {left:30px;top:-130px;opacity:1;}
}

@-ms-keyframes anima_garrafon3 {
  0% {left:30px;top:-100px;opacity:0;}  100% {left:30px;top:-130px;opacity:1;}
}

/*-----------------GARRAFON descripcion*/
.garrafon_descripcion{
  animation: anima_garrafon4 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_garrafon4 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_garrafon4 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_garrafon4 ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_garrafon4 ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_garrafon4{
  0% {left:-60px;top:115px;opacity:0;}  100% {left:0px;top:115px;opacity:1;}
}

@-moz-keyframes anima_garrafon4{
  0% {left:-60px;top:115px;opacity:0;}  100% {left:0px;top:115px;opacity:1;}
}

@-webkit-keyframes anima_garrafon4 {
  0% {left:-60px;top:115px;opacity:0;}  100% {left:0px;top:115px;opacity:1;}
}

@-o-keyframes anima_garrafon4 {
  0% {left:-60px;top:115px;opacity:0;}  100% {left:0px;top:115px;opacity:1;}
}

@-ms-keyframes anima_garrafon4 {
  0% {left:-60px;top:115px;opacity:0;}  100% {left:0px;top:115px;opacity:1;}
}

/*-----------------ENVASE 1*/
.envase1{
  animation: anima_envase1 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_envase1 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_envase1 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_envase1 ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_envase1 ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_envase1{
  0% {left:400px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_envase1{
  0% {left:400px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_envase1 {
  0% {left:400px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_envase1 {
  0% {left:400px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_envase1 {
  0% {left:400px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}
/*-----------------ENVASE 2*/
.envase2{
  animation: anima_envase2 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_envase2 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_envase2 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_envase2 ease 2s;
  -o-animation-iteration-count: 2;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_envase2 ease 2s;
  -ms-animation-iteration-count: 2;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_envase2{
  0% {left:500px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_envase2{
  0% {left:500px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_envase2 {
  0% {left:500px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_envase2 {
  0% {left:500px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_envase2 {
  0% {left:500px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

/*-----------------ENVASE 3*/
.envase3{
  animation: anima_envase3 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_envase3 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_envase3 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_envase3 ease 2s;
  -o-animation-iteration-count: 2;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_envase3 ease 2s;
  -ms-animation-iteration-count: 2;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_envase3{
  0% {left:600px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_envase3{
  0% {left:600px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_envase3 {
  0% {left:600px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_envase3 {
  0% {left:600px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_envase3 {
  0% {left:600px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

/*-----------------ENVASE 4*/
.envase4{
  animation: anima_envase4 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_envase4 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_envase4 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_envase4 ease 2s;
  -o-animation-iteration-count: 2;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_envase4 ease 2s;
  -ms-animation-iteration-count: 2;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_envase4{
  0% {left:700px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_envase4{
  0% {left:700px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_envase4 {
  0% {left:700px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_envase4 {
  0% {left:700px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_envase4 {
  0% {left:700px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

/*-----------------ENVASE 5*/
.envase5{
  animation: anima_envase5 ease 2s;
  animation-iteration-count: 1;  
  transform-origin: 50% 50%;
  -webkit-animation: anima_envase5 ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_envase5 ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_envase5 ease 2s;
  -o-animation-iteration-count: 2;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_envase5 ease 2s;
  -ms-animation-iteration-count: 2;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_envase5{
  0% {left:800px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-moz-keyframes anima_envase5{
  0% {left:800px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-webkit-keyframes anima_envase5 {
  0% {left:800px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-o-keyframes anima_envase5 {
  0% {left:800px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}

@-ms-keyframes anima_envase5 {
  0% {left:800px;top:0px;opacity:0;}  100% {left:0px;top:0px;opacity:1;}
}
/* HOJA 1----------------------------------------------------------------------------------*/

.hoja1{
  animation: anima_hoja1 ease-out 1.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: anima_hoja1 ease-out 1.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_hoja1 ease-out 1.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_hoja1 ease-out 1.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_hoja1 ease-out 1.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_hoja1{
  0% {left:-40px;top:75px;opacity:0.05;}  100% {left:-40px;top:67px;opacity:1;}
}

@-moz-keyframes anima_hoja1{
  0% {left:-40px;top:75px;opacity:0.05;}  100% {left:-40px;top:67px;opacity:1;}
}

@-webkit-keyframes anima_hoja1 {
  0% {left:-40px;top:75px;opacity:0.05;}  100% {left:-40px;top:67px;opacity:1;}
}

@-o-keyframes anima_hoja1 {
  0% {left:-40px;top:75px;opacity:0.05;}  100% {left:-40px;top:67px;opacity:1;}
}

@-ms-keyframes anima_hoja1 {
  0% {left:-40px;top:75px;opacity:0.05;}  100% {left:-40px;top:67px;opacity:1;}
}

/* HOJA 2----------------------------------------------------------------------------------*/

.hoja2{
  animation: anima_hoja2 ease-in-out 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: anima_hoja2 ease-in-out 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: anima_hoja2 ease-in-out 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: anima_hoja2 ease-in-out 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: anima_hoja2 ease-in-out 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes anima_hoja2{
  0% {left:880px;top:-100px;opacity:0.05;}  100% {left:880px;top:-28px;opacity:1;}
}

@-moz-keyframes anima_hoja2{
  0% {left:880px;top:-100px;opacity:0.05;}  100% {left:880px;top:-28px;opacity:1;}
}

@-webkit-keyframes anima_hoja2 {
  0% {left:880px;top:-100px;opacity:0.05;}  100% {left:880px;top:-28px;opacity:1;}
}

@-o-keyframes anima_hoja2 {
  0% {left:880px;top:-100px;opacity:0.05;}  100% {left:880px;top:-28px;opacity:1;}
}

@-ms-keyframes anima_hoja2 {
  0% {left:880px;top:-100px;opacity:0.05;}  100% {left:880px;top:-28px;opacity:1;}
}