@font-face {
	font-family: 'Conv_Texta Alt Black';
	src: url('../fonts/Texta Alt Black.eot');
	src: local('☺'), url('../fonts/Texta Alt Black.woff') format('woff'), url('../fonts/Texta Alt Black.ttf') format('truetype'), url('../fonts/Texta Alt Black.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Conv_Texta Medium';
	src: url('../fonts/Texta Medium.eot');
	src: local('☺'), url('../fonts/Texta Medium.woff') format('woff'), url('../fonts/Texta Medium.ttf') format('truetype'), url('../fonts/Texta Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}



#infografia{
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	width: 100%;
	max-width: 650px;
	height: auto;
	overflow: hidden;
}
#infografia .titulo{
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	width: 90%;
	height: auto;
	text-align: center;
}
#infografia .titulo .top_titulo{
	position: relative;
	display: block;
	margin: 25px auto 0px auto;
	width: 290px;
	height: 214px;
	background-image: url(../images/info-top.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	text-indent: -999px;
	overflow: hidden;
}
#infografia .titulo .titulo__main{
	position: relative;
	display: block;
	margin: 20px auto 0px auto;
	font-family: 'Conv_Texta Alt Black';
	color: #00a1de;
	text-align: center;
	font-size: 24px;
	line-height: 28px;
}
#infografia .titulo .titulo__sub{
	position: relative;
	display: block;
	margin: 10px auto 0px auto;
	font-family: 'Conv_Texta Medium';
	color: #00a1de;
	text-align: center;
	font-size: 18px;
	line-height: 22px;
}
@media screen and (min-width: 414px){
	#infografia .titulo .top_titulo{
		width: 340px;
		height: 251px;
	}
	#infografia .titulo .titulo__main{
		font-size: 28px;
		line-height: 32px;
	}
}
@media screen and (min-width: 576px){
	#infografia .titulo .top_titulo{
		width: 475px;
		height: 350px;
	}
	#infografia .titulo .titulo__main{
		font-size: 36px;
		line-height: 40px;
	}
	#infografia .titulo .titulo__sub{
		width: 375px;
		font-size: 26px;
		line-height: 28px;
	}
}


#infografia .pasos{
	position: relative;
	display: block;
	margin: 20px auto 0px auto;
	width: 100%;
	height: auto;
	overflow: hidden;
	text-align: center;
}
#infografia .pasos__paso .paso__animacion{
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	width: 130px;
	height: 130px;
	background-color: #fff;
	border: 5px solid #00a1e0;
	border-radius: 130px;
	-webkit-border-radius: 130px;
	-moz-border-radius: 130px;
}
#infografia .paso__animacion:before{
	position: absolute;
	display: block;
	content: attr(data-paso);
	top: -20px;
	right: 0px;
	font-family: 'Conv_Texta Alt Black';
	width: 44px;
	height: 44px;
	color: #fff;
	font-size: 26px;
	text-align: center;
	line-height: 44px;
	background-color: #ed2939;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}

/* Animación 1 */

@keyframes mano{
	0%{
		transform: scale(1)
	}
	100%{
		transform: scale(.9)
	}
}
#infografia .paso__animacion .hoja{
	position: absolute;
	display: block;
	top: 25px;
	left: 35px;
	z-index: 1;
}
#infografia .paso__animacion .mano{
	position: absolute;
	display: block;
	top: 70px;
	right: 30px;
	z-index: 2;
	animation: mano 1s ease-out 0s alternate infinite;
}

/* Animación 2 */

@keyframes brazo{
	0%{
		transform: rotate(0deg) translate(0px, 0px);
	}
	100%{
		transform: rotate(-2deg) translate(-3px, 0px);
	}
}
#infografia .paso__animacion .operaria{
	position: absolute;
	display: block;
	top: 20px;
	left: 25px;
	z-index: 2;
}
#infografia .paso__animacion .brazo{
	position: absolute;
	display: block;
	top: 30px;
	left: 24px;
	z-index: 1;
	transform-origin: 100% 100%;
	animation: brazo 1s ease-out 0s alternate infinite;
}

/* Animación 3 */

@keyframes documentos{
	0%{
		top: 64px;
	}
	100%{
		top: 34px;
	}
}
#infografia .paso__animacion .carpeta1{
	position: absolute;
	display: block;
	top: 60px;
	left: 35px;
	z-index: 3;
}
#infografia .paso__animacion .cover_shape{
	position: absolute;
    display: block;
   width: 66px;
    height: 20px;
    background-color: #fff;
    bottom: 10px;
    left: 28px;
    z-index: 3;
}
#infografia .paso__animacion .documentos{
	position: absolute;
	display: block;
	top: 64px;
    left: 40px;   
	z-index: 2;
	animation: documentos 2s ease-out 0s alternate infinite;
}
#infografia .paso__animacion .carpeta2{
	position: absolute;
	display: block;
	top: 59px;
    left: 35px;
	z-index: 1;
}


/* Animación 4 */

@keyframes manecillas{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
#infografia .paso__animacion .calendario{
	position: absolute;
	display: block;
	top: 35px;
	left: 35px;
	z-index: 3;
}
#infografia .paso__animacion .manecilla1{
	position: absolute;
	display: block;
	top: 72px;
    left: 82px;
    z-index: 2;
    width: 2px;
    height: 12px;
	background-color: #00a1e0;
	transform-origin: 50% 100%;
	animation: manecillas 10s ease-out 0s infinite;
}
#infografia .paso__animacion .manecilla2{
	position: absolute;
	display: block;
	top: 72px;
    left: 82px;
    z-index: 2;
    width: 2px;
    height: 12px;
	background-color: #00a1e0;
	transform-origin: 50% 100%;
	animation: manecillas 50s ease-out 0s infinite;
}

#infografia .btn_cambiate{
	position: relative;
	display: block;
	margin: 30px auto 0px auto;
	width: 279px;
	height: 58px;
	background-image: url(../images/btn-cambiate.png);
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
	text-indent: -999px;
	overflow: hidden;
	outline: none;
	border: 0px;
	cursor: pointer;
}

#infografia .pasos .pasos__paso{
	position: relative;
	display: block;
	margin: 0px auto 50px auto;
	width: 90%;
	max-width: 310px;
	height: auto;
}
#infografia .pasos .pasos__paso:first-of-type{
	margin-top: 20px;
}
#infografia .pasos .pasos__paso .paso__texto{
	position: relative;
	display: block;
	margin: 10px auto 0px auto;
	font-family: 'Conv_Texta Medium';
	color: #6e6e6e;
	font-size: 20px;
	line-height: 24px;
}

#infografia .informacion{
	position: relative;
	display: block;
	margin: 40px auto 40px auto;
	width: 90%;
	max-width: 600px;
	height: auto;
	border: 3px solid #00a1de;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-align: center;
}
#infografia .informacion .contenido_informacion{
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	width: 90%;
	height: auto;
	overflow: hidden;
	text-align: center;
}
#infografia .informacion h2{
	position: relative;
	display: inline-block;
	zoom: 1;
	*display: inline;
	top: -18px;
	margin: 0px auto 0px auto;
	padding: 0px 10px;
	background-color: #fff;
	color: #00a1de;
	font-family: 'Conv_Texta Alt Black';
	font-size: 19px;
}
strong{
	font-family: 'Conv_Texta Alt Black';
}
#infografia .informacion h3{
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	color: #00a1de;
	font-family: 'Conv_Texta Alt Black';
	font-size: 22px;
}
#infografia .informacion p{
	position: relative;
	display: block;
	margin: 15px auto 15px auto;
	font-family: 'Conv_Texta Medium';
	color: #6e6e6e;
	font-size: 20px;
	line-height: 24px;
}
#infografia .informacion img{
	position: relative;
	display: block;
	margin: 20px auto 45px auto;
	max-width: 100%;
	height: auto;
}
#infografia .pasos .bg_pasos{
	display: none;
}
@media screen and (min-width: 414px){
	#infografia .informacion h2{
		font-size: 26px;
	}
}
@media screen and (min-width: 576px){
	#infografia .pasos .pasos__paso .paso__texto{
		font-size: 24px;
		line-height: 28px;
	}
}
@media screen and (min-width: 768px){
	#infografia .pasos{
		display: block;
		height: 825px;
	}
	#infografia .pasos .bg_pasos{
		position: absolute;
		display: block;
		content: ' ';
		margin: 0px;
		width: 100%;
		background-image: url(../images/bg-pasos.png);
		background-repeat: no-repeat;
		background-position: top center;
		height: 825px;
		z-index: 1;
	}
	#infografia .pasos .bg_pasos span{
		position: absolute;
		display: block;
		background-color: #fff;
	}

	@keyframes trazoUno{
		0%{
			width: 270px;
		}
		100%{
			width: 0px;
		}
	}
	@keyframes trazoDos{
		0%{
			height: 320px;
		}
		100%{
			height: 0px;
		}
	}
	@keyframes trazoTres{
		0%{
			width: 620px;
		}
		100%{
			width: 0px;
		}
	}
	@keyframes trazoCuatro{
		0%{
			height: 350px;
		}
		100%{
			height: 0px;
		}
	}
	@keyframes trazoCinco{
		0%{
			width: 350px;
		}
		100%{
			width: 0px;
		}
	}
	@keyframes animaScale{
		0%{
			transform: scale(0);
		}
		100%{
			transform: scale(1);
		}
	}

	#infografia .pasos .bg_pasos span:nth-of-type(1){
		width: 270px;
		height: 70px;
		top: 50px;
		right: 0px;
		animation: trazoUno 1s ease-out 1s forwards;
	}
	#infografia .pasos .bg_pasos span:nth-of-type(2){
		width: 70px;
	    height: 320px;
	    bottom: 410px;
	    left: 590px;
	    animation: trazoDos 1s ease-out 1.61s forwards;
	}
	#infografia .pasos .bg_pasos span:nth-of-type(3){
		width: 620px;
	    height: 70px;
	    top: 300px;
	    left: 0px;
	    animation: trazoTres 1.6s ease-out 2.12s forwards;
	}
	#infografia .pasos .bg_pasos span:nth-of-type(4){
		width: 70px;
	    height: 350px;
	    bottom: 140px;
	    left: 0px;
	    animation: trazoCuatro 1s ease-out 3.31s forwards;
	}
	#infografia .pasos .bg_pasos span:nth-of-type(5){
		width: 350px;
	    height: 70px;
	    top: 600px;
	    right: 270px;
	    animation: trazoCinco 1s ease-out 3.9s forwards;
	}
	#infografia .pasos .pasos__paso{
		position: absolute;
		z-index: 3;
	}
	#infografia .pasos .pasos__paso:nth-of-type(1) .paso__animacion{
		transform: scale(0);
		animation: animaScale .4s ease-in 0s forwards;
	}
	#infografia .pasos .pasos__paso:nth-of-type(2) .paso__animacion{
		transform: scale(0);
		animation: animaScale .4s ease-in 1.7s forwards;
	}
	#infografia .pasos .pasos__paso:nth-of-type(3) .paso__animacion{
		transform: scale(0);
		animation: animaScale .4s ease-in 2.5s forwards;
	}
	#infografia .pasos .pasos__paso:nth-of-type(4) .paso__animacion{
		transform: scale(0);
		animation: animaScale .4s ease-in 4.1s forwards;
	}
	
	#infografia .pasos .pasos__paso .paso__animacion:after{
		position: absolute;
		display: block;
		content: ' ';
		top: 48%;
		width: 12px;
		height: 12px;
		background-color: #00a1e0;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		transform: translateY(-50%);
	}
	#infografia .pasos .pasos__paso:nth-of-type(1){
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
	}
	#infografia .pasos .pasos__paso:nth-of-type(1) .paso__animacion:after{
		right: -8px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(2) .paso__animacion:after{
		top: 55%;
		left: -8px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(3) .paso__animacion:after{
		top: 51%;
		left: -8px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(4) .paso__animacion:after{
		top: 51%;
		left: -8px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(2){
		top: 270px;
		right: 5px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(3){
		top: 275px;
		left: 10px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(4){
		bottom: -50px;
		left: 168px;
	}
	#infografia .pasos .pasos__paso .paso__texto{
		text-align: left;
	}
	#infografia .pasos .pasos__paso:nth-of-type(1) .paso__texto{
		text-align: center;
	}
	#infografia .pasos .pasos__paso:nth-of-type(2) .paso__texto{
		width: 225px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(3) .paso__texto{
		margin-left: 60px;
		width: 245px;
	}
	#infografia .pasos .pasos__paso:nth-of-type(4) .paso__texto{
		text-align: center;
		width: 295px;
	}

	#infografia .informacion{
		margin-top: 50px;
	}
	#infografia .informacion h2{
		top: -26px;
		font-size: 30px;
	}
	#infografia .informacion h3{
		font-size: 27px;
	}
	#infografia .informacion p{
		font-size: 24px;
		line-height: 28px;
	}
}