/* @group --- Open/closed Button text */

#drop:after {	content:"OPEN";
	visibility: visible;
}
#drop.opened:after{content:"CLOSE";
	visibility: visible;
}
/* @group fade */
/* ------close-------- */
@keyframes text_button_text {
  0% {
	opacity: 0;
 transform:  translateX(-30px);  
 -webkit-transform: translateX(-30px); 	
	}
  100% {
	opacity: 1; 
 transform:  translateX(0px);  
 -webkit-transform: translateX(0px); 	
}
}

@-moz-keyframes text_button_text {
  0% {	opacity: 0;
   transform:            translateX(-30px);  
 -moz-transform:    translateX(-30px);  
 -webkit-transform: translateX(-30px);  
  }
  100% {	opacity: 1; 
   transform:            translateX(0px); 
 -moz-transform:    translateX(0px);
 -webkit-transform: translateX(0px);
  }
}

@-webkit-keyframes text_button_text {
  0% {	opacity: 0;
 transform:  translateX(-30px);  
 -webkit-transform: translateX(-30px); 	 
  }
  100% {	opacity: 1; 
 transform:  translateX(0px);  
 -webkit-transform: translateX(0px); 	  
  }
}

@-ms-keyframes text_button_text {
  0% {	opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
	filter: alpha(opacity=0);	
   transform:            translateX(-30px);  
 -webkit-transform: translateX(-30px);  
 -ms-transform:     translateX(-30px); 
  }
  100% {	opacity: 1; 
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	filter: alpha(opacity=100);	
   transform:            translateX(0px); 
 -webkit-transform: translateX(0px);
 -ms-transform:      translateX(0px);
  }
}

#drop.opened:after {	
  -webkit-animation: text_button_text 0.4s forwards !important;
  -moz-animation: text_button_text 0.4s forwards !important;
   -ms-animation: text_button_text 0.4s forwards !important;
	  animation: text_button_text 0.4s forwards !important;
}

/* ------close-------- */
/* ------open-------- */
@keyframes text_button_text2 {
  0% {
	opacity: 0;
 transform:  translateX(30px);  
 -webkit-transform: translateX(-30px); 	
	}
  100% {
	opacity: 1; 
 transform:  translateX(0px);  
 -webkit-transform: translateX(0px); 	
}
}

@-moz-keyframes text_button_text2 {
  0% {	opacity: 0;
   transform:            translateX(30px);  
 -moz-transform:    translateX(30px);  
 -webkit-transform: translateX(30px);  
  }
  100% {	opacity: 1; 
   transform:            translateX(0px); 
 -moz-transform:    translateX(0px);
 -webkit-transform: translateX(0px);
  }
}

@-webkit-keyframes text_button_text2 {
  0% {	opacity: 0;
 transform:  translateX(30px);  
 -webkit-transform: translateX(30px); 	 
  }
  100% {	opacity: 1; 
 transform:  translateX(0px);  
 -webkit-transform: translateX(0px); 	  
  }
}

@-ms-keyframes text_button_text2 {
  0% {	opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
	filter: alpha(opacity=0);	
   transform:            translateX(30px);  
 -webkit-transform: translateX(30px);  
 -ms-transform:     translateX(30px); 
  }
  100% {	opacity: 1; 
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	filter: alpha(opacity=100);	
   transform:            translateX(0px); 
 -webkit-transform: translateX(0px);
 -ms-transform:      translateX(0px);
  }
}

#drop:after {	
  -webkit-animation: text_button_text2 0.4s forwards !important;
  -moz-animation: text_button_text2 0.4s forwards !important;
   -ms-animation: text_button_text2 0.4s forwards !important;
	  animation: text_button_text2 0.4s forwards !important;
}
/* ------opne------- */
/* @end */
/* @end */