ul.buttons{
	padding: 20px 0 0 17%;
}
ul.buttons li{ 
	list-style: none;
	float: left;
	display: inline-block;
	color: white;
	border-radius: 15px;
	box-shadow: inset 0 0 10px -1px black;
	padding: 10px 18px;
	margin: 15px;
	max-width: 232px;
	font-size: 2.1em;
	line-height: 0.9em;
	text-align: center;
	cursor: pointer;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;	
}

ul.buttons li.active{
	transform: scale(1.05,1.05);
	box-shadow: none;
}

ul.buttons li:active{
    -moz-animation: blink 0.3s ease 1 normal;
    -webkit-animation: blink 0.3s ease 1 normal;
    animation: blink 0.3s ease 1 normal;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes blink{
    0% { opacity: 1; transform: scale(1, 1);}
    50% { opacity: 0.5;  transform: scale(1.05,1.05);}
    100% { opacity: 1;  transform: scale(1,1);}
}

@-moz-keyframes blink{
    0% { opacity: 1; transform: scale(1, 1);}
    50% { opacity: 0.5;  transform: scale(1.05,1.05);}
    100% { opacity: 1;  transform: scale(1,1);}
}

@keyframes blink {
    0% { opacity: 1; transform: scale(1,1);}
    50% { opacity: 0.5;  transform: scale(1.05,1.05);}
    100% { opacity: 1;  transform: scale(1,1);}
}

.long_text{
	height: 535px;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 40px 50px 205px;
 }
 .scrollShadow{
	box-shadow: inset -5px 3px 20px -3px black; 	
 }

.long_text h3{
	font-size: 3em;
	font-style: italic;
	text-align: center;
}
.long_text h3 span{
	font-weight: lighter;
	display: block;
}
.long_text p{
	font-size: 2.375em;
	line-height: 1.25em;
	position: relative;
}
.long_text p span{
	padding: 5px;
	letter-spacing: -0.5px;
	position: relative;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;	
}
.ok{	
	font-weight: bold;	
}

.orange.ok{		color: #F08424;	}
.green.ok{		color: #739530;	}
.blue.ok{		color: #009FD0;	}
.yellow.ok{		color: #FFBC00;	}
#orange, em.orange{		background-color: #F08424;	}
#green, em.green{		background-color: #739530;	}
#blue, em.blue{			background-color: #009FD0;	}
#yellow, em.yellow{		background-color: #FFBC00;	}

em{
	display: none;
	margin: 20px;
	height: 121px;
	width: 121px;
	color: white;
	text-align: center;
	font-size: 0.6em;
	font-weight: bold;
	line-height: 121px;
	border-radius: 8px;
	position: absolute;
	left: -180px;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;	
}
em:after{
	content: "";
	position: absolute;
	height: 26px;
	width: 13px;
	right: -12px;
	top: 50px;
}


em.orange{	margin-top: 45px;	}
em.green{	margin-top: 25px;	}
em.blue{	margin-top: 25px;	}
em.yellow{	margin-top: 95px;	}

em.orange:after{	background: url(../img/SB_L_G10_U02_L02_punta-anaranjada.png) no-repeat; }
em.green:after{		background: url(../img/SB_L_G10_U02_L02_punta-verde.png) no-repeat;	}
em.blue:after{		background: url(../img/SB_L_G10_U02_L02_punta-azul.png) no-repeat;	}
em.yellow:after{	background: url(../img/SB_L_G10_U02_L02_punta-amarilla.png) no-repeat;	}

em.green, em.yellow{
	font-size: 0.46em;
	line-height: 1.25em;
	padding: 38px 0;
}
p:nth-child(4) em{	top: 185px; 	}
p:nth-child(5) em{	top:  40px; 	}