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

@import url("font.css");


*{margin:0; padding:0; border:0; text-decoration:none; box-sizing:border-box;}

strong{
	font-family:robotoregular, Arial, Helvetica, sans-serif;}

body{
	font-family:robotolight, Arial, Helvetica, sans-serif;
	color:#3C4B5A;}
	

/* ENCABEZADO */

header{
	width:100%;
	height:80px;
	background-color:rgba(255, 255, 255, 1);
	-webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.2);
	box-shadow: 0 3px 7px 0 rgba(0,0,0,0.2);
	position:fixed;
	z-index:10000;
	transition:ease all 0.5s;
	}
	
	.top{
		height:50px;
		background-color:rgba(255, 255, 255, 1);}
	
header .content{
	width:100%;
	max-width:1100px;
	height:80px;
	margin:0 auto;
	position:relative;
	}
	
	.top .content{
		height:50px;}
	
header .content img.logo{
	position:absolute;
	top:6px;
	left:0;
	transition:ease all 0.4s;
	width:205px;}
	
header .content img.logo_solo{
	position:absolute;
	top:-45px;
	left:0;
	transition:ease all 0.4s;
	width:135px;}
	
		.top .content img.logo{
			top:-65px;}
		
		.top .content img.logo_solo{
			top:4px;}
	
header .content nav{
	float:right;
	font-size:0.95em;}
	
	header .content nav ul{
		list-style:none;
		float:right;}
		
		header .content nav ul li{
			display:inline;
			float:left;}
			
			header .content nav ul li a{
				color:#3C4B5A;
				padding:30px 15px 26px 0;
				display:block;
				transition:ease all 0.5s;}
				
				.top .content nav ul li a{
					color:#3C4B5A;
					padding:14px 15px 13px 0;
					display:block;}
				
			header .content nav ul li:first-of-type a{
				padding-left:15px;}
				
			header .content nav ul li a:after{
				content:"|";
				color:#FF5933;
				margin-left:15px;}
				
			header .content nav ul li:last-of-type a:after{
				content:"";
				margin-left:0;}
				
/* SLIDER */

.cycle-slideshow{
	width:100%;
	position:relative;}
	
	.cycle-slideshow .banner{
		width:100%;
		height:540px;
		background-repeat:no-repeat;
		background-position:center top;
		color:#fff;}
		
	.cycle-slideshow .banner span{
		display:block;}
		
#banner_01{
	background-image:url(img/bg_slide_01.jpg);}
	
#banner_02{
	background-image:url(img/bg_slide_02.jpg);}
	
#banner_03{
	background-image:url(img/bg_slide_03.jpg);}

#banner_02 .info{	}
		
	.cycle-slideshow .center{
		position:absolute;
		width:100%;
		top:300px;
		z-index:1000;}
		
		.cycle-slideshow .center a{
			width:40px;
			height:40px;
			display:block;
			background-repeat:no-repeat;
			background-position:top left;
			font-size:0;
			opacity:0.70;
			transition:all ease 0.3s;}
			
		.cycle-slideshow .center a:hover{
			opacity:1;}
			
		.cycle-slideshow .center #prev{
			float:left;
			margin-left:30px;
			background-image:url(img/ico_flecha_prev.png);}
		
		.cycle-slideshow .center #next{
			float:right;
			margin-right:30px;
			background-image:url(img/ico_flecha_next.png);}
			
	.cycle-slideshow .banner .contenido{
			width:100%;
			max-width:1100px;
			margin:0 auto;
			position:relative;}
			
			.cycle-slideshow .banner .contenido .info{
				width:660px;
				height:380px;
				position:absolute;
				top:125px;
				right:20px;
				padding-left:80px;
				background-position:top left;
				background-repeat:no-repeat;
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
				
				.cycle-slideshow .banner .contenido .info .store{
					width:100%;
					position:absolute;
					bottom:0;
					left:80px;}
				
					.cycle-slideshow .banner .contenido .info .store img{
						float:left;
						margin-right:25px;}
				
				.cycle-slideshow .banner .contenido .info h1{
					font-size:2em;
					font-family:robotolight, Arial, Helvetica, sans-serif;
					font-weight:normal;
					line-height:1.1em;
					margin-bottom:25px;}
					
				.cycle-slideshow .banner .contenido .info strong{
					font-family:robotobold, Arial, Helvetica, sans-serif;
					font-weight:normal;
					color:#FF553C;}
					
				.cycle-slideshow .banner .contenido .info h2{
					font-size:1.6em;
					font-family:robotoregular, Arial, Helvetica, sans-serif;
					font-weight:normal;
					line-height:1.2em;
					margin-bottom:25px;}
					
				.cycle-slideshow .banner .contenido .info p{
					font-size:1.3em;
					font-weight:normal;
					font-family:robotoregular, Arial, Helvetica, sans-serif;}
					
				.cycle-slideshow .banner .contenido .info ul{
					float:left;
					margin-right:30px;}
					
					.cycle-slideshow .banner .contenido .info ul li{
						font-size:1.3em;
						font-weight:normal;
						font-family:robotolight, Arial, Helvetica, sans-serif;
						list-style:none;
						margin-bottom:8px;
						padding-left:30px;
						background-image:url(img/ico_bullet_banner.png);
						background-repeat:no-repeat;
						background-position:left 2px;}
	
/* PASOS */
						
.pasos{
	width:100%;
	background-color:#FFF;
	height:120px;
	padding-top:20px;
	float:left;}
	
	.pasos .contenido{
		width:100%;
		max-width:1100px;
		margin:0 auto;}
		
		.pasos .contenido h1{
			width:100%;
			max-width:1100px;
			margin:-8px auto 0 auto;
			font-weight:bold;
			color:#FF553C;
			font-family:robotobold, Arial, Helvetica, sans-serif;
			width:24%;
			float:left;
			line-height:1.2em;}
			
		.pasos .contenido ul{
			float:right;
			list-style:none;
			padding-left:50px;
			width:75%;}
			
			.pasos .contenido ul li{
				float:left;
				display:inline;
				padding-left:70px;
				background-repeat:no-repeat;
				background-position:left top;
				font-size:1.5em;
				width:33%;
				height:80px;}
				
/* MEDIO - APRENDIZAJE */
					
section{
	width:100%;
	height:500px;
	float:left;
	color:#FFF;}
	
	section.aprendizaje{
		background-color:#FF553C;}
		
		section.aprendizaje .content{
			background-image:url(img/pantallas_aprendizaje.png);
			background-position:center 60px;}
			
			section.aprendizaje .content .info article{
				float:right;}
			
	section.fixeduno .content{
		background-position:center 10px;
		opacity:1;}

			
/* MEDIO - EJERCICIOS */
		
	section.ejercicios{
		background-color:#EDEEEF;
		height:467px;}
		
	section.ejercicios h1{
		color:#FF553C;}
		
	section.ejercicios p{
		color:#333638;}
		
		section.ejercicios .content{
			background-image:url(img/pantallas_ejercicios.png);
			background-position:center 0;}
		
			section.ejercicios .content .info article{
				float:left;
				text-align:left;}
				
	section.fixeddos .content{
		background-position:center 0;
		opacity:1;}
	
	section.ejercicios .content .info article img:last-of-type{
		display:none;}


/* MEDIO - LOGROS */

	section.logros{
		background-color:#ffffff;
		background-position:right;
		background-repeat:no-repeat;
		height:450px;}
		
		section.logros h1{
			color:#FF553C;}
			
		section.logros p{
			color:#333638;}
		
		section.logros .content{
			background-image:url(img/pantallas_logros.png);
			background-position:center 0;}
		
			section.logros .content .info article{
				float:right;
				width:40%;}
				
	section.fixedtres .content{
			background-position:center 0;
			opacity:1;}
		
section .content{
	width:100%;
	height:500px;
	background-repeat:no-repeat;
	opacity:0.3;
	transition:all ease 0.7s;}
	
	section .content .info{
		width:100%;
		max-width:1100px;
		margin:0 auto;}
		
		section .content .info article{
			width:54%;
			padding-top:30px;}
			
		section .content .info article img{
			margin-bottom:65px;}
			
		section .content .info h1{
			font-size:1.8em;
			font-family:robotolight, Arial, Helvetica, sans-serif;
			line-height:1.1em;
			margin-bottom:20px;
			font-weight:normal;
			background-image:url(img/linea_separadora.png);
			background-position:bottom;
			background-repeat:repeat-x;
			padding-bottom:15px;}
			
		section .content .info p{
			font-size:1.2em;
			line-height:1.3em;
			margin-bottom:25px;}
			
		section .content .info ul{
			font-size:1.2em;
			padding-left:20px !important;
			float:left;
			color:#333638;
			font-family:robotoregular, Arial, Helvetica, sans-serif;}
			

/* TESTIMONIOS */

section.testimonios{
	height:175px;
	-webkit-box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1);
	box-shadow: 0 5px 8px 0 rgba(0,0,0,0.1);}
			
.cycle-slideshow .testimonio{
	width:100%;
	height:175px;
	background-color:#E4E7EA;
	color:#3C4B5A;}
		
	.cycle-slideshow .testimonio .contenido{
		width:100%;
		max-width:840px;
		height:175px;
		margin:0 auto;
		padding-top:20px;}
		
		.cycle-slideshow .testimonio .contenido .foto{
			width:16%;}
			
			.cycle-slideshow .testimonio .contenido .foto img{
			width:100%;
			height:auto;
			border-radius:50%;
			float:left;}	
			
		.cycle-slideshow .testimonio .contenido .test{
			width:80%;
			float:right;
			padding:20px 0 0 35px;
			background-image:url(img/comilla_abrir.png);
			background-position:left 17px;
			background-repeat:no-repeat;
			font-size:1.3em;
			line-height:1.5em;}
			
		.cycle-slideshow .testimonio .contenido .test:after{
			content:url(img/comilla_cerrar.png);}
		
		.cycle-slideshow .centertest #prevtest{
			float:left;
			margin-left:30px;
			background-image:url(img/ico_flecha_prevtest.png);}
		
		.cycle-slideshow .centertest #nexttest{
			float:right;
			margin-right:30px;
			background-image:url(img/ico_flecha_nexttest.png);}
			
	.cycle-slideshow .centertest{
		position:absolute;
		width:100%;
		top:65px;
		z-index:1000;
		padding:0 8%;}	
		
		.cycle-slideshow .centertest a{
			width:40px;
			height:40px;
			display:block;
			background-repeat:no-repeat;
			background-position:top left;
			font-size:0;
			opacity:0.70;
			transition:all ease 0.3s;}
			
		.cycle-slideshow .centertest a:hover{
			opacity:1;}
			

/* PIE */
		
footer{
	width:100%;
	height:160px;
	padding-top:25px;
	float:left;}
	
	footer a{
		color:#3C4B5A;
		text-decoration:underline;}
		
		footer a:hover{
		color:#000;}
	
	footer .content{
		width:100%;
		max-width:1100px;
		margin:0 auto;}
		
		footer .content .logo_pie{
			width:18%;
			float:left;
			margin:0 auto;}
			
		footer .content .copy{
			width:62%;
			float:left;}
			
			footer .content .copy span{
			display:block;}
			
			footer .content .copy p:first-of-type{
			width:40%;
			text-align:center;
			float:left;
			padding-right:15px;
			color:#FF553C;
			font-size:1.4em;
			font-family:ralewaybold, Arial, Helvetica, sans-serif;}
			
			footer .content .copy p:last-of-type{
			width:60%;
			float:right;}
			
		footer .content .redes{
			width:20%;
			float:right;
			padding-top:10px;}
			
			footer .content .redes img{
			margin:-2px 5px 0 5px;
			vertical-align:middle;}
			
		footer .content .legales{
			width:100%;
			float:left;
			text-align:center;
			padding-top:25px;
			margin-bottom:15px;}
			
			footer .content .legales img{
			vertical-align:middle;
			margin:-3px 5px 0 5px;}
			

@media only screen and (max-width: 1225px) {
    
	.cycle-slideshow .centertest{
		padding:0 1%;}	
	
}


@media only screen and (max-width: 1120px) {
    
header .content img.logo{
	left:20px;}

header .content img.logo_solo{
	left:20px;}
	
.pasos{
	padding:20px 20px 0 20px;}
	
	.pasos .contenido h1{
		width:29%;}
			
	.pasos .contenido ul{
		padding-left:30px;
		width:70%;}
		
section .content{
	padding:0 20px;}
	
footer .content{
	padding:0 20px;}
	
footer .content .logo_pie{
	width:15%;
	float:left;
	margin:0 auto;}
		
		footer .content .copy{
			width:62%;
			float:left;}
			
		footer .content .redes{
			width:23%;
			float:right;
			padding-top:10px;}
	
}

@media only screen and (max-width: 1010px) {
	
section .content article p{
	font-size:1.15em !important;}
	
section .content .info article{
	width:50%;}
	
section.aprendizaje .content{
	background-position:-130px 60px;}
	
section.fixeduno .content{
	background-position:-130px 10px;}


.cycle-slideshow .centertest #prevtest{
	float:left;
	margin-left:42%;
	background-image:url(img/ico_flecha_prevtest.png);}

.cycle-slideshow .centertest #nexttest{
	float:right;
	margin-right:42%;
	background-image:url(img/ico_flecha_nexttest.png);}
			
	.cycle-slideshow .centertest{
		top:175px;}
		
section.testimonios{
	height:230px;}
			
.cycle-slideshow .testimonio{
	width:100%;
	padding:0 15px;
	height:230px;}
	
.pasos{
	padding:20px 15px 0 15px;}
	
	.pasos .contenido h1{
		font-size:1.6em;
		width:25%;}
			
	.pasos .contenido ul{
		font-size:0.8em !important;
		padding-left:20px;
		width:75%;}

footer{
	height:250px;}	
		
footer .content .logo_pie{
			width:100%;
			padding-left:50%;
			margin-left:-80px;
			margin-bottom:15px;}
			
		footer .content .copy{
			width:100%;
			float:left;
			text-align:center;
			margin-bottom:15px;
			border-top:1px solid #CCC;
			border-bottom:1px solid #CCC;
			padding:17px 0 12px 0;}
			
			footer .content .copy p:first-of-type{
			width:40%;
			text-align:right;
			float:left;
			padding-right:15px;
			color:#FF553C;
			font-size:1.4em;
			font-family:ralewaybold, Arial, Helvetica, sans-serif;}
			
			footer .content .copy p:last-of-type{
			width:60%;
			float:right;
			text-align:left;}
			
		footer .content .redes{
			width:100%;
			text-align:center;}
			
			
	
}

@media only screen and (max-width: 980px) {

#banner_01{
	background-image:url(img/bg_slide_01_responsive.jpg);}
	
#banner_02{
	background-image:url(img/bg_slide_02_responsive.jpg);}
	
#banner_03{
	background-image:url(img/bg_slide_03_responsive.jpg);}
	
.cycle-slideshow .banner .contenido .info{
				width:100%;
				position:absolute;
				top:125px;
				padding:0 17% 0 20%;
				background-position:12% top;
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				height:380px;}
				
		.cycle-slideshow .banner .contenido .info .store{
					left:20%;}
		
		.cycle-slideshow .banner span{
			display:inline;}
					
.cycle-slideshow .center #prev{
			margin-left:15px;}
		
		.cycle-slideshow .center #next{
			margin-right:15px;}

@media only screen and (max-width: 900px) {

section .content .info article{
	width:55%;
	padding-top:15px;}
			
section .content article p span, section .content article h1 span{
	display:inline;}
	
section.ejercicios .content .info article{
	text-align:left;}
	
section.ejercicios .content .info article img:first-of-type{
	display:none;}
	
section.ejercicios .content .info article img:last-of-type{
	display:block;}
	
section{
	height:470px;}
	
section .content{
	height:470px;}
	
section .content h1{
	margin-top:25px;}



section.aprendizaje .content{
	background-image:url(img/pantallas_aprendizaje_responsive.png);
	background-size:60%;}
	
section.fixeduno .content{}
		
section.ejercicios .content{
	background-image:url(img/pantallas_ejercicios_responsive.png);
	background-position:280px 0;
	background-size:80%;}
	
section.fixeddos .content{}
		
section.logros .content{
	background-image:url(img/pantallas_logros_responsive.png);
	background-position:left bottom;
	background-size:75%;}
	
section.logros .content article{
	background-color:rgba(255, 255, 255, 0.6);
	padding:0 15px 15px 15px;}
	
section.fixedtres .content{
	background-position:left bottom;}
		
section.mas_funciones .content{
	background:none;}
		
section.medicos_cerca .content{
	background:none;}
	
section.mas_funciones{
	height:670px;}
			
	section.mas_funciones .content{
		height:670px;}
		
section.medicos_cerca{
	height:580px;}
		
		section.medicos_cerca .content{
			height:580px;}
			
.pasos .contenido ul li{
		background-size:50px;
		padding-left:60px;}


}

@media only screen and (max-width: 770px) {
	
.cycle-slideshow .banner{
		height:520px;}
		
.cycle-slideshow .center{
		top:270px;}

.cycle-slideshow .banner .contenido .info h1{
	font-size:1.7em;
	line-height:1em;
	margin-bottom:20px;}
	
.cycle-slideshow .banner .contenido .info h2{
	font-size:1.4em;
	line-height:1em;
	margin-bottom:20px;}
	
.cycle-slideshow .banner .contenido .info{
				top:100px;
				height:390px;}
				
	.cycle-slideshow .banner .contenido .info .store{
				left:20%;}
					
#banner_02 .info{	
	background:none;}

.pasos{
	padding:10px 10px 0 5px;
	height:140px;}
	
	.pasos .contenido h1{
		width:100%;
		float:left;
		text-align:center;
		margin-bottom:15px;}
			
	.pasos .contenido ul{
		width:100%;}
		
	.pasos .contenido ul li{
		padding-right:10px;}
		
header .content nav{
	display:none;}
	

header .content img.logo{
	left:50%;
	margin-left:-85px;}
	
header .content img.logo_solo{
	left:50%;
	margin-left:-48px;}
	
	
.cycle-slideshow .testimonio .contenido{
		height:220px;
		padding-top:20px;}
		
		.cycle-slideshow .testimonio .contenido .foto{
			width:100%;
			float:left;
			position:relative;
			height:100px;}
			
			.cycle-slideshow .testimonio .contenido .foto img{
				position:absolute;
				width:110px;
				height:auto;
				float:left;
				left:50%;
				margin-left:-55px;}
			
		.cycle-slideshow .testimonio .contenido .test{
			text-align:center;
			width:100%;
			padding:20px 15px 0 15px;
			background:none;
			font-size:1.3em;
			line-height:1.5em;}
			
		.cycle-slideshow .testimonio .contenido .test:before{
			content:url(img/comilla_abrir.png);}
			

section.testimonios{
	height:300px;}

.cycle-slideshow .testimonio{
	height:300px;
	float:left;}
		
	.cycle-slideshow .testimonio .contenido{
		height:300px;}
		


.cycle-slideshow .centertest #prevtest{
	margin-left:37%;}

.cycle-slideshow .centertest #nexttest{
	margin-right:37%;}
			
	.cycle-slideshow .centertest{
		top:245px;}
	
}

@media only screen and (max-width: 620px) {
	
.cycle-slideshow .banner{
		height:580px;}
	
.cycle-slideshow .banner .contenido .info{
				top:100px;
				height:460px;}
	
	
.pasos{
	height:270px;
	padding-top:15px;}
	
	.pasos .contenido ul{
		padding-left:18%;}
			
			.pasos .contenido ul li{
				padding:10px 40px 0 60px;
				font-size:1.5em; 
				width:100%;
				height:60px;}

	
section .content .info article{
	background-position:left 118px !important;}

section .content h1{
	font-size:1.45em !important;
	margin-bottom:10px !important;}
	
section .content img{
	height:75px !important;}
	
section.aprendizaje{
	height:550px !important;}

section.aprendizaje .content{
	height:550px;
	background-size:340px;
	background-position:center 400px;}
	
section.aprendizaje .content .info article{
	width:100%;
	background-size:380px;
	background-position:center 330px;}	
	
section.fixeduno .content{
	background-position:center 360px;}
		
section.ejercicios .content{
	background:none;
	height:auto;}
	
section.ejercicios .content .info article{
	width:100%;}
	
section.ejercicios{
	height:auto;
	padding-bottom:35px;}
		
section.logros .content{
	background:none;
	height:auto;}
	
section.logros{
	height:auto;
	padding-bottom:25px;}

section.logros .content .info article{
	width:100%;
	padding:0;}
		
section.mas_funciones .content{
	background:none;}
		
section.medicos_cerca .content{
	background:none;}
	
section.mas_funciones{
	height:670px;}
			
	section.mas_funciones .content{
		height:670px;}
		
section.medicos_cerca{
	height:580px;}
		
		section.medicos_cerca .content{
			height:580px;}
			
footer .content .copy span{
	display:inline;}		

footer .content .copy p:first-of-type{
			width:100%;
			margin-bottom:10px;
			text-align:center;}
			
			footer .content .copy p:last-of-type{
			text-align:center;
			width:100%;}

}

@media only screen and (max-width: 530px) {
	section .content .info article p{
		font-size:1em !important;
		margin-bottom:12px;}
		
	section .content .info article ul{
		font-size:1em !important;
		margin-bottom:12px;}
	
	}

@media only screen and (max-width: 500px) {
	
.cycle-slideshow .banner .contenido .info{
	width:100%;
	position:absolute;
	top:125px;
	padding:0 12% 0 22%;
	background-position:12% top;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	height:450px;}
	
.cycle-slideshow .center{
		top:300px;}
		
.cycle-slideshow .center #prev{
			margin-left:5px;}
		
		.cycle-slideshow .center #next{
			margin-right:5px;}

.cycle-slideshow .banner{
		height:610px;}
	
.cycle-slideshow .banner .contenido .info{
				top:100px;
				height:490px;}
				
.cycle-slideshow .banner .contenido .info .store{
		left:50%;
		margin-left:-150px;}
				
		.cycle-slideshow .banner .contenido .info .store img{
			margin-right:15px;}
			
.cycle-slideshow .banner .contenido .info h1{
					font-size:1.7em;
					margin-bottom:15px;}
					
.cycle-slideshow .banner .contenido .info ul{
					line-height:1.5em;}
				
}

@media only screen and (max-width: 479px) {
	
.pasos{
	height:310px;}
	
	.pasos .contenido h1{
		padding: 0 25px;}
	
	.pasos .contenido ul{
		padding-left:15%;}
		
		.pasos .contenido ul li{
			float:left;
			display:inline;
			padding:0 30px 0 60px;
			margin-bottom:10px;
			background-repeat:no-repeat;
			background-position:left top;
			font-size:1.5em;
			width:100%;
			height:60px;}
	
section.aprendizaje .content{
	background-size:350px;
	background-position:left 380px;}
	
section.fixeduno .content{
	background-position:left 350px;}
		
section.ejercicios .content{
	background-size:350px;
	background-position:right 380px;}
	
section.fixeddos .content{
	background-position:right 350px;}
		
section.logros .content{
	background-size:350px;
	background-position:left 375px;}
	
section.fixedtres .content{
	background-position:left 345px;}
		
section.mas_funciones .content{
	background:none;}
		
section.medicos_cerca .content{
	background:none;}
	
section.mas_funciones{
	height:910px;}
			
	section.mas_funciones .content{
		height:910px;}
		
section.medicos_cerca{
	height:820px;}
		
		section.medicos_cerca .content{
			height:820px;}
			
			
section.testimonios{
	height:400px;}

.cycle-slideshow .testimonio{
	height:400px;
	float:left;}
		
	.cycle-slideshow .testimonio .contenido{
		height:400px;}
		


.cycle-slideshow .centertest #prevtest{
	margin-left:32%;}

.cycle-slideshow .centertest #nexttest{
	margin-right:32%;}
			
	.cycle-slideshow .centertest{
		top:345px;}

}

@media only screen and (max-width: 370px) {

.cycle-slideshow .banner .contenido .info img.sello{
	width:250px;}
	
.cycle-slideshow .banner .contenido .info{
	font-size:14.5px;}
	
.cycle-slideshow .banner .contenido .info .store{
		left:50%;
		margin-left:-115px;
		bottom:-5px;}
				
		.cycle-slideshow .banner .contenido .info .store img{
			margin-right:10px;
			width:130px;}

}