@import url(common.css);

#videoInicial video{
	width:1230px;
	height: 500px;
}

#cajasAnaCata
{
	height:340px;
	margin-left: 40px;
  z-index: 0;
}


#cajaElementos
{
	border-width: 3px;
  	border-style: dashed;
  	border-color: #e6af40;
  	margin-top: 20px;
  	margin-left: 40px;
  	height: 150px;
}

#cajaElementos div
{
	border-radius:10px;
	padding-right: 0;
	margin-right: 10px;
	margin-bottom: 5px;
  width: 28%;
  vertical-align: top;
  display: inline-block;
}

#cajaElementos div p
{
	text-align: center;
	margin-top: 10px;
  z-index:999;
}

.botonesAna
{
	position: absolute;
}

#btnAna1{top: 100px;left: 140px;}
#btnAna2{top: 328px;left: 300px;}
#btnAna3{top: 310px;left: 630px;}
#btnAna4{top: 60px; left: 610px;}
#btnAna5{top: 150px;left: 920px;}

.flechasAna
{
	position: absolute;
}

#flechaAna1{top: 250px;left: 155px;z-index: 1;}
#flechaAna2{top: 545px;left: 430px;z-index: 1;}
#flechaAna3{top: 250px;left: 663px;z-index: 1;}
#flechaAna4{top: 170px;left: 790px;z-index: 1;}



.boxes_animales
{
	position: absolute;
	border:5px #bfbfbf solid;
	padding: 5px;
	border-radius: 10px;
}

.boxes_animales p{
	font-size: 24px;
}

#box1 p{
	color:#bfbfbf;
	text-align: center;	
	font-size: 36px;
}

#box1{padding: 30px;top: 40px;left: 38px;border-radius: 0;font-size:36px; }
#box2{top: 350px;left: 20px;height: 192px;}
#box3{top: 270px;left: 446px;height: 110px;}
#box4{top: 480px;left: 380px;background:#ffcd1d; height: 50px; }
#box5{top: 78px;left: 370px;height: 50px;}
#box6{top: 40px;left: 830px;height: 81px;}
#box7{top: 480px;left: 860px;background:#ffcd1d;  height: 84px;}
#box8{top: 300px;left: 900px;  height: 110px;}

#box2:after{
	content: " ";
	height: 24px;
	width: 21px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 20px solid #bfbfbf;
	float: left;
	position: relative;
	top:-217px;
	left: 100px;
}
#box3:after{
	content: "";
 	height: 15px;
 	width: 21px;
 	border-top: 10px solid transparent;
 	border-bottom: 10px solid transparent;
 	border-right: 20px solid #bfbfbf;
 	float: left;
 	position: relative;
 	top: -80px;
 	left: -29px;
}
#box4:after{
	content: "";
  	height: 15px;
  	width: 21px;
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-bottom: 20px solid #bfbfbf;
  	float: left;
  	position: relative;
  	top: -65px;
  	left: 10px;
}
#box5:after{
	content: "";
  	height: 15px;
	width: 21px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 20px solid #bfbfbf;
	float: left;
	position: relative;
	top: 0px;
	left: 17px;
}
#box6:after{
	content: "";
 	height: 15px;
 	width: 21px;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
 	border-top: 20px solid #bfbfbf;
 	float: left;
 	position: relative;
 	top: 2px;
 	left: 70px;
}
#box7:after{
  content: "";
  height: 15px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -93px;
  left: 120px;
}
#box8:after{
  content: "";
  height: 15px;
  width: 21px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -80px;
  left: 297px;
}

.boxComplementos
{
	position: absolute;
}

#boxC1{top: 288px;left: 120px;}
#boxCX{top: 288px;left: 388px;}
#boxC2{top: 420px;left: 390px;}
#boxC3{top: 420px;left: 980px;}
#boxC4{top: 148px;left: 387px;}
#boxC5{top: 146px;left: 900px;}
#boxC6{top: 315px;left: 1232px;}
#boxC7{top: 206px;left: 137px;} #boxC7 img{height:83px;}
#boxC8{top: 300px;left: 158px;} #boxC8 img{width: 230px;}
#boxC9{top: 187px;left: 397px;} #boxC9 img{height: 108px;}
#boxC10{top: 321px;left: 399px;}#boxC10 img{height: 101px;}
#boxC11{top: 152px;left: 424px;}#boxC11 img{width: 480px;}
#boxC12{top: 424px;left: 427px;}#boxC12 img{width: 557px;}
#boxC13{top: 155px;left: 940px;}#boxC13 img{width: 313px;}
#boxC14{top: 427px;left: 1010px;}#boxC14 img{width: 243px;}
#boxC15{top: 351px;left: 1244px;}#boxC15 img{height: 90px;}
#boxC16{top: 165px;left: 1238px;}#boxC16 img{height: 150px;}

.boxCatabolismo{
	position: absolute;
	border:5px #bfbfbf solid;
	padding: 5px;
	border-radius: 10px;
}

.boxCatabolismo p{
	font-size: 22px;
}

#boxCata1{
	padding:10px;
	border-radius:0;
	color:#bfbfbf;
	top:20px;
	left:40px;
	height:140px;
}

#boxCata1 p{
	font-size: 22px;
}

#boxCata2{
	background: #ffcd1d;
	top: 488px;
  	left: 200px;
  	height: 50px;
}

#boxCata2:after{
	content: " ";
  height: 24px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -70px;
  left: 194px;
}

#boxCata3{
	top: 488px;
  left: 600px;
  height:71px;
}

#boxCata3:after{
	content: " ";
  height: 24px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -95px;
  left: 34px;
}

#boxCata4{
	top: 488px;
  left: 970px;
	height:71px;
}

#boxCata4:after{
	content: " ";
  height: 24px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -95px;
  left: 34px;
}

#boxCata5{
	top: 260px;
  	left: 92px;
  	height: 100px;
}

#boxCata5:after{
	content: "";
  height: 15px;
  width: 21px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -57px;
  left: 280px;
}

#boxCata6{
	top: 350px;
  left: 490px;
  height:71px;
}

#boxCata6:after{
	content: " ";
  height: 24px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -97px;
  left: 63px;
}

#boxCata7{
	top: 140px;
  left: 520px;
  height: 142px;
}

#boxCata7:after{
	content: "";
  height: 15px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: 13px;
  left: 191px;
}

#boxCata8{
	  top: 350px;
  left: 810px;
  height:71px;
}

#boxCata8:after{
	content: " ";
  height: 24px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -97px;
  left: 61px;
}

#boxCata9{
	top: 226px;
  left: 931px;
  height: 58px;
}

#boxCata9:after{
	content: "";
  height: 15px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: 8px;
  left: 162px;
}

#boxCata10{
	top: 20px;
  left: 330px;
  height: 74px;
}

#boxCata10:after{
	content: "";
  height: 15px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: -1px;
  left: 65px;
}


#boxCata11{
	top: 20px;
	left: 860px;
	height: 77px;
}

#boxCata11:after{
	content: "";
  height: 15px;
  width: 21px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #bfbfbf;
  float: left;
  position: relative;
  top: 0px;
  left: 83px;
}

.boxCatabolismoBotones
{
	position: absolute;
	z-index: 1;
}

.boxCatabolismoBotones img{
	width: 70%;
}

#boxCataBtn1{  top: 442px;  left: 400px;}
#boxCataBtn2{top:442px; left: 640px;}
#boxCataBtn3{top:442px;left: 1010px;}
#boxCataBtn4{top:300px;left:400px;}
#boxCataBtn5{top:300px;left:560px;}
#boxCataBtn6{top:300px;left:718px;}
#boxCataBtn7{top:300px;left:878px;}
#boxCataBtn8{top:300px;left:1100px;}
#boxCataBtn9{top:112px;left:400px;}
#boxCataBtn10{top:112px;left:950px;}

.boxCatabolismoLineas
{
	position: absolute;
}

#boxCataLn1{top: 157px;  left: 53px;}
#boxCataLn2{top: 444px;  left: 53px;}
#boxCataLn3{top: 448px;  left: 430px;}
#boxCataLn4{top: 448px;  left: 669px;}
#boxCataLn5{top: 330px;  left: 404px;}
#boxCataLn6{top: 304px;  left: 430px;}
#boxCataLn7{top: 304px;  left: 588px;}
#boxCataLn8{top: 304px;  left: 747px;}
#boxCataLn9{top: 304px;  left: 906px;}
#boxCataLn10{top:140px;  left:404px;}
#boxCataLn11{top: 119px; left: 420px;}

#boxCataLn1 img {height: 302px;  width: 3px;}
#boxCataLn2 img{height: 3px;width: 350px;}
#boxCataLn3 img{height: 18px;width: 210px;}
#boxCataLn4 img{height: 18px;width: 340px;}
#boxCataLn5 img{height: 113px;}
#boxCataLn6 img{height: 21px;width: 130px;}
#boxCataLn7 img{height: 21px;width: 130px;}
#boxCataLn8 img{height: 21px;width: 130px;}
#boxCataLn9 img{height: 21px;width: 195px;}
#boxCataLn10 img{height: 161px;width: 22px;}
#boxCataLn11 img{height: 17px;  width: 530px;}

#cajasAnaCata2
{
	height: 300px;
	margin-left: 40px;
  z-index: 0;
}

#cajaElementos2
{
  	margin-top: 20px;
  	height: 150px;
}

#cajaElementos2 div
{
	border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  width: 31%;
  vertical-align: top;
  display: inline-block;

}

#cajaElementos2 div p{
	
	text-align: center;
	margin-bottom: 0;
  z-index: 999;
}

#cajaUva
{
	margin-top: 50px;
}

#btnTiposFermentacion div button
{
	width: 100%;
	height: 110px;
	margin-bottom: 20px;
	font-size: 40px;
}

#btnTiposFermentacion div button:active
{
	margin-top: 0;
}

.btnbordes{
	border-style: dashed;
	border-width: 3px;
	padding: 20px;
}

.stack
{
	width: 250px;
}
.ggd_Flecha_Avanzar_h, .ggd_Flecha_volver_h
{
	position: relative;
	right: 0;
	bottom: 0;
}

.ggd_Flecha_Avanzar_h
{
	top: 80px;
	left: 250px;
}

#stackVinagre{
	width:auto;
}

#stackVinagre p{
	bottom: -183px;
}

#stackVinagre:hover p{
	bottom: 0;
}

#stackVinagre p:hover{
	bottom: 0;
}

#stackMantequilla{
	width: 350px;
}

#videoInicial video{
  width:1230px;
  height: 500px;
}

.procesos th
{
  background: #bbe0e3;
  text-align: center;
}

.procesos td textarea
{
  margin: 10px;
  width: 580px;
  height: 80px;
}

.procesos{
  border: 2px solid #fff;
}

.procesos th
{
  padding: 20px 0;
}

.procesos td, .procesos th
{
 border: 2px solid #fff; 
}

.procesos tbody tr:first-child, .procesos tbody tr:last-child
{
  background:#e7f3f4;
}

.procesos tbody tr{
  background: #f3f9fa;
}


