@font-face{ font-family: "TitlWeb-regular"; src: url('fonts/TitlWeb-regular.ttf') format('truetype'), url('fonts/TitlWeb-regular.woff') format('woff');}
@font-face{ font-family: "BebNeu-regular"; src: url('fonts/BebNeu-regular.otf') format('opentype');}
@font-face{ font-family: "ArNarr-regular"; src: url('fonts/ArNarr-regular.ttf') format('truetype');}

/* MENSAJE OLD BROWSER IE 9 >.................................................................................................................... */
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/*LOADER*/
#Loader { transition: all 0.3s ease-out; }
#Loader.off { opacity:0; visibility:hidden; }

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}
html { font-size:18px  /*1rem = 18px*/ }

body {
    margin:0 auto;
    text-align:center;
	font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif;
	background-color: #0f2d48;
  }

.SafeZone { width:100%; height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/
header.General { position:fixed; z-index:9000; top:0; left:0; width:100%; text-align:left; border-bottom: 2px solid #2D5234;
				background: linear-gradient(to right, #0F2D47 50%, #2D5234 50%);
				-webkit-transform: translateZ(0);
				transform: translateZ(0);}

	#Parche { position:absolute; z-index: 100; width: calc((100% - 1600px)/2); height: 101px; background-color: #fff;}
    #Logo { position: absolute; z-index: 100; top: 0; left: 0; padding-right: 23px;  background: url(imagenes/divisor-logo.png) no-repeat right top;}
        #Logo a { display: block;}
        #Logo img { max-width: 100%; display: block;}

    #Menus { width: calc(100% - 200px); margin-left: 200px; background-color: #0F2D47;}
		#Menus ul { list-style:none;}
			#Menus li { display: inline-block; vertical-align: middle;}
			#Menus a { display: block; padding-top: 30px; padding-bottom: 30px; font-size: 0.9rem;  color:#fff;
					  -webkit-transition: color 0.3s ease-in-out;
						transition: color 0.3s ease-in-out;}

		#MenuGeneral { float:left; padding-left: 20px; background-color: #0F2D47;}
			#MenuGeneral > li#BtnHome { display:none !important;}
			#MenuGeneral > li#BtnCursos {position: relative;}
				#MenuGeneral > li > a { padding-left: 12px; padding-right: 12px;}
				#MenuGeneral > li#BtnCursos > a { cursor: pointer;}

				ul#SubmenuCursos { position:absolute; z-index: 100; top: 78px; width: 250px; background-color: #f3543f;
								   -webkit-transform: scaleY(0);
								   -webkit-transform-origin: 50% 0;
								   -webkit-transition: -webkit-transform 0.3s ease-in-out;
								   transform: scaleY(0);
								   transform-origin: 50% 0;
								   transition: transform 0.3s ease-in-out;}

				ul#SubmenuCursos li { display: block;}
				ul#SubmenuCursos a { padding: 15px !important;}

		/*menucursos*/
		.menucursos li#BtnCursos > a { background: url(imagenes/punta-roja.jpg) no-repeat center bottom;}
		.menucursos ul#SubmenuCursos { -webkit-transform: scaleY(1);
										transform: scaleY(1);}
		/*..........*/

		#MenuPlanes { float:right; text-align: right; background-color: #2D5234;}
			#MenuPlanes li {}
			#MenuPlanes li#BtnMisPlanes { padding: 0 15px;
										-webkit-transition: background-color 0.3s ease-in-out;
										transition: background-color 0.3s ease-in-out;}

			#MenuPlanes li#BtnRegistro { padding-left: 16px; padding-right: 0; }
			#MenuPlanes li#BtnLogin { padding: 0 10px;}

				#MenuPlanes a {}
				#MenuPlanes li#BtnMisPlanes a { padding-left:25px; background: url(imagenes/icono-misplanes.png) no-repeat 0 50%;}
				#MenuPlanes li#BtnRegistro a {padding-left:30px; background:url(imagenes/icono-registro.png) no-repeat 5px 50%; }
				#MenuPlanes li#BtnRegistro a::after {content:"I"; color: #fff; font-size: 15px; padding-left: 15px;}

				#MenuPlanes li#BtnLogin { position:relative;}
					a#BtnLog { padding-left:30px; background:url(imagenes/punta-blanca.png) no-repeat center 500px, url(imagenes/icono-login.png) no-repeat 5px 50%; cursor:pointer; }

					#LoginPanel {position: absolute; z-index:9997; overflow:hidden; top:76px; max-height:0px;  width:260px; right:0; background-color:#F2F2F2;
								-webkit-transition: max-height 0.5s ease-in-out;
								transition: max-height 0.5s ease-in-out;}

						#LoginPanel a { width:50%; display:inline-block; vertical-align:top; margin:15px 0; padding:55px 20px 5px 20px; text-align:center; font-size:0.9rem; color:#2D5234;}
						a#LogEmpresas { background:url(imagenes/icono-empresario.png) no-repeat 50% 10px; border-right:1px solid #ccc;}
						a#LogEmpleados { background:url(imagenes/icono-empleado.png) no-repeat 50% 10px;}


						a#BtnPerfil { display:inline-block; vertical-align:middle; padding-left:30px; padding-right:25px; background:url(imagenes/icono-registro.png) no-repeat 5px 50%;}
						a#BtnCerrarSesion { display:inline-block; vertical-align:middle; font-size:20px; color:#fff; padding:0;}

			/*Desktop*/
			.Desktop #MenuGeneral > li:not(.select):hover > a { color: #B8B8B8;}
			.Desktop ul#SubmenuCursos a:hover { background-color: #B8B8B8;}

			/*.Desktop #MenuPlanes li#BtnMisPlanes:hover { color: #B8B8B8;}*/
			.Desktop #MenuPlanes li#BtnRegistro a:hover,
			.Desktop #MenuPlanes li#BtnLogin a:hover { color: #B8B8B8;}
			.Desktop #MenuPlanes li#BtnMisPlanes a:hover { color: #B8B8B8;}

			/*select*/
			#MenuGeneral > li.select > a { color:#ff7c6b; cursor:default; background: url(imagenes/punta-roja.jpg) no-repeat center bottom;}
			/*......*/

		/*loginmode*/
		.loginmode a#BtnLog { background-position:center bottom, 5px 50%;}
		.loginmode #LoginPanel { max-height:1000px;}

		/*in // out*/
		#MenuPlanes.in {}
			#MenuPlanes.in li#BtnMisPlanes,
			#MenuPlanes.in #LogOut { display:none;}

		#MenuPlanes.out {}
			#MenuPlanes.out li#BtnRegistro,
			#MenuPlanes.out #LogIn { display:none;}

	#Menus::after { content:""; clear:both; display:block;}

    /*Mobile*/
    a#BtnMobile { display:none;}
    /*......*/

    header .Viewport::after { content:""; display: block; clear:both;}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
#PlantillaContent { text-align:left; padding:50px 0 60px 0; min-height:600px;    background: #f2f2f2;}
		h1.General { font-size:2.3rem; display:block;}
		h2.General { font-size:1.6rem; display:block; margin:10px 0;}
		p.General { font-size:0.9rem; line-height:1.7em !important;}

main {width:100%; margin-top: 75px; background-color:#FFF;}

	/*autofade*/
	.autofade { opacity:0;
				-webkit-transform: translateY(-50px);
				-webkit-transition: transform 0.3s ease, opacity 0.5s ease-in;
				transform: translateY(-50px);
				transition: transform 0.3s ease, opacity 0.5s ease-in;}

	.autofade.in { opacity:1;
				   transform: translateY(0);}
	/*.......*/

	#SlideGeneral { position: relative; overflow: hidden; background-color:#000;}
		#ContentSlideGeneral { position:relative;}
			#ContentSlideGeneral .Modulo { position:absolute; top:0; left:0; width:100%;
											-webkit-clip-path: polygon(120% 0%, 140% 0, 120% 100%, 100% 100%);
											clip-path: polygon(120% 0%, 140% 0, 120% 100%, 100% 100%);
											-webkit-transform-origin: bottom center;
											transform-origin: bottom center;
											-webkit-transition: -webkit-clip-path 0.8s ease-in;
											transition: clip-path 0.8s ease-in;}

			#ContentSlideGeneral .Modulo:last-child { position:relative;}

				#ContentSlideGeneral figure { width:100%;}
					#ContentSlideGeneral picture { width:100%;}
						#ContentSlideGeneral img { max-width: 100%; display: block; opacity:1;
												 -webkit-transform-origin: center center;
												 transform-origin: center center;
												 -webkit-transform: translateX(200px);
												 transform: translateX(200px);
												 -webkit-transition: -webkit-transform 1s ease, opacity 0.3s ease 0.3s;
												 transition: transform 1s ease, opacity 0.3s ease 0.3s;}

						#ContentSlideGeneral figcaption { position: absolute; z-index:100; top: 50%; right: calc(100% - 1600px);
														  -webkit-transform: translateY(-50%);
														  transform: translateY(-50%);}

							#ContentSlideGeneral figcaption p,
							#ContentSlideGeneral figcaption a { opacity:0;
																/*-webkit-backface-visibility: hidden;
																backface-visibility: hidden;*/
																-webkit-transform: translateX(500px);
																transform: translateX(500px);
																-webkit-transition: -webkit-transform 0.7s ease, opacity 0.9s ease;
																transition: transform 0.7s ease, opacity 0.9s ease;}

							p.TituloSlide {  font-family: "BebNeu-regular", Arial, Helvetica, sans-serif;  font-size: 5.3rem; display: block; color:#fff;}
							p.PieSlide { font-size: 2.1rem; font-weight: normal; color:#fff;}
							a.BtnSlide { display: inline-block; margin-top: 40px;  font-size: 1.2rem; font-weight:bold; padding: 10px 20px; color: #fff; background-color: #2D5234; border-radius: 5px 5px 5px 5px;}

							#ContentSlideGeneral figcaption p.TituloSlide {-webkit-transition-delay: 0.2s;
																			transition-delay: 0.2s;}

							#ContentSlideGeneral figcaption p.PieSlide {-webkit-transition-delay: 0.3s;
																		transition-delay: 0.3s;}

							#ContentSlideGeneral figcaption a.BtnSlide {-webkit-transition-delay: 0.4s;
																		transition-delay: 0.4s;}



		#BulletsSlideGeneral { position:absolute; z-index:200; width:100%; left:0; bottom:40px; text-align:center;}
			#BulletsSlideGeneral ul { list-style:none; margin:0 auto;}
			#BulletsSlideGeneral li { display:inline-block; vertical-align:middle; width:20px; height:20px; margin:0 7px;  background-color: #ccc; border-radius:50%;  cursor:pointer;
									-webkit-transition:  background-color 0.3s ease-in-out;
									transition:  background-color 0.3s ease-in-out;}

		/*Desktop*/
		.Desktop a.BtnSlide:hover { opacity:0.5;}
		.Desktop #BulletsSlideGeneral li:not(.select):hover { background-color:#999;}


		/*select stanby*/
		#ContentSlideGeneral .Modulo.select.stanby { z-index:100; opacity:1;}
		#ContentSlideGeneral .Modulo.select.stanby figcaption p,
		#ContentSlideGeneral .Modulo.select.stanby figcaption a { opacity:1;
															-webkit-transform: translateX(0);
													  		transform: translateX(0);}

		#ContentSlideGeneral .Modulo.select.stanby img { opacity:1;
														-webkit-transform: translateX(0) scale(1);
											 			transform: translateX(0) scale(1);}


		#BulletsSlideGeneral li.select { background-color:#2773B8; cursor:default;}


		/*stanby*/
		#ContentSlideGeneral .Modulo.stanby { z-index:50;
											   -webkit-clip-path: polygon(-20% 0%, 100% 0, 100% 100%, -40% 100%);
											   clip-path: polygon(-20% 0%, 100% 0, 100% 100%, -40% 100%);}

		#ContentSlideGeneral .Modulo.stanby img {opacity:0.3;
												-webkit-transform: translateX(0) scale(1.2);
											 	transform: translateX(0) scale(1.2);}
		/*......*/



	#SlideMobile { display:none;}

	#WidgetNuevoCursos { background: linear-gradient(to right, #194266 25%, #2773B8 25%); text-align: left;}
		#WidgetNuevoCursos .Viewport { display: table;}
			#WidgetNuevoCursos header { display: table-cell; vertical-align: baseline; width: 230px; padding: 12px 50px 14px 0; background: url(imagenes/divisor-cursos.jpg) no-repeat top right;}
				#WidgetNuevoCursos header p { font-size: 1.1rem; font-weight: normal; color:#fff;}

			#WidgetNuevoCursos footer { position: relative; display: table-cell; vertical-align: baseline; padding-left: 15px; background-color: #2773B8;}
				#WidgetNuevoCursos footer div { position: absolute; overflow: hidden; white-space: nowrap; width: 100%; top: 14px; opacity:0; visibility: hidden;}
				#WidgetNuevoCursos footer a { display: inline-block; font-size: 1rem; color:#fff;
										    -webkit-transition: color 0.3s ease-in-out;
											transition: color 0.3s ease-in-out;}

				/*Desktop*/
				.Desktop #WidgetNuevoCursos footer a:hover { color: #052038;
															-webkit-transition: color 0.3s ease-in-out;
															transition: color 0.3s ease-in-out;}
				/*select*/
				#WidgetNuevoCursos footer div.select {opacity:1; visibility: visible;}
				/*......*/

	#Intro { text-align: center; padding: 50px 0; background-color: #f2f2f2;}
		#Intro h1 { display: block; margin-bottom: 8px; font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; font-size: 3.6rem; font-weight: normal;}
		#Intro h2 { display: block; width:100%; max-width:920px; margin:0 auto 15px auto; font-size: 1.5rem; line-height: 1.3em !important; color: #666666; text-align:center;}
		p#IntroDetalle { display: block; width:100%; max-width:780px; font-size: 1rem; line-height: 1.6em !important; color:#333333; text-align:center; margin:0 auto;}

	#DatosEstadisticos { padding: 40px 0 70px 0; background-color: #fff;}
		#Estadisticas {list-style: none;}
			#Estadisticas li {display: inline-block; vertical-align: top; width:16.66%; padding:0 20px; text-align: center;}
				#Estadisticas figure {}
				#Estadisticas img { max-width: 100%; display: block; margin: 0 auto;}
				p.LeyendaEstadistica { font-size: 1rem; line-height: 1.5em !important; font-weight: normal;}
				p.LeyendaEstadistica br {display:none;}

	#PasoaPaso { display: table; width: 100%; text-align: left;}
		/*left*/
		#PasosPlanes { display: table-cell; vertical-align: top; width: 55%; padding-bottom: 25px; text-align: right; background: #F2F2F2 url(imagenes/fondo-blanco.gif) repeat-x 0 0; background-size:100% 150px;}

			/*telefono*/
			#FotoPasos { width: 20%; display: inline-block; vertical-align: top; padding-right: 25px;}
				#FotoPasos img { max-width:100%; display: block;}

			/*listado*/
			#ContentPasos { width: 60%; max-width: 700px; display: inline-block; vertical-align: top; text-align: left;}
				#ContentPasos h2 { font-size: 1.8rem; color: #194166; display: block; margin:20px 0 30px 0;}
				#ContentPasos h2 span { color:#F2523E;}

				#ListaPasos { list-style: none; display: inline-block; vertical-align: bottom;}
				#ListaPasos li { padding:20px 0;}
					h3.Paso { font-size: 1.2rem;  color: #F2523E;}
					h3.Paso span { font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; color: #194266; border-right: 2px solid #999999; padding-right: 10px; margin-right: 10px;}

					p.DescPaso { font-size: 0.8rem; display: inline-block; vertical-align: baseline; padding:3px 10px 0 32px;}
					a.AccionPaso { font-size: 0.8rem; display: inline-block; vertical-align: baseline; padding-left: 10px; color:#F36754; font-weight: bold; border-left: 2px solid #999999;
								  -webkit-transition: color 0.3s ease-in-out;
								  transition: color 0.3s ease-in-out;}


					/*Desktop*/
					.Desktop a.AccionPaso:hover { color:#194166;}
					/*......*/

		/*rigth*/
		#QuickContact { display: table-cell; vertical-align: top; width: 45%; padding-top: 150px;  background:#000 url(imagenes/fondo-blanco.gif) repeat-x 0 0; background-size:100% 150px;}
			#CargadorVideo { position:relative; overflow:hidden; width: 100%; height: 500px;}
				#CargadorVideo iframe { position:  absolute; top: 50%; left: 0; width: 100%; height: 100%;
										-webkit-transform: translateY(-50%);
										transform: translateY(-50%);}
			/*
			#QuickContact header { background: #DD3135 url(imagenes/icono-sobre-home.jpg) no-repeat left center;}
				#QuickContact h2 { font-size: 1.3rem; color: #fff; padding: 15px 15px 15px 80px; }

			#QuickContact footer { background: url(imagenes/punta-azul.png) no-repeat 23px 0; padding: 25px 40px;  width: 100%;  max-width: 500px;}*/
				#FormContacto {}
					#FormContacto input::placeholder,
					/*#FormContacto textarea::placeholder {color: #fff;}*/

					#FormContacto input[type="text"],
					#FormContacto input[type="password"],
					#FormContacto input[type="email"],
					#FormContacto textarea { width:100%; font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif; font-size: 1rem; color:#111; border-bottom:1px solid #111; border-left: 3px solid #111; padding:5px 10px; background: none; margin-bottom:20px;}

					#FormContacto fieldset#Captcha {}
						#FormContacto fieldset#Captcha input[type="text"] { display: inline-block; vertical-align: top; width:calc(100% - 95px);}
						#FormContacto fieldset#Captcha div { display: inline-block; vertical-align: top; width:95px;}

					#FormContacto textarea { height:100px; overflow:auto; margin-bottom:20px;}

					#FormContacto input[type="submit"] { background:none; border: 2px solid #fff; padding: 5px 10px; cursor:pointer; text-align:left;  font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif; font-size: 1.2rem; color:#fff;
														-webkit-transition: color 0.3s ease-in-out, border-color 0.1s ease-in-out;
														transition: color 0.3s ease-in-out, border-color 0.1s ease-in-out;}

					/*Desktop*/
					.Desktop #FormContacto input[type="password"]:hover:not(:focus),
					.Desktop #FormContacto input[type="text"]:hover:not(:focus),
					.Desktop #FormContacto input[type="email"]:hover:not(:focus),
					.Desktop #FormContacto textarea:hover:not(:focus) { border-color:#111;}

					.Desktop #FormContacto input[type="submit"]:hover { color:#194166; border-color: #194166;}

					/*focus*/
					#FormContacto input[type="text"]:focus,
					#FormContacto input[type="password"]:focus,
					#FormContacto input[type="email"]:focus,
					#FormContacto textarea:focus { border-color:#194266;}
					/*...*/

	#CursosPopulares { position: relative; overflow: hidden; padding: 80px 0 50px 0; background:url(imagenes/fondo-cursos-populares.jpg) no-repeat center top; background-size: cover; text-align: center;}
		#CursosPopulares > header { margin-bottom: 50px;}
			#CursosPopulares h2 { display: block; margin-bottom: 10px; font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; font-size: 3rem; color:#fff; font-weight: normal;}
			p#IntroCursosPopulares { font-size: 1.2rem; color: #fff; max-width:800px; margin:0 auto 30px auto;}

		#NavCursos { display: flex; flex-wrap: wrap; justify-content: space-around;}
			#NavCursos article { position: relative; width: calc(25% - 26px); margin:0 13px; box-shadow: 0 0 1px #676767; background-color: #fff;
								-webkit-transition: -webkit-transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
								transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;}

				#NavCursos header { position:relative; text-align: left;}
					.PreviewVideo { position:absolute; z-index:50; width:100%; height:100%; cursor:pointer;}
					.PreviewVideo video { max-width:100%; display:none;}
					.PreviewVideo span { position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; display:block; width:50px; height:50px; background:url(imagenes/btn-play.jpg) no-repeat 0 0; border-radius:50%;
										 -webkit-transform: scale(0);
										 transform: scale(0);
										 -webkit-transition: -webkit-transform 0.3s ease-in-out;
										 transition: transform 0.3s ease-in-out;}

					#NavCursos figure { width: 100%;}
					#NavCursos img { max-width: 100%; display: block;}

					.Likes { display: inline-block; width: auto; padding: 5px 15px 5px 40px; font-size: 1.2rem; color: #fff; background: url(imagenes/icono-check.jpg) no-repeat 0 0, url(imagenes/canto-check.jpg) no-repeat right top; background-color:  #2D5234;}
					.Likes p { font-size: 0.9rem;}
					.Likes span { font-size:0.7rem;}

				#NavCursos footer { position:relative; text-align: left; padding: 30px 30px 55px 30px; background-color: #fff;}
					a.BtnAgregarCurso { position:absolute; top:0; right:0; font-size: 0.8rem; color: #F2523E; background-color:#F2523E; color:#fff; padding:8px;
											-webkit-transition: background-color 0.3s ease-in-out;
											transition: background-color 0.3s ease-in-out;}

					p.Categoria { display: block; font-size: 0.9rem; color: #666; margin-bottom: 5px;}
					#NavCursos h3 { display: block; margin-bottom: 10px; font-size: 1.3rem; font-weight:bold; color:#333333;}
					p.CopyCursos { display: block; margin-bottom: 25px; font-size: 0.9rem; line-height: 1.4em !important;}

					.AccesosCursos { position: absolute; bottom: 30px; left: 0; width:100%; padding:0 30px;}
						a.BtnVerDetalle { font-size: 1rem; font-weight: bold; color: #F2523E; border-left:4px solid #999999; padding-left: 10px; margin-top:5px; float:left;
										-webkit-transition: color 0.3s ease-in-out;
										transition: color 0.3s ease-in-out;}



			/*Desktop*/
			.Desktop #NavCursos article:hover { box-shadow: 0 0 5px #000;
												-webkit-transform:scale(1.05);
												transform:scale(1.05);}

			.Desktop #NavCursos article:hover .PreviewVideo span { -webkit-transform: scale(1);
										 							transform: scale(1);}

			.Desktop a.BtnVerDetalle:hover { color:#2773B8;}
			.Desktop a.BtnAgregarCurso:hover { background-color:#2773B8;}


			/*nuevo*/
			#NavCursos article.nuevo::before { content:""; position:absolute; z-index:100; top:-5px; left:-5px; width:116px; height:83px; background:url(imagenes/label-nuevo.png) no-repeat 0 0;}

			/*fixedflex*/
			.fixedflex #NavCursos { width: 100%;}
			.fixedflex #NavCursos article  { display: inline-block; vertical-align: top; min-height: 490px;}
			/*.......*/


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.General {width:100%; text-align:left; padding: 40px 0;}
	#QuickEmail { display: inline-block; vertical-align: top; width: 30%;}
		#QuickEmail img { display: inline-block; vertical-align: middle;}
		#QuickEmail p { display: inline-block;  vertical-align: middle; font-size: 0.8rem; color:#FFFFFF; padding-left: 10px;}
			#QuickEmail a {display: block; font-size: 1.8rem; color: #fff;}

	#SiteMap { display: inline-block; vertical-align: top; width: 20%; border-left:1px solid #666666; border-right:1px solid #666666;}
		#NavSiteMap ul { display: inline-block; vertical-align: top; width:50%; padding: 0 20px; list-style: none; }
		#NavSiteMap li {}
		#NavSiteMap a { display: block; font-size: 0.8rem; color: #fff; margin-bottom: 10px;}

	#QuickNewsletter { display: inline-block; vertical-align: top; width: 30%; padding: 0 20px;}
		#QuickNewsletter legend { display: block; margin-bottom: 5px; font-size: 0.8rem; font-weight: bold; color: #fff;}
		input#correo-news { display: inline-block; vertical-align: top; width:calc(100% - 150px); padding: 5px 10px; border:1px solid #fff; border-radius:5px 0 0 5px;}
		input#submit-suscripcion {display: inline-block; vertical-align: top; width: 150px; background-color: #000; font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif;  color: #fff; padding: 5px 10px; border-radius: 0 5px 5px 0;  border:1px solid #fff; cursor: pointer;}

	#SocialFooter { display: inline-block; vertical-align: top; width: 20%; padding-top: 15px; text-align: right;}
		#SocialFooter ul {list-style: none;}
		#SocialFooter li { display: inline-block; vertical-align: top; margin-left: 10px;}
		#SocialFooter a { display: block; width:40px; height: 40px; border:1px solid #fff; border-radius:50%;}

		#SocialFooter a.BtnFacebook { background: url(imagenes/icono-facebook.png) no-repeat center center;}
		#SocialFooter a.BtnTwitter { background: url(imagenes/icono-twitter.png) no-repeat center center;}
		#SocialFooter a.BtnYoutube { background: url(imagenes/icono-youtube.png) no-repeat center center;}

	/*Desktop*/
	#QuickEmail a:hover,
	#NavSiteMap a:hover { color: #9A9A9A;}

	input#submit-suscripcion:hover,
	#SocialFooter a:hover { background-color: #0F2D47;}
	/*.......*/

	#Legales { padding-top:25px;}
		#Legales p,
		#Legales a { color:#CFCFCF;}

		p#Copy { float:left; font-size:12px;}
		p#CreacionUno { float:right; font-family: Arial, Helvetica, sans-serif; font-size:10px;}
		#Legales::after { content:""; display: block; clear:both;}

		/*Desktop*/
		.Desktop p#CreacionUno a:hover { color:#fff;}
		/*.......*/


/*INTERNAS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*.........................................................................................................................................*/
/*main*/
	section.General {}
		#HeadInterna { text-align: center; padding-top: 50px; padding-bottom: 50px; border-bottom: 8px solid #3c91de;}
		#HeadInterna h1 { font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; font-size: 4.5rem; color: #fff;}

		#Camino { text-align: left; font-size: 0.9rem; color:#333333; margin-bottom: 20px;}
			#Camino a { font-size: 0.9rem;  display: inline-block; color:#333333;}
			#Camino span { display: inline-block; color:#2D5234; margin: 0 10px;}
			#Camino h1, #Camino h2 { font-size: 0.9rem;  display: inline-block;}

		/*Desktop*/
		.Desktop #Camino a:hover { color:#2D5234;}
		/*.......*/

/*COMO FUNCIONA*/
/*main*/
	#ComoFunciona #HeadInterna { background: #000 url(imagenes/internas/fondo-cursos.jpg) no-repeat center center; border-bottom: none;}

	#ComoFunciona #ContentInterna { background-color:#fff; padding:30px 0;}
		#IntroComoFunciona { padding-bottom:25px; background-color:#FFF;}
			#IntroComoFunciona p { font-size:2rem; color:#333333;}

		#DiagramaPasoPaso { padding-top:30px; background-color:#f2f2f2;}
			#DiagramaPasoPaso h2,
			#PlanesPrecios h2 { font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; font-size: 3.1rem; line-height: 1.5em !important; display: block;  color: #000;}
				#ProcesoPasos { list-style:none; text-align:left; margin:0 auto; width:100%; max-width:500px; background:url(imagenes/internas/punteado.jpg) repeat-y 18px 0;}
					#ProcesoPasos li { margin:40px 0;}
					#ProcesoPasos li:first-child { margin-top:15px;}
					#ProcesoPasos li:last-child { background-color:#f2f2f2; }
					#ProcesoPasos span { display:inline-block; vertical-align:top; font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; width:40px; height:40px; padding-top:5px; text-align:center; font-size:1.5rem; color:#194166; border:2px solid #2D5234; background-color:#f2f2f2; border-radius:50%;}
					#ProcesoPasos div { display:inline-block; vertical-align:top; padding-left:15px; width: calc(100% - 40px);}

				#ProcesoPasos h3 { font-size:1.2rem; font-weight:bold; color:#333333;}
				#PasoFinal h3 { font-size:2rem; color:#F2523E;}
				#ProcesoPasos p { font-size:1rem;}

			#PlanesPrecios { padding:30px 0; background-color:#FFF;}
				#PlanesPrecios header {}
				#PlanesPrecios header p {font-size: 1.1rem;}

				#ListaPrecios { list-style:none; padding:30px 0;}
					#ListaPrecios li { display:inline-block; vertical-align:top; width:33.33%; max-width:300px; padding:0 40px;}
					#ListaPrecios li img { max-width:100%; display:block; margin:0 auto;}
						.CantidadPlan { margin:15px 0; }
						.CantidadPlan p { font-size:1.4rem; color:#333333; padding:5px 0;}
						.CantidadPlan p:first-child { border-bottom:1px solid #999;}

						.PrecioTag { background-color:#2D5234;}
							p.TituloPlan { font-size:1rem; color:#FFF; border-bottom:1px solid #fff; background:#194266 url(imagenes/divisor-logo.png) no-repeat -25px 0; padding:10px 20px;}
							p.PrecioPlan { font-size:2.5rem; color:#fff; display:inline-block; vertical-align:middle; font-weight:bold;}
							p.PrecioPlan span { font-size:1rem; display:inline-block; vertical-align:middle;}

/*CURSOS*/
/*main*/
	#ListadoCursos #HeadInterna { background: #000 url(imagenes/internas/fondo-cursos.jpg) no-repeat center center; border-bottom: none;}

	#ContentInterna { padding: 60px 0 30px 0; background-color: #f2f2f2;}
		#ListadoCursos #Camino { padding-left: 13px;}

		#ContentInterna #NavCursos article {margin-bottom: 26px;}

		#NavPaginado { width:100%; text-align:center; margin: 40px 0;}
			#NavPaginado ul { list-style:none; margin:0 auto;}
			#NavPaginado li { display:inline-block; vertical-align:middle; font-size:16px; color:#666666; margin:0 5px;}
			#NavPaginado li a { display:block; cursor:pointer;}
			#NavPaginado li#Prev a,
			#NavPaginado li#Next a { font-size: 19px; color: #F2523E;}

			#NavPaginado li#Prev a { background-position:0 0;}
			#NavPaginado li#Next a { background-position:-7px 0;}
			#NavPaginado li.Number a { padding:2px 8px; border:1px solid #f2f2f2;}

			#NavPaginado li.select a { color:#F2523E; font-weight:bold; border-color:#F2523E; cursor:default;}

			/*Desktop*/
			.Desktop #NavPaginado li:not(.select):hover a { opacity:0.7;}
			/*.......*/


/*DETALLE CURSOS*/
/*main*/
#DetalleCurso #HeadInterna { background: #000 url(imagenes/internas/fondo-novedades.jpg) no-repeat center center;}

	#HeadNota { width: 70%; display: block; text-align: left; margin-top:60px;}
		#HeadNota h2 { display: block; font-size: 0.9rem; color: #666; margin-bottom: 5px;}
		#HeadNota h3 { display: block; font-size: 2.6rem; color:#333333; margin-bottom: 15px;}

	#DetalleNota { width: 70%; display: inline-block; vertical-align: top; padding-right: 40px; text-align: left;}
	.ColumnaSimple #DetalleNota { width:100% !important;}

		#DetalleNota header {}
			#DetalleNota figure { width: 100%;}
			#DetalleNota img {max-width: 100%; display: block; border: 1px solid #ccc;}

		#DetalleNota footer { padding: 0 15px 15px 15px;}
			#DetalleNota h4 { font-size: 1rem; line-height: 1.5em !important; border-left: 3px solid #2D5234; padding-left: 15px; margin: 20px 15px;}
			p.General { font-size: 0.9rem; line-height: 1.5em !important; color:#333333;}

	#OtrasNotas { width: 30%; display: inline-block; vertical-align: top; text-align: left; background-color: #fff; border:1px solid #ccc;}
		.ModuloOtros {}
			.ModuloOtros h2 { font-size: 1.3rem; color: #fff; padding: 15px 15px 15px 80px;}

			.ModuloOtros footer { background: url(imagenes/punta-azul.png) no-repeat 23px 0;  padding: 20px 30px 10px 30px; text-align:left;}

				#DetalleCursoActual header { background: #DD3135 url(imagenes/internas/icono-otras-notas.jpg) no-repeat left center;}
					#DetalleCursoActual h3 { font-size:1.1rem; font-weight:bold; color:#000; border-left:2px solid #2D5234; padding-left:10px;}

				#DetalleCursoActual footer {}
					#DetalleCursoActual ul { list-style:none; margin-bottom:20px;}
					#DetalleCursoActual li { font-size:0.9rem; margin:5px 0 5px 15px; padding-left: 1em; text-indent: -1em;}
					ul.Duracion li { font-size:2.5rem !important; }
					ul.Temario li::before { content:"+"; font-size:16px; padding-right:5px;}

				#AgregarPlan header { background: #DD3135 url(imagenes/internas/icono-agregar-plan.jpg) no-repeat left center;}
				#AgregarPlan footer { background-color:#0F2D47; text-align:left;}
					#AgregarPlanOff { padding:15px 0 30px 0; text-align:left;}
						#AgregarPlanOff p { font-size:1.1rem; color:#fff; display:block; margin:5px 0; padding:0 10px;}

					#AgregarPlanOn { padding:20px 0 30px 0;}
						#AgregarPlanOn p { font-size:0.9rem; color:#F2F2F2;}
						select#select-plan { width:100%; display:block; padding:5px; margin:10px 0; font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif; font-size:1.2rem;}
						input#agregar-plan { font-family: "TitlWeb-regular", Arial, Helvetica, sans-serif; font-size:1.1rem; color:#FFF; background:none; margin-top:15px; border-left:2px solid #DD3135; padding-left:10px; }

		#CursosRelacionados { padding:30px;}
			#CursosRelacionados h2 { color:#0C2C46; font-size:1.3rem; border-bottom:1px solid #999999; padding-bottom:3px;}

			#CursosRelacionados footer { margin-top:10px;}
				#ListadoCursosRelacionados { list-style:none;}
				#ListadoCursosRelacionados li {}
				#ListadoCursosRelacionados a { font-size:1rem; color:#333; background:url(imagenes/internas/icono-check.jpg) no-repeat 0 8px; display:block; padding:5px 0 5px 20px;}

/*CONTACTO*/
/*main*/
	#Contacto #HeadInterna { background: #000 url(imagenes/internas/fondo-contacto.jpg) no-repeat center center;}

	#Contacto #FormContacto {display: inline-block; vertical-align: top; width: 50%; margin-top: 25px; text-align: left; }
		#Contacto #FormContacto h3,
		#OtrasVias h3 { font-size: 1.5rem; color: #2A2A2A; margin-bottom: 10px;}

		#Contacto #FormContacto footer { background-color: #fff; border:1px solid #ccc; padding: 30px 30px 50px 30px;}
			#Contacto #FormContacto input[type="text"],
			#Contacto #FormContacto input[type="email"],
			#Contacto #FormContacto input[type="password"],
			#Contacto #FormContacto textarea {color: #070707; border-color: #696969; }

			#Contacto #FormContacto input[type="submit"] { background-color: #2D5234; color:#fff; padding:10px 15px;}

			#Contacto #FormContacto input::placeholder,
			#Contacto #FormContacto textarea::placeholder {color: #080808;}

	#OtrasVias { display: inline-block; vertical-align: top; width: 50%; text-align: left; margin-top: 25px; padding-left: 50px;}
		#OtrasVias header {border-bottom: 1px solid #ccc;}
			#OtrasVias a.BtnMail { display: block; margin-top: 25px; font-size: 2rem; color:#333333;}

			#SocialContacto { margin-top:50px;}
				#SocialContacto p { font-size: 0.9rem; color: #333333;}

				#SocialContacto ul { list-style: none; margin-top: 10px;}
					#SocialContacto li { display:inline-block; vertical-align: top; margin-right: 7px;}
					#SocialContacto a { display: block; width: 40px; height: 40px; border: 1px solid #2D5234; border-radius: 50%;}

					#SocialContacto a.BtnFacebook { background: url(imagenes/icono-facebook.png) no-repeat center center; background-color:#2D5234;}
					#SocialContacto a.BtnTwitter { background: url(imagenes/icono-twitter.png) no-repeat center center;  background-color:#2D5234;}
					#SocialContacto a.BtnYoutube { background: url(imagenes/icono-youtube.png) no-repeat center center;  background-color:#2D5234;}

			/*Desktop*/
			.Desktop #OtrasVias a.BtnMail:hover { color:#2D5234;}
			/*.......*/

/*PREGUNTAS FRECUENTES*/
/*header*/
#PreguntasFrecuentes #HeadInterna { background: #000 url(imagenes/internas/fondo-contacto.jpg) no-repeat center center;}

/*main*/
#ListaPreguntas { text-align:left;}
	#ListaPreguntas dt { font-size:1.2rem; line-height:1.5em !important; margin-bottom:10px; font-weight:bold;}
	#ListaPreguntas dd {font-size: 0.9rem; line-height: 1.5em !important; color: #333333; margin-bottom:25px;}
		#ListaPreguntas ul { list-style:none; display:block; margin:10px 0;}
		#ListaPreguntas li { margin:5px 0; font-size:0.9rem; line-height:1.5em !important; display:block; padding-left: 1em; text-indent: -.7em;}
		#ListaPreguntas li:before {content: "\2022"; color: #0F2D47; padding-right:5px;}

		#ListaPreguntas a { font-weight:bold; color: #0F2D47;}


.SafeZone * { line-height: 1.2em !important;}

p.General { text-align:justify;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto;}

}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}
    .Viewport { max-width:1360px;}

/*header*/
	#Parche { width: calc((100% - 1360px)/2);}

/*main*/
	#ContentSlideGeneral figcaption { right: calc(100% - 1360px);}
	#WidgetNuevoCursos header { width: 190px;}

	#ContentPasos h2 { font-size: 2.2rem;}
	h3.Paso { font-size: 1.5rem;}

	p.DescPaso { font-size: 1rem;}
	a.AccionPaso { font-size: 1rem;}

	#CargadorVideo { height: 450px;}

	.Likes p { font-size: 1.1rem;}
	.Likes span { font-size:0.9rem;}
}

@media (max-width: 1520px) {
/*main*/
	#FotoPasos { padding-left: 30px; width: 30%;}
	#ContentPasos { width: 70%;}
}

@media (max-width: 1470px) {
.Viewport { max-width:1200px;}

/*header*/
	#Parche { width: calc((100% - 1200px)/2);}

/*main*/
	#ContentSlideGeneral figcaption { right: calc(100% - 1200px);}
	p.TituloSlide { font-size: 3.3rem;}
	p.PieSlide {  font-size: 2rem;}

	a.AccionPaso { display:block; margin-left: 32px; border: none; padding-left: 0; margin-top: 10px;}

/*footer*/
	#QuickEmail img { display:none;}

}


@media (max-width: 1300px) {
.Viewport { padding:0 30px; max-width:none;}

/*header*/
	#Parche {display: none;}

/*main*/
	#ContentSlideGeneral figcaption { right: 60px;}
}


@media (max-width: 1230px) {
/*main*/
	#NavCursos article { width: calc(25% - 10px);  margin: 0 5px;}

/*footer*/
	#SiteMap { display:none;}
	#QuickNewsletter { width:50%;}
	#QuickEmail p { padding-left: 0;}

	#Legales { padding-top: 45px;}
}

@media (max-width: 1200px) {
html { font-size: 14px; /*1rem = 14px*/}

/*header*/
	#Menus {  width: calc(100% - 180px);  margin-left: 180px;}
		#MenuGeneral { padding-left: 0; }
		#MenuGeneral a { padding-top: 31px; padding-left: 10px; padding-right: 10px;}
		a#BtnPerfil { padding-top: 31px;}
}

@media (max-width: 1120px) {
/*main*/
	#DatosEstadisticos { padding-bottom:35px;}
		#Estadisticas li { width:33.33%; margin-bottom:35px;}

	#QuickContact h2 { font-size: 1.1rem; text-align: left;}

	#CursosPopulares { padding-top: 35px; padding-bottom: 5px; }
	#NavCursos article { width: calc(50% - 10px); max-width: 390px; margin: 0 5px 60px 5px;}

/*INTERNAS*/
/*main*/
	.Interna #NavCursos article { width: calc(33.33% - 10px);}

/*DETALLE CURSOS*/
/*main*/
	#HeadNota { padding-right: 20px;}
		#HeadNota h3 { font-size: 2.2rem;}

	#DetalleNota { padding-right: 20px;}
}

@media (max-width: 1070px) {
header.General .Viewport {  padding: 0 15px;}

/*main*/
	p.LeyendaEstadistica { font-size:1.3rem;}

/*DETALLE CURSOS*/
/*main*/
	#HeadNota { width:100%; padding-right: 0;}
	#DetalleNota {width:100%; display: block; padding-right: 0;}
	#OtrasNotas {width:100%; display: block; margin-top: 20px;}
}

@media (max-width: 1023px) {
html { font-size: 15px; /*1rem = 15px*/}

header.General { height: 50px; background: none; background-color:#0F2D47;
				 -webkit-transform: none;
				 transform: none;}

	#Logo { width: 140px; background: none;}

	a#BtnMobile {  position:absolute; z-index:9998;  overflow:hidden; top:0; right:0; width:70px; height:100%; padding-left: 15px; line-height:0; white-space:nowrap; display:block; text-align:center; background: #2D5234 url(imagenes/canto-boton-mobile.png) no-repeat 0 0;  cursor:pointer;}
		a#BtnMobile span { -webkit-transition: color 0.3s ease-in-out;
						    transition: color 0.3s ease-in-out;}
		#Barritas { font-size:40px; color:#fff;}
		#Equis { font-size:30px; padding-top: 5px; color:#fff; display:none; }

	#Menus { position:fixed; overflow:hidden; z-index:9997; top:0; left:0; display: block; margin-left: 0; width:100%; height:100%; background:rgba(25, 66, 102, 0.8); opacity:0; visibility:hidden;
			-webkit-transform-origin: center top;
			-webkit-transform: scale(1, 0);
			-webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            transform-origin: center top;
            transform: scale(1, 0);
            transition:  transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}

		#Menus ul { display: block;}

			#MenuGeneral { position:absolute; z-index: 100; top:50%; left:50%; width:100%; max-width:280px; text-align:center; margin:0;
						  -webkit-transform: translate(-50%, -50%);
						  -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
						  transform: translate(-50%, -50%);
						  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}

				#MenuGeneral > li { display:block !important; height:auto; text-align:center;  }
				#MenuGeneral > li#BtnHome {display:block !important;}
				#MenuGeneral > li > a { width:100%; text-align:left; font-size: 1rem; padding:13px 15px;}
				#MenuGeneral > li#BtnCursos a { background-position: 900px 0;}

					ul#SubmenuCursos { position:relative; overflow: hidden; z-index: 0; top: auto; width: 100%; max-height: 0; text-align: left;
										-webkit-transform: none;
										-webkit-transition: max-height 1s ease-in-out;
										transform: none;
										transition: max-height 1s ease-in-out;}


				/*menucursos*/
				.menucursos #MenuGeneral > li#BtnCursos > a { background-position: 25px 100%;}

				.menucursos ul#SubmenuCursos { max-height: 500px;
												-webkit-transform:  none;
												transform:  none;}
				.menucursos #MenuPlanes {display:none;}

				/*..........*/


			#MenuPlanes { position:absolute; z-index: 50; top: 42%; left: 50%; width:100%; max-width:280px; margin-top: -115px; white-space:normal; background-color:#1B1B1B; text-align:right;
						-webkit-transform: translate(-50%, -50%);
						 transform: translate(-50%, -50%);}

				#MenuPlanes li {}
				#MenuPlanes li#BtnRegistro { width: 50%; border-right:1px solid #2f2f2f;}
				#MenuPlanes li#BtnLogin { width: 50%; text-align:left;}

				#LoginPanel { width: 280px; top: auto; right: auto; left: -140px;}

				#MenuPlanes li#BtnMisPlanes { width: 50%;}

					#MenuPlanes li a { padding-top:20px; padding-bottom:20px; font-size: 0.8rem; text-align:left;}
					#MenuPlanes li#BtnRegistro a::after { display:none;}
					#MenuPlanes li#BtnMisPlanes a { padding-right:0;}

					#LoginPanel a { text-align:center !important; font-size:0.9rem !important; padding-top:60px !important; padding-bottom:7px !important;}
					a#BtnPerfil { padding-top:0;}

			/*Desktop*/
			.Desktop #MenuPlanes li#BtnRegistro a:hover,
			.Desktop #MenuPlanes li#BtnLogin a:hover {  color: #ccc;}

			/*select*/
			#MenuGeneral > li.select > a { color:#fff; background-image:none;  background-color: #2D5234;}

			/*menucursos*/
			.menucursos #MenuGeneral > li#BtnCursos.select > a {  background: url(imagenes/punta-roja.jpg) no-repeat center bottom; background-color:transparent;}

			/*menumode*/
			body.menumode { overflow:hidden;}
			body.menumode a#BtnMobile { background: none;}
			body.menumode #Barritas { display: none;}
			body.menumode #Equis { display: block;}
			body.menumode #Menus { opacity:1; visibility:visible; overflow:auto;
								  -webkit-transform:scale(1);
								  transform:scale(1);}

			/*menumode loginmode*/
			.menumode.loginmode #MenuGeneral {opacity:0; visibility:hidden;}

			/*......*/

/*main*/
#PlantillaContent { padding:80px 0; min-height:auto;}
main { margin-top: 50px;}
	#Estadisticas { margin-bottom: 25px;}
	p.NumeroEstadistica { font-size: 2.5rem;}

	#PasoaPaso, #PasosPlanes, #QuickContact {display:block;}
	#PasosPlanes, #QuickContact {width: 100%;}
		#CargadorVideo iframe { top: 0;
								-webkit-transform: translateY(0);
								transform: translateY(0);}

	#ContentPasos { padding-right: 30px;}
	a.AccionPaso { font-size:0.9rem; padding:0;}

	#QuickContact { padding-top:0; background-image: none; text-align: center;}
	#QuickContact header { margin: 0 auto;}
	#QuickContact footer { max-width: none; margin: 0 auto;}

/*footer*/
	#QuickEmail { display:none;}
	#QuickNewsletter { width: 70%; padding-left: 0;}
	#SocialFooter { width: 30%; text-align: right;}

}

@media (max-width: 1023px) and (max-height: 520px) {
/*header*/
	#MenuPlanes { top:0; margin-top: 70px;
				  -webkit-transform: translate(-50%, 0);
				   transform: translate(-50%, 0);}

	#MenuGeneral { top:120px;
				  -webkit-transform: translate(-50%, 0);
				   transform: translate(-50%, 0);}
}

@media (max-width: 980px) {
/*CONTACTO*/
/*main*/
	#Contacto #FormContacto {width:100%; display: block;}

	#OtrasVias { display:none;}
}

@media (max-width: 950px) {
/*main*/
	p#IntroCursosPopulares br { display: none;}
}

@media (max-width: 880px) {
/*main*/
	p.TituloSlide { font-size: 2.3rem;}
	p.PieSlide { font-size: 1.5rem;}
	a.BtnSlide { margin-top:15px; padding: 7px 20px;}

	#BulletsSlideGeneral { bottom:20px;}

	#NavCursos article { width: calc(50% - 20px) !important; margin: 0 10px 20px 10px;}
}

@media (max-width: 800px) {
/*main*/
	#ListaPrecios li { padding:0 15px;}
}

@media (max-width: 768px) {
/*main*/
	#CargadorVideo { height: 350px;}
}

@media (max-width: 720px) {
/*main*/
	#BulletsSlideGeneral { display:none;}

	#WidgetNuevoCursos {background: linear-gradient(to right, #194266 200px, #2773B8 200px);}

	#Intro { padding: 60px 0 40px 0;}
	#Intro h1 {font-size: 2.5rem;}
	#Intro h2 { font-size: 1.5rem;}
	p#IntroDetalle {line-height: 1.5em !important;}

	#Estadisticas { margin-bottom: 25px;}

	#NavCursos article .PreviewVideo span { -webkit-transform: scale(1); transform: scale(1);}
	.PreviewVideo video { max-width:100%; display:block;}
}

@media (max-width: 650px) {
	#ListaPrecios li { display:block; width: 100%; margin:0 auto 45px auto;}
}

@media (max-width: 600px) {
/*header*/
	a.BtnSlide { margin-top: 10px;  font-size: 1rem;}

/*main*/
	#SlideGeneral { display:none;}

	#SlideMobile { width: 100%; height: 250px; display: block; background: url(imagenes/foto-home-mobile.jpg) no-repeat 0 0;}
		#SlideMobile div {padding-top: 55px; width: 80%; margin-left: 20%;}
		#SlideMobile p { font-size:1.3rem; color: #fff; margin-bottom:10px;}
		#SlideMobile span { font-family: "BebNeu-regular", Arial, Helvetica, sans-serif; font-size: 2.3rem; display: block; margin-bottom:5px;}

	#WidgetNuevoCursos footer div { white-space: normal; top:50%;
									-webkit-transform: translateY(-50%);
									transform: translateY(-50%);}

	#WidgetNuevoCursos footer a { font-size:0.8rem;}

	#DatosEstadisticos {}
		#Estadisticas li { width:50%;}
		p.LeyendaEstadistica {font-size: 1rem;}

	#NavCursos { display: block; text-align: center; }
		#NavCursos article { width:100% !important; margin:0 auto 10px auto;}

/*footer*/
	#QuickNewsletter {width:100%; display: block;  text-align: center; padding-left: 0; padding-right: 0;}
		#SocialFooter {width:100%; display: block; text-align: center; padding-top: 25px;}
		#SocialFooter li {  margin:0 10px;}

	#Legales p { float: none !important; width: 100%; text-align: center;}
	p#CreacionUno { padding-top:30px;}

}

@media (max-width: 530px) {
/*main*/
	#Intro h1 { font-size: 2rem;}
	#Intro h2 {font-size: 1.2rem;}

	#PasosPlanes { background-image: none;}
		#FotoPasos { display:none;}
		#ContentPasos { display: block; width: 100%; padding-left: 30px;}
		#PasosPlanes h2 { margin:0; padding-top: 35px; padding-bottom: 15px;}
}


@media (max-width: 450px) {
.Viewport { padding:0 15px;}

/*main*/
#PlantillaContent { padding: 50px 0;}
		h1.General { font-size:2rem;}
	/*#WidgetNuevo
Cursos .Viewport { padding:0 30px 0 15px;}*/
		#WidgetNuevoCursos header {  width: 70px;}
			#WidgetNuevoCursos header p { font-size: 0.8rem;}
			#WidgetNuevoCursos footer { padding-left:5px;}

	#Intro h2 br { display: none;}

	#Estadisticas {}
	#DatosEstadisticos { padding-top: 10px; padding-bottom: 20px;}
		#Estadisticas li {display: block;  width: 100%; padding: 15px 0; margin-bottom:0;}
		p.LeyendaEstadistica { max-width:200px; margin:0 auto;}

	#CargadorVideo { height: 230px;}

	#QuickContact header {}
	#QuickContact footer { padding-left: 30px; padding-right: 30px;}
	#QuickContact h2 { text-align: left; padding-top: 10px; padding-bottom: 10px; }

/*footer*/
	input#correo-news { display: block;width: 100%; border-radius: 5px;	}
	input#submit-suscripcion { display: block; width: 100%; border-radius: 5px; margin-top: 5px; border-color:#000;}

/*INTERNAS*/
/*main*/
	#HeadInterna h1 { font-size: 2.5rem;}
	#IntroComoFunciona p { font-size:1.2rem;}

	#DiagramaPasoPaso h2,
	#PlanesPrecios h2 { font-size: 2rem;}

	#ProcesoPasos h3 {font-size: 1rem;}
	#PasoFinal h3 { font-size: 1.7rem;}
	#ProcesoPasos p {  font-size: 0.9rem;}

	#DetalleCurso #Camino { padding-left: 0; margin-top:10px; margin-bottom:0;}
	#DetalleCurso #HeadNota { margin-top: 30px;}

	#AgregarPlanOff { padding: 10px 0 20px 0;}
	#AgregarPlanOff p { font-size:0.9rem; padding:0;}
}

@media (max-width: 430px) {
/*main*/
	#Intro { padding: 40px 0;}
		#Intro h1 { font-size: 2rem;}
		#Intro h2 { font-size: 1rem; line-height: 1.5em !important;}
		p#IntroDetalle { font-size: 0.85rem;}

	#PasosPlanes h2 {  font-size: 1.6rem;}
	#PasosPlanes h2 br:first-child { display:none;}
	h3.Paso {  font-size: 1.4rem;}
	p.DescPaso { font-size: 0.9rem;}

	#CursosPopulares h2 { font-size: 2.4rem;}

/*DETALLE CURSOS*/
/*main*/
	.ModuloOtros h2,
	#CursosRelacionados h2 {font-size: 1rem;}

/*CONTACTO*/
/*main*/
	#Contacto #FormContacto { margin-top:0;}
	#Contacto #FormContacto footer { padding-left: 20px; padding-right: 20px;}
}


@media (max-width: 405px) {
/*main*/
	#CargadorVideo {  height: 170px;}
}

@media (max-width: 370px) {
/*main*/
	#SlideMobile p { font-size:1rem; color: #fff;}
	#SlideMobile span { font-size: 2.2rem; display: block;}

	#Estadisticas figure { padding: 0 85px;}

	#NavCursos { margin-top: 20px;}
		#CursosPopulares { padding-top: 45px;}
			p#IntroCursosPopulares {font-size: 1rem;}

/*INTERNAS*/
/*main*/
	#ContentInterna { padding-top: 30px;}
		#HeadInterna { padding-top: 50px; padding-bottom: 40px;}

		#Camino { display:none;}

/*CURSOS*/
	#NavCursos footer { padding-top:50px;}
		a.BtnAgregarCurso { width: 100%; text-align: center; display:block; padding:10px;}

/*DETALLE CURSOS*/
/*main*/
	#HeadNota { margin-top:0;}
	#HeadNota h3 { font-size: 1.6rem;}

	#DetalleNota h4 { font-size: 0.9rem; margin-left: 0; margin-right: 0; padding-right: 15px;}

	#DetalleCursoActual footer { padding-left:15px; padding-right:15px;}
	#AgregarPlanOn,
	#AgregarPlanOff { padding: 0 0 15px 0;}
}


.Shadow {
	box-shadow: 0px 7px 15px rgba(30,30,30,0.1);
}
.Modal {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255,255,255,0.8);
	transition: 0.3s all;
	z-index: 100000;
}

.ModalContent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	padding: 25px 25px;
	background-color: white;
	border: 1px solid lightgrey;
	border-radius: 5px;
	color: #060606;
	text-align: center;
	font-size: 18px;
}

.ModalCancel {
	position: absolute;
	top: 5px;
	right: 5px;
	color: black;
	text-decoration: none;
	font-size: 24px;
}

							.Caja {
								display: inline-block;
								width: 19%;
								height: 115px;
								margin: 0.1111111%;
								box-sizing: border-box;
								text-align: center;
								position: relative;
								font-size: 14px;
								padding: 20px;
							}
							.Caja:before {
								content: "";
								width: 20px;
								height: 20px;
								background-color: inherit;
								position: absolute;
								top: 50%;
								right: -10px;
								transform: translateY(-50%) rotateZ(45deg);
								z-index: 1;
							}
							.Caja.Last:before {
								width: 0px;
								height: 0px;
								visibility: hidden !important;
							}
							.Caja:after {
								content: "";
								width: 22px;
								height: 22px;
								background-color: #f2f2f2;
								position: absolute;
								top: 50%;
								left: -11px;
								transform: translateY(-50%) rotateZ(45deg);
								z-index: 0;
							}
							.Caja.First:after {
								width: 0px;
								height: 0px;
								visibility: hidden !important;
							}
							.Caja.bGreen {
								color: white;
								background: #3b2;
							}
							.Caja.bYellow {
								background: #dd0;
								color: black;
							}
							.Caja.bOrange {
								color: white;
								background: #d50;
							}
							.Caja span {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								width: 70%;
								z-index: 100;
							}


		.SubMenu {
    		width: 100%;
    		background-color: #f0f0f0;
    		border-bottom: 1px solid lightgrey;
    		text-align: right;
    		z-index: 99 !important;
    	}
    	.SubMenu .Item {
    		float: right;
    		display: inline-block;
    		width: auto;
    		padding: 20px 44px;
    		border-left: 1px solid lightgrey;
    		color: grey;
    		text-align: center;
    		font-size: 14px;
    		cursor: pointer;
    	}
    	.SubMenu .Item.Active {
    		background: #1469aa;
    		color: white;
    		cursor: pointer;
    	}
    	.SubMenu .Item img {
    		width: 30px;
    	}

		.MyModal {
				display: block;
				position: fixed;
				left: 0px;
				top: 0px;
				width: 100%;
				width: 100vw;
				height: 100vh;
				height: 100%;
				background-color: rgba(255,255,255,0.7);
				z-index: 100000;
			}
			.MyModal .MyModalContainer {
				width: 85%;
				padding: 20px;
				border: 1px solid lightgrey;
				border-radius: 5px;
				padding: 20px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: white;
				max-height: 99%;
				overflow-y: auto;
			}
			.MyModal .MyModalContainer .MyModalContent {
				text-align: center;
				font-size: 26px;
				color: black;
			}
			.MyModal .MyModalContainer .MyModalCancel {
				font-size: 35px;
				color: black;
				position: absolute;
				display: inline-block;
				margin: 0px;
				padding: 0px;
				top: -10px;
				right: 5px;
				cursor: pointer;
			}


			.MySubModal {
				display: block;
				position: fixed;
				left: 0px;
				top: 0px;
				width: 100%;
				width: 100vw;
				height: 100vh;
				height: 100%;
				background-color: rgba(255,255,255,0.7);
				z-index: 100002;
			}
			.MySubModal .MySubModalContainer {
				width: 70%;
				padding: 20px;
				border: 1px solid lightgrey;
				border-radius: 5px;
				padding: 20px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: white;
			}
			.MySubModal .MySubModalContainer .MySubModalContent {
				text-align: center;
				font-size: 16px;
				color: black;
			}
			.MySubModal .MySubModalContainer .MySubModalCancel {
				font-size: 35px;
				color: black;
				position: absolute;
				display: inline-block;
				margin: 0px;
				padding: 0px;
				top: -10px;
				right: 5px;
				cursor: pointer;
			}


			#MenuGeneral > li {
				transition: 0.2s;
			}

			.PlanHeader a { color:#000;}

@media (max-width: 1023px) {
	#MenuGeneral > li:not(#BtnCursos):hover {
		background: #243646;
	}
}

@media (max-width: 600px) {
	.SubMenu .Item { width:33.33%; text-align:center;  padding: 20px 10px 20px 10px;}
}