
/* Numeración de listas -------------------------------------- */
/* http://red-team-design.com/css3-ordered-list-styles/ */
/* http://red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html */
/* view-source:http://red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html */

			ol{
				counter-reset: li;
				list-style: none;
				*list-style: decimal;
				font: 15px 'trebuchet MS', 'lucida sans';  /* define el texto de la linea numerada */		
				padding: 0;
				margin-bottom: 2px;
			/* 	text-shadow: 0 1px 0 rgba(255,255,255,.5); */
			}

			ol ol{
				margin: 0 0 0 2em;
			}



			/* -------------------------------------- */			

			.alpha-list p{
				position: relative;
				display: block;
				padding-left: 2em;
				margin: .5em 0;			/* ----------- separación entre una linea numerada y otra ------------ */
				background: #fff;		/* ----------- color gris fondo del texto ------------ */
				color: #000;  			/* ----------- color del texto ------------ */
				text-decoration: none;
			}

			.alpha-list p:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -0.9em;
			/*	top: 50%; */
			/*	margin-top: -1.3em; */
				margin-top: -0.5em;
				
				background: #c1ccff; 			/* ----------- color de fondo de los números ----------- */
				height: 2em;
				width: 2em;
				line-height: 2em;
				border: .3em solid #fff;
				text-align: center;
				font-weight: bold;
				-moz-border-radius: 2em;
				-webkit-border-radius: 2em;
				border-radius: 2em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
			}







			/* -------------------------------------- */			

			.rounded-list p{
				position: relative;
				display: block;
				padding: .4em .4em .4em 2em;
				*padding: .4em;
				margin: .5em 0;			/* ----------- separación entre una linea numerada y otra ------------ */
				background: #ddd;		/* ----------- color gris fondo del texto ------------ */
				color: #000;  			/* ----------- color del texto ------------ */
				text-decoration: none;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}

			.rounded-list p:hover{
				background: #eee;
			}

			.rounded-list p:hover:before{
			    -webkit-transform: scale(1.5);
			    -moz-transform: scale(1.5);
			    -ms-transform: scale(1.5);
			    -o-transform: scale(1.5);
			    transform: scale(1.5);	
			}

			.rounded-list p:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -1.3em;
				top: 50%;
				margin-top: -1.3em;
				background: #c1ccff; 			/* ----------- color de fondo de los números ----------- */
				height: 2em;
				width: 2em;
				line-height: 2em;
				border: .3em solid #fff;
				text-align: center;
				font-weight: bold;
				-moz-border-radius: 2em;
				-webkit-border-radius: 2em;
				border-radius: 2em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
			}

			/* -------------------------------------- */

			.rectangle-list p{
				position: relative;
				display: block;
				padding: .4em .4em .4em .8em;
				*padding: .4em;
				margin: .5em 0 .5em 2.5em;
				background: #ddd;		/* ----------- color gris fondo del texto ------------ */
				color: #000;  			/* ----------- color del texto ------------ */
				text-decoration: none;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}

			.rectangle-list p:hover{
				background: #eee;
			}	

			.rectangle-list p:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -2.5em;
				top: 50%;
				margin-top: -1em;
				background: #c1ccff;		/* ----------- color azul de los rectángulos numerados ------------ */
				border: 1px solid #728cff;
				height: 2em;
				width: 2em;
				line-height: 2em;
				text-align: center;
				font-weight: bold;
			}
			
			.rectangle-list p:after{
				position: absolute;	
				content: '';
				border: .5em solid transparent;
				left: -1em;
				top: 50%;
				margin-top: -.5em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;				
			}

			.rectangle-list p:hover:after{
				left: -.4em;
				border-left-color: #728cff;		/* ----------- color de la punta de los rectángulos numerados ------------ */	
			}

			/* -------------------------------------- */

			.circle-list li{
			    padding: 0.5em;
			  /*border-bottom: 1px dashed #ccc;*/
			}

			.circle-list h5{
			    position: relative;
			    margin: 0;
			}

			.circle-list p{
			    margin: 0;
			}
			
			/* estilo cuando el círculo está gris */
			.circle-list h5:before{
			    content: counter(li);
			    counter-increment: li;
			    position: absolute;
			    z-index: -1;
			    left: -1.3em;
			    top: -.8em;
			    background: #f5f5f5;
			    height: 1.5em;
			    width: 1.5em;
			    border: .1em solid rgba(0,0,0,.05);
			    text-align: center;
			    font: bold 1em/1.5em Georgia, Serif;
			    color: #ccc;
			    -moz-border-radius: 1.5em;
			    -webkit-border-radius: 1.5em;
			    border-radius: 1.5em;
			    -webkit-transition: all .2s ease-out;
			    -moz-transition: all .2s ease-out;
			    -ms-transition: all .2s ease-out;
			    -o-transition: all .2s ease-out;
			    transition: all .2s ease-out;    
			}

			.circle-list li:hover h5:before{
			    background-color: #CCFF99;
			    border-color: rgba(0,0,0,.08);
			    border-width: .2em;
			    color: #000;
			    -webkit-transform: scale(1.5);
			    -moz-transform: scale(1.5);
			    -ms-transform: scale(1.5);
			    -o-transform: scale(1.5);
			    transform: scale(1.5);
			}

/* Fin de la numeración de listas -------------------------------------- */