@charset "utf-8";
/* CSS Document */ 

/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 	
@media only screen and (max-width: 999999px) {
	
.menu_balls{
	background-color: #000;
	width: 100%;
	height: 700px;
	display:inline-flex;
	}
.box_photo_balls{
	width: 50%;
	height: 100%;
	background-image: url(../girl.png);
	background-size: cover;
	}	
.box_menu_balls2{
	
	background-color: transparent;
		width: 50%;
	height: 100%;
	}	

/**************   styles box balls   *******************************/
.big_box_balls{
	
	background-color: transparent;
	margin-top: 9px;
	width: 100%;
	height: 600px;
	display: inline-flex;
}
.first_box_balls{
	
	background-color: transparent;
	margin-left: -32%;
	width: 40%;
	height: 600px;
	align-content: center;
	align-items: center;
	z-index: 0;
	position: absolute;
}
.line{
	width: 1px;
	height: 600px;
	background-color: yellow;
	z-index: 1;
	position: relative;	
}
.second_box_balls{
	
	background-color: transparent;
	margin-left: 0%;
	width: 60%;
	height: 600px;
	align-content: center;
	align-items: center;
	z-index: 0;
	position: relative;
	}	
.arrow_balls{
	margin-top: -13px;
	color: yellow;
	font-size: 21px;
	}

/**************   styles for balls   *******************************/
.ball1{
	width: 120px;
	height: 120px;
	position: absolute; 
	background-image: url(../ball_2.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
}	
.ball2{
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 460px; 
}	
.ball3{
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px;
}	
.title_balls_1{
	color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
	}
.title_balls_2{
color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 0px; 
	}
.title_balls_3{
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 70px; 
	}	
.text_balls_1{
		width: 100%;
		height: 350px;
	display: block;
	font-size: 24px;
	font-weight: 500;
	
	color: white;
	}
.text_balls_2{
	
	color: white;
		width: 100%;
		height: 0px;
	display: none;
	
	font-size: 26px;
	font-weight: 500;
	}
.text_balls_3{
	color: white;
		width: 100%;
		height: 0px;
	font-size: 26px;
	font-weight: 500;
	display: none;
	}	
	

/*▓▓▓▓ START KEYFRAMES MOVES   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
	
/*▓▓▓▓ Press ball 2    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 0 Engrandecer bola 2 y reducir 1 y 3  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 1  **/	
.small_0_ball1 {
  -webkit-animation-name: reducir_0_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_0_Ball1 {
  from {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_2.png);
	background-size: cover;
	 
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 0px;  
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 0px; 
  }
}
/***   reducir  bola 3  **/		
.small_0_ball3 {
  -webkit-animation-name: reducir_0_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_0_Ball3 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px;
  }
}
/***  engrandercer bola 2***/	
.big_0_ball2 {
  -webkit-animation-name: engrandecer_0_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_0_Ball2{
  from {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -30px;
	margin-top: 460px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_1.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 70px; 
  }
}
 		
/*▓▓▓▓ Press ball 3    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 1 Engrandecer bola 3 y reducir 1 y 2  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 1  **/	
.small_1_ball1 {
  -webkit-animation-name: reducir_1_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_1_Ball1 {
  from {
		width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
}
/***   reducir  bola 2  **/		
.small_1_ball2 {
  -webkit-animation-name: reducir_1_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_1_Ball2 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
}
/***  engrandercer bola 3***/	
.big_1_ball3 {
  -webkit-animation-name: engrandecer_1_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_1_Ball3{
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_3.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 130px; 
  }
}
 
/*▓▓▓▓ Press ball 1    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 2 Engrandecer bola 1 y reducir 2 y 3  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***  engrandercer bola 1***/	
.big_2_ball1 {
  -webkit-animation-name: engrandecer_2_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_2_Ball1{
  from {
		width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_2.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px; 
  }
}
/***   reducir  bola 2  **/	
.small_2_ball2 {
  -webkit-animation-name: reducir_2_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_2_Ball2 {
  from {
width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px; 
  }
  to {
	  width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 460px; 
  }
}
/***   reducir  bola 3  **/		
.small_2_ball3 {
  -webkit-animation-name: reducir_2_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_2_Ball3 {
  from {
		width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_3.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 130px;  
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px;
  }
}
 	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ EXTRAS MOVENs  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 2  and move to top   **/	
.small_4_ball2 {
  -webkit-animation-name: reducir_4_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_4_Ball2 {
  from {
width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 460px; 
  }
  to {
	width: 30px;
	height: 30px; 
	background-color: gray; 
	position: absolute; 
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
}	
/***   reducir  bola 3  and move to bottom   **/	
.small_4_ball3 {
  -webkit-animation-name: reducir_4_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_4_Ball3 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 130px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 570px; 
  }
}	
/***   reducir  bola 2  and move to bottom   **/	
.small_5_ball2 {
  -webkit-animation-name: reducir_5_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_5_Ball2 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 130px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 460px; 
  }
}	
/***  engrandercer bola 2 en su lugar***/	
.big_4_ball2 {
  -webkit-animation-name: engrandecer_4_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_4_Ball2{
  from {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -30px; 
	margin-top: 70px; 
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_1.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 70px; 
  }
}
 

/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ MOVENS FOR TEXT  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/***  reduce titulo 1 **/	
.title1_x0{
  -webkit-animation-name: _0_title_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_title_1{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: -10px; 
  }
}	
/***  reduce texto 1 **/	
.text1_x0{
  -webkit-animation-name: _0_text_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_text_1{
  from {
height: 350px;
	color: white;
transition: linear 2s;
	font-size: 24px;
	font-weight: 500;
  }
  to {
height: 0px;
color: transparent;
  }
}	
/***  engrandece titulo 2 **/	
.title2_x0{
  -webkit-animation-name: _0_title_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_title_2{
  from {
	  width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 2 **/	
.text2_x0{
  -webkit-animation-name: _0_text_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_text_2{
  from {
height: 0px;
color: transparent;
  }
  to {
height: 350px;
	color: white;
transition: linear 2s;
	  
	font-size: 24px;
	font-weight: 500;
  }
}		
	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	 
/***  reduce titulo 2 **/	
.title2_x1{
  -webkit-animation-name: _1_title_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_title_2{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 10px; 
  }
}	
/***  reduce texto 2 **/	
.text2_x1{
  -webkit-animation-name: _1_text_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_text_2{
  from {
height: 350px;
	color: white;
transition: linear 2s;	
	 
	font-size: 24px;
	font-weight: 500;
  }
  to {
height: 0px;
color: transparent;
  }
}		
/***  engrandece titulo 3 **/	
.title3_x1{
  -webkit-animation-name: _1_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_title_3{
  from {
	  width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 2 **/	
.text3_x1{
  -webkit-animation-name: _1_text_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_text_3{
  from {
height: 0px;
color: transparent;
  }
  to {
height: 350px;
	color: white;
transition: linear 2s;
	  
	font-size: 24px;
	font-weight: 500;
  }
}		


/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	 
/***  reduce titulo 3 **/	
.title3_x2{
  -webkit-animation-name: _2_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_title_3{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 70px; 
  }
}	
/***  reduce texto 3 **/	
.text3_x2{
  -webkit-animation-name: _2_text_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_text_3{
  from {
height: 350px;
	color: white;
transition: linear 2s;	
	font-size: 24px;
	font-weight: 500;
  }
  to {
height: 0px;
color: transparent;
  }
}		
/***  engrandece titulo 1 **/	
.title1_x2{
  -webkit-animation-name: _2_title_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_title_1{
  from {
	  width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 1 **/	
.text1_x2{
  -webkit-animation-name: _2_text_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_text_1{
  from {
height: 0px;
color: transparent;
  }
  to {
height: 350px;
	color: white;
transition: linear 2s;	
	font-size: 24px;
	font-weight: 500;
  }
}	
	

/*▓▓   extra moves▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***  reduce titulo 3 **/	
.title3_x4{
  -webkit-animation-name: _4_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _4_title_3{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 39px;
	font-weight: 600;
	margin-top: 70px; 
  }
}
	
}
/*▓▓   extra moves▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
 
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   MOBILE   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 	
@media only screen and (max-width: 1333px) {

.menu_balls{
	width: 100%;
	height: 333px;
	display:inline-flex;
	}
.box_photo_balls{
	width: 0%;
	height: 100%;
	background-image: url(../girl.png);
	background-size: cover;
	}	
.box_menu_balls2{
		width: 100%;
	height: 100%;
	}	

/**************   styles box balls   *******************************/
.big_box_balls{
	width: 100%;
	height: 300px;
	display: inline-flex;
}
.first_box_balls{
	margin-left: 0%;
	width: 30%;
	height: 300px;
	align-content: center;
	align-items: center;
	z-index: 0;
	position: absolute;
}
.line{
	width: 1px;
	height: 300px;
	background-color: yellow;
	z-index: 1;
	position: relative;	
}
.second_box_balls{
	margin-left: 50%;
	width: 70%;
	height: 300px;
	align-content: center;
	align-items: center;
	z-index: 0;
	position: relative;
	}	
.arrow_balls{
	margin-top: -13px;
	color: yellowgreen;
	font-size: 21px;
	}

/**************   styles for balls   *******************************/
.ball1{
	width: 120px;
	height: 120px;
	position: absolute; 
	background-image: url(../ball_2.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
}	
.ball2{
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 160px; 
}	
.ball3{
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px;
}	
.title_balls_1{
	color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
	}
.title_balls_2{
color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 120px; 
	}
.title_balls_3{
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 100px; 
	}	
.text_balls_1{
		width: 100%;
		height: 0px;
	
	color: white;
	display: block;
	font-size: 9px;
	font-weight: 700;
	}
.text_balls_2{
		width: 100%;
		height: 0px;
	display: none;
	font-size: 9px;
	
	color: white;
	font-weight: 700;
	}
.text_balls_3{
		width: 100%;
		height: 0px;
	display: none;
	
	color: white;
	font-size: 9px;
	font-weight: 700;
	}	
	

/*▓▓▓▓ START KEYFRAMES MOVES   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
	
/*▓▓▓▓ Press ball 2    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 0 Engrandecer bola 2 y reducir 1 y 3  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 1  **/	
.small_0_ball1 {
  -webkit-animation-name: reducir_0_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_0_Ball1 {
  from {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_2.png);
	background-size: cover;
	 
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 0px;  
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 0px; 
  }
}
/***   reducir  bola 3  **/		
.small_0_ball3 {
  -webkit-animation-name: reducir_0_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_0_Ball3 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px;
  }
}
/***  engrandercer bola 2***/	
.big_0_ball2 {
  -webkit-animation-name: engrandecer_0_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_0_Ball2{
  from {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -30px;
	margin-top: 160px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_1.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 70px; 
  }
}
 		
/*▓▓▓▓ Press ball 3    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 1 Engrandecer bola 3 y reducir 1 y 2  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 1  **/	
.small_1_ball1 {
  -webkit-animation-name: reducir_1_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_1_Ball1 {
  from {
		width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
}
/***   reducir  bola 2  **/		
.small_1_ball2 {
  -webkit-animation-name: reducir_1_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_1_Ball2 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
}
/***  engrandercer bola 3***/	
.big_1_ball3 {
  -webkit-animation-name: engrandecer_1_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_1_Ball3{
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_3.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 130px; 
  }
}
 
/*▓▓▓▓ Press ball 1    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ Estado 2 Engrandecer bola 1 y reducir 2 y 3  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***  engrandercer bola 1***/	
.big_2_ball1 {
  -webkit-animation-name: engrandecer_2_Ball1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_2_Ball1{
  from {
		width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_2.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px; 
  }
}
/***   reducir  bola 2  **/	
.small_2_ball2 {
  -webkit-animation-name: reducir_2_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_2_Ball2 {
  from {
width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px; 
  }
  to {
	  width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 160px; 
  }
}
/***   reducir  bola 3  **/		
.small_2_ball3 {
  -webkit-animation-name: reducir_2_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_2_Ball3 {
  from {
		width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_3.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 130px;  
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px;
  }
}
 	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ EXTRAS MOVENs  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***   reducir  bola 2  and move to top   **/	
.small_4_ball2 {
  -webkit-animation-name: reducir_4_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_4_Ball2 {
  from {
width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 160px; 
  }
  to {
	width: 30px;
	height: 30px; 
	background-color: gray; 
	position: absolute; 
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 70px; 
  }
}	
/***   reducir  bola 3  and move to bottom   **/	
.small_4_ball3 {
  -webkit-animation-name: reducir_4_Ball3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_4_Ball3 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 130px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 270px; 
  }
}	
/***   reducir  bola 2  and move to bottom   **/	
.small_5_ball2 {
  -webkit-animation-name: reducir_5_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes reducir_5_Ball2 {
  from {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: gray;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 130px; 
  }
  to {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -15px;
	margin-top: 160px; 
  }
}	
/***  engrandercer bola 2 en su lugar***/	
.big_4_ball2 {
  -webkit-animation-name: engrandecer_4_Ball2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes engrandecer_4_Ball2{
  from {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: grey;
	border-radius: 50%;
	margin-left: -30px; 
	margin-top: 70px; 
  }
  to {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url(../ball_1.png);
	background-size: cover;
	border-radius: 50%;
	margin-left: -60px;
	margin-top: 70px; 
  }
}
 

/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓ MOVENS FOR TEXT  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓		
/***  reduce titulo 1 **/	
.title1_x0{
  -webkit-animation-name: _0_title_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_title_1{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: -10px; 
  }
}	
/***  reduce texto 1 **/	
.text1_x0{
  -webkit-animation-name: _0_text_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_text_1{
  from {
height: 0px;
	color: white;
transition: linear 2s;	
	  
	font-size: 9px;
	font-weight: 700;
  }
  to {
height: 0px;
color: transparent;
  }
}	
/***  engrandece titulo 2 **/	
.title2_x0{
  -webkit-animation-name: _0_title_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_title_2{
  from {
	  width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 2 **/	
.text2_x0{
  -webkit-animation-name: _0_text_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _0_text_2{
  from {
height: 0px;
color: transparent;
  }
  to {

	font-size: 10px;
height: 130px;
	color: white;
transition: linear 2s;	
	font-weight: 700;
  }
}		
	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	 
/***  reduce titulo 2 **/	
.title2_x1{
  -webkit-animation-name: _1_title_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_title_2{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 10px; 
  }
}	
/***  reduce texto 2 **/	
.text2_x1{
  -webkit-animation-name: _1_text_2;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_text_2{
  from {

height: 0px;
	color: white;
transition: linear 2s;	 
	  
	font-size: 9px;
	font-weight: 700;
  }
  to {
height: 0px;
color: transparent;
  }
}		
/***  engrandece titulo 3 **/	
.title3_x1{
  -webkit-animation-name: _1_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_title_3{
  from {
	  width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 2 **/	
.text3_x1{
  -webkit-animation-name: _1_text_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _1_text_3{
  from {
height: 0px;
color: transparent;
  }
  to {

	font-size: 10px;
height: 130px;
	color: white;
transition: linear 2s;	
	   
	font-weight: 700;
  }
}		


/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	 
/***  reduce titulo 3 **/	
.title3_x2{
  -webkit-animation-name: _2_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_title_3{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 70px; 
  }
}	
/***  reduce texto 3 **/	
.text3_x2{
  -webkit-animation-name: _2_text_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_text_3{
  from {

height: 0px;
	color: white;
transition: linear 2s;	
	  
	font-size: 9px;
	font-weight: 700;
  }
  to {
height: 0px;
color: transparent;
  }
}		
/***  engrandece titulo 1 **/	
.title1_x2{
  -webkit-animation-name: _2_title_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_title_1{
  from {
	  width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 900;
	margin-top: 0px; 
  }
  to {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
}	
/***  aparece texto 1 **/	
.text1_x2{
  -webkit-animation-name: _2_text_1;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _2_text_1{
  from {
height: 0px;
color: transparent;
  }
  to {
	  
	font-size: 10px;
height: 130px;
	color: white;
transition: linear 2s;	
	   
	font-weight: 700;
  }
}	
	

/*▓▓   extra moves▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓	
/***  reduce titulo 3 **/	
.title3_x4{
  -webkit-animation-name: _4_title_3;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes _4_title_3{
  from {
color: greenyellow;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 30px; 
  }
  to {
	color: gray;
	font-family: Poppins;
	width: 100%;
	height: auto; 
	font-size: 15px;
	font-weight: 600;
	margin-top: 70px; 
  }
}
	
}
/*▓▓   extra moves▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓