<!DOCTYPE html>

<html  lang="en">
<head>


<meta name="apple-itunes-app" content="app-id=699741510">
	<script>		
		document.addEventListener('DOMContentLoaded', function(event) {
			/*
			var deferredPrompt; 
			// fires every time until pwa app is installed
			window.addEventListener('beforeinstallprompt', function(e) {				
				// Prevents the default mini-infobar or install dialog from appearing on mobile
				e.preventDefault();
				// Stash the event so it can be triggered later.
				deferredPrompt = e;

				var days_since_last_prompted = window.localStorage.getItem('pwa_install_prompt_close_date');
				var show_prompt_again = false;
				// first time install promt, show it 
				// or localstorage not available, show it
				if (days_since_last_prompted == null) {
					show_prompt_again = true; 
				} else {
					// after 3 days has passed since install prompt was shown last time, show it again
					if (days_since_last_prompted - new Date().getDate() >= 3) {
						show_prompt_again = true;
					} 
				}

				// For Android users, show "add to home screen" install button
				if (/android/i.test(navigator.userAgent) && show_prompt_again) {
					document.getElementById('pwa_install_app_container').style.display = 'block';
				}
			});
	
		  // fires when pwa app is first opened
			window.addEventListener('appinstalled', function(e) {									
				$('#pwa_install_app_container').hide();
				// update backend database to keep track of pwa installs
				$.post('services/videos_ajax.php?action=pwa_activity_log', {
						action: 'pwa_activity_log',
						description: 'install'
					}, function(data) {
						//console.log('data ', data);
					}
				)
			})
			
			// close button on install banner
			$('#pwa_close_btn').on('click', function() {				
				$('#pwa_install_app_container').hide();
				window.localStorage.setItem('pwa_install_prompt_close_date', new Date().getDate());
			})

			// update deferredPrompt variable when install banner is closed		
			$('#pwa_install_btn').on('click', async function() {
				if (deferredPrompt !== null) {
					deferredPrompt.prompt();
					var { outcome } = await deferredPrompt.userChoice;
					if (outcome === 'accepted') {
						deferredPrompt = null;	
					}
				}
			})
			*/

			// detect if user is using PWA app, and not the browser
			/*
			if (window.matchMedia('(display-mode: fullscreen)').matches) {			  
			  // update backend database user using pwa app
			  $.post('services/videos_ajax.php?action=pwa_activity_log', {
						action: 'pwa_activity_log',
						description: 'using pwa standalone app'
					}, function(data) {
						//console.log('data ', data);
					}
				)
			}
			*/

		})

		/*
		if ('serviceWorker' in navigator) {
			window.addEventListener('load', function() {
				navigator.serviceWorker.register('/service_worker.js').then(function(registration) {
					// Registration was successful
					console.log('ServiceWorker registration successful with scope: ', registration.scope);
				}, function(err) {
					// registration failed 
					console.log('ServiceWorker registration failed: ', err);
				});
			});
		}
		*/
	</script>

<title>Yabla Spanish Video Immersion - The Authentic Way to Learn Spanish</title>
<!-- 
	Server Page Time: 0.042s rey.yabla.com
	-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="msapplication-config" content="none"/>

<!-- favicon images for all different resolutions -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/apple-touch-icon-152x152.png" />

<link rel="icon" type="image/png" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="//yabla.b-cdn.net/media.yabla.com/images/new-favicons/favicon-128x128.png" sizes="128x128" />

<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

<link rel="alternate" hreflang="en" href="https://spanish.yabla.com/?ref=lenguajero&a=1484" />
<link rel="alternate" hreflang="fr" href="https://espagnol.yabla.com/?ref=lenguajero&a=1484" />
<link rel="alternate" hreflang="de" href="https://spanisch.yabla.com/?ref=lenguajero&a=1484" />
<link rel="alternate" hreflang="es" href="https://espanol.yabla.com/?ref=lenguajero&a=1484" />
<link rel="alternate" hreflang="it" href="https://spagnolo.yabla.com/?ref=lenguajero&a=1484" />
<link rel="alternate" hreflang="pt" href="https://espanhol.yabla.com/?ref=lenguajero&a=1484" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href='//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Roboto:300,400,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- <link href='/styles/google_fonts/font_stack.css?3' rel='stylesheet' type='text/css'> -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
<link rel="stylesheet" type="text/css" href="/styles/yabla-styles.css?1770926881" />



<link href="https://spanish.yabla.com/"  rel="canonical" />

		<meta name="description" content="Learn Spanish From Online Videos - Yabla provides authentic Spanish listening practice using interactive Spanish language video from all over the Spanish speaking world. Learn Spanish with drama, interviews, documentary, music videos, and more. Yabla offers the most authentic Spanish language immersion through online televsion." />
	<style type="text/css" media="screen">
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&family=Roboto&display=swap');
header h3,
.cta-section h2 {
	color: #f6822b;
}

h2 {
	color: #224a9a !important;
}
sup {
	top: -1em;
	font-size: 50%;
}
header .page-translation .translate-link {
	font-size: 16px;
}
header #site-lang .product-name {
	margin-right: 5px;
}
#hero {
	padding-top: 30px;
	background-color: #fff;
	text-align: center;
	border-bottom: 1px solid #dee2e4;
	overflow: hidden;
}

#hero .intro {
	max-width: 690px;
	width: 90%;
	margin: 0 auto;
}

.trailer {
	
}

#hero .play-video {
	display: block;
	position: relative;
	top: 0;
	height: 92%;
	width: 100%;
	cursor: pointer;
	box-shadow: 0 1px 8px rgba(0,0,0,.4);
}

#hero .play-video.super_border {
	cursor: pointer;
}
#hero .play_button_icon {
	display: block;
	position: absolute;
	height: 100px;
	width: 100px;
	top: 50%;	
	left: 50%;
	z-index: 2;
	background: url(/images/icon-play-small.png) center no-repeat;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
}
#hero .play-video .play-overlay {
	position: absolute;
	bottom:5%;
	right:5%;
	width: 65px;
	height: 65px;
}
#hero .play-video:hover {
	cursor: pointer;
	webkit-cursor: pointer;
	opacity: 1;
}

#hero .play-video.offcenter:hover {
	border: solid 2px #4176a6;
}
#hero .play-video.super_border:hover {
}

#hero p {
	margin-bottom: 10px;
	color: #4176a6;
}

#sample-games,
#sample-videos,
.classroom-section-b {
	padding: 30px 0;
	background-color: #f8f8f8;
	text-align: center;
	overflow: hidden;
}
#sample-games {
	padding-bottom: 0;
}

.classroom-section-b {
	padding-bottom: 0px;
}

.classroom-section-b .container {
	text-align: left;
	padding-bottom: 60px;
	border-bottom: 1px solid #dee2e4;
}

.classroom-section-b .container p {
	margin-bottom: 15px;
}

#sample-games h2,
#sample-videos h2,
#v-props h2,
.classroom-section-b h2 {
	padding: 20px 0px;
	font-size: 32px;
}

.classroom-section-b h2 {
	padding-bottom: 0;
}

#sample-games .intro,
#sample-videos .intro {
	margin: 0 auto;
	padding: 0 15px 25px 15px;
}
#sample-games .intro p,
#sample-videos .intro p {
	font-size: 20px;
	color: #4176a6;
}
	
.sample-videos .sample {
	margin-bottom: 30px;
	padding: 0px 15px;
}

.sample-videos figure img {
 
}

.sample-videos figure {
	position: relative;
	margin-bottom: 0px;
}

.sample-videos figcaption {
	position: absolute;
	height: 50px;
	width: 100%;
	max-width: 260px;
	margin: -65px 2px;
	padding: 0 8px;
	color: #fff;
}

.sample-videos figcaption h3 {
	font-family: roboto, sans-serif;
	font-size: 15px;
	position: absolute;
	bottom: 0;
	font-weight: 500;
}

.sample-videos .vid-container {
	max-width: 450px;
	margin: 0 auto;
	padding: 0  15px;
	text-align: left;
}
.sample-videos.with_header .vid-info {
	height: auto;
}
.sample-videos.with_header h3.row {
	font-size: 30px;
	color:#f6822b;
	clear:both;
	margin-top:20px;
}

.mask {
	position: absolute;
	display: block;
	height: 70px;
	width: 100%;
	background: yellow;
	margin-top: -70px;
	margin-left: 0;
}

.mask {
	background: -moz-linear-gradient(top, transparent 29%, rgba(0, 0, 0, 0.65) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(29%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65)));
		background: -webkit-linear-gradient(top, transparent 29%, rgba(0, 0, 0, 0.65) 100%);
		background: -o-linear-gradient(top, transparent 29%, rgba(0, 0, 0, 0.65) 100%);
		background: -ms-linear-gradient(top, transparent 29%, rgba(0, 0, 0, 0.65) 100%);
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 29%, rgba(0, 0, 0, 0.65) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
	}

a.gb {
	display: block;
	position: relative;
}
.play_overlay {
	position: absolute;
	top:0px;
	height: 100%;
	width: 100%;
	opacity: 0;
	background: url('//yabla.b-cdn.net/media.yabla.com/images/icon-play-small.png') center no-repeat;
	border: solid 3px #4176a6;
	text-indent: -9999px;
	z-index: 2;
	display:block;
}

.play_overlay {
	-webkit-transition: opacity 300ms ease-in-out;
	-moz-transition: opacity 300ms ease-in-out;
	-o-transition: opacity 300ms ease-in-out;
	transition: opacity 300ms ease-in-out;
}

a:hover .play_overlay {
	opacity: 1;
}

#testimonials {
	border: none;
	background-color: #f8f8f8;
}
#testimonials strong {
	font-weight: 500;
}
#testimonials p {
	font-size: 21px;
}
#trustpilot {
	display: block;
	width: 240px;
	margin: 20px auto 0;
	background: transparent url("//yabla.b-cdn.net/media.yabla.com/images/trustpilot-logo.png") no-repeat center center;
	background-size: 240px;
	text-indent: -9999px;
	clear: both;
}
#testimonials {
	padding: 45px 20px 35px;
	background: #fff;
	text-align: center;
	font-weight: 300;
	color: #224a9a;
	border-top: solid 1px #dee2e4;
	border-bottom: solid 1px #dee2e4;
}
#testimonials h2 {
	margin-bottom: 30px;
	font-size: 18px;
	color: #4176a6;
	opacity: 0.5;
}
#trustpilot a {
	display: block;
	padding: 1%;
}

@media (max-width: 1200px) {

	.sample-videos ul li figcaption h3 {
		font-size: 13px;
	}

		.sample-videos ul li figcaption {
		width: 90%;
	}
	#hero.subscribe_button {
		padding-bottom: 30px !important;
	}
	#hero.subscribe_button .info {
		position: relative !important;
		bottom: unset !important;
		left: unset !important;
	}
	#hero .play-video.offcenter {
		height: 90%;
		background-position: 96% 72%;
	}
}
@media (max-width: 990px) {

	.sample-videos ul li figcaption {
		width: 90%;
	}

		.sample-videos ul li:last-child {
		display: none;
	}
		#hero .play-video.offcenter {
		height: 100%;
		background-position: 96% 77%;
	}

}
@media (max-width: 767px) {
		.sample-videos ul li figcaption h3 {
		font-size: 15px;
	}


	.play:hover {
		opacity: 0;
	}

	#hero .play-video.offcenter {
		background-position: 96% 72%;
		border: none;   }  
	#hero .play-video.offcenter:hover {
		border: none;   }
}
#testimonials {
	border: none;
	background-color: #f8f8f8;
}

.vid-info {
	padding: 0 10px;
	height:200px;
}

.vid-info .meta {
	margin-bottom: 10px;
	padding: 8px 0 10px;
	border-bottom: 1px solid #dee2e4;
	font-weight: 600;
	font-size: 12px;
}

.vid-info .meta p {
	display: inline;
	margin-right: 9px;
	font-size: 12px;
}

.vid-info .meta .label {
	font-weight: 400;
	color: #697378;
}

.vid-info .btn.cta{
	padding: 3px 40px;
	font-size: 12px;
}
.cta-section {
	background: #f8f8f8;
}

.cta-section .container {
	padding: 45px 20px 30px;
	border-top: 1px solid #dee2e4;
	border-bottom: 1px solid #dee2e4;
}

.cta-section.two {
	background: #fff;
}

.cta-section.two .container {
	border-bottom: none;
}

.cta-section h2 {
	margin-bottom: 10px;
}

.cta-section p {
	margin-bottom: 15px;
}

.cta-section .btn.cta {
	padding: 20px 70px;
}

@media (max-width: 770px) {
		.cta-section {
		text-align: center;
	}
}
#v-props {
	padding: 45px 0 30px;
	background-color: #fff;
	text-align: center;
	overflow: hidden;
}

#v-props ul {
	margin-bottom: 30px;
}

#v-props ul li {
	display: inline;
	display: inline-block;
	vertical-align: top;
}

.v-prop {
	height: 275px;
	width: 275px;
	margin: 15px 45px;
	border-radius: 50%;
	text-align: center;
}

.v-prop {
	background: #e5e5e5;
		background: -moz-linear-gradient(left, #e5e5e5 0%, #e5e5e5 50%, #f8f8f8 51%, #f8f8f8 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e5e5e5), color-stop(50%, #e5e5e5), color-stop(51%, #f8f8f8), color-stop(100%, #f8f8f8));
		background: -webkit-linear-gradient(left, #e5e5e5 0%, #e5e5e5 50%, #f8f8f8 51%, #f8f8f8 100%);
		background: -o-linear-gradient(left, #e5e5e5 0%, #e5e5e5 50%, #f8f8f8 51%, #f8f8f8 100%);
		background: -ms-linear-gradient(left, #e5e5e5 0%, #e5e5e5 50%, #f8f8f8 51%, #f8f8f8 100%);
		background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 50%, #f8f8f8 51%, #f8f8f8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f8f8f8',GradientType=1 );
	}

.v-prop .text {
	width: 77%;
	margin: 0 auto;
	padding-top: 15%;
}

.v-prop .text p {
	font-size: 14px;
}
.v-prop.mobile .text img {
	width: 74px;
	height: 64px;
}

#v-props h2 {
	margin-bottom: 20px;
}

.v-prop h3 {
	margin-bottom: 15px;
	font-size: 21px;
	color: #4176a6;
}

.vp-icon {
	height: 50px;
	width: 50px;
	margin: 0 auto 10px;
	background-image: url('//yabla.b-cdn.net/media.yabla.com/images/icons-vp.png');
	background-image: url('//yabla.b-cdn.net/media.yabla.com/images/icons-vp.svg');
	background-repeat: no-repeat;
}

.vp-icon.flag {
	background-position: top left;
}

.vp-icon.subtitles {
	background-position: -49px top;
}

.vp-icon.slow {
	background-position: -99px top;
}

.vp-icon.book {
	background-position: left -48px;
}

.vp-icon.rewind {
	background-position: -49px -48px;
}

.vp-icon.film {
	background-position: -99px -48px;
}

.classroom-illo figure{
	max-width: 200px;
	margin: 28px auto 0;
}

.classroom-illo figure img {
	width: 100%;
	height: auto;
}

/*
#pwa_install_app_container {
	display: none;
	position: fixed;
	width: 350px;	
	height: 150px;	
	bottom: 0;
	z-index: 10;
	background: #f6822b;
	color: #fff;
	box-shadow: 2px 4px 4px #333;
}
#pwa_install_app_container .close_btn {
	position: absolute;
	width: 34px;
	height: 34px;
	top: 5px;
	right: 5px;
	padding: 3px 8px;
	background: #f8f8f8;
	color: #f6822b;
	font-size: 30px;
	z-index: 15;
}
#pwa_install_app_container .close_btn:hover {
	cursor: pointer;
	background: #ddd;
}
#pwa_install_app_container .logo {
	position: absolute;	
	top: 5px;
	left: 5px;
}
#pwa_install_app_container .desc {
	position: absolute;
	top: -5px;
	left: 70px;
	font-size: 18px;
}
#pwa_install_app_container .desc .title {
	min-width: unset;
	font-size: 110%;
	color: #fff !important;
	text-align: left;
}
#pwa_install_app_container .desc .subtitle {
	color: #fff !important;
}
#pwa_install_app_container .install_btn {
	position: absolute;
	bottom: 10px;
	right: 5px;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 5px;
	background: #224a9a;
}
#pwa_install_app_container .install_btn:hover {
	cursor: pointer;
	background: #173672;
}
@media (max-width: 700px) {
	#pwa_install_app_container {
		width: 100%;
		height: 120px;
	} 	
}
*/
@media (max-width: 740px) {
		#v-props ul {
		margin-bottom: 0px;
	}
	.classroom-section-b .container {
		text-align: center;
	}
}
@media (max-width: 770px) {
	#sample-games .intro,
	#sample-videos .intro {
		max-width: 450px;
	}
	#hero.subscribe_button h1 small {
		font-size: 0.7em !important;
	}
	#sample-games .intro p, #sample-videos .intro p {
		font-size: 16px !important;
	}
}
@media (max-width: 640px) {
	#hero .play_button_icon {
		width: 80px !important;
		height: 80px !important;
		top: 45% !important;
	}
	#hero.subscribe_button {
	}
	#hero.subscribe_button .btn.cta {
		width: 100% !important;
		max-width: 90% !important;
		font-size: 140% !important;	
	}
	#hero.subscribe_button .info {
		width: 90% !important;
		margin: 0 auto;
	}
	.caption-overlay {
		font-size: 14px !important;
		margin-bottom: 10px !important; 
	}	
	.caption-overlay.top {
		bottom: 34px !important;
	}
	.caption-overlay {
		bottom: 0 !important;
	}
	#sample-games .intro,
	#sample-videos .intro {
   }
}
@media (max-width: 540px) {
		#hero .play-video {
		background-size: 90px;
	}

	#hero .play-video.offcenter {
		background-position: 96.6% 70%;
	}

	.classroom-illo figure {
		max-width: 150px;
	}

}
.vid-container figure {
	margin: 1em 10px;
	position:relative;
}
.caption-overlay {
	display: inline-block;
	background-color: rgba(0,0,0,.7);
	position: absolute;
	bottom:15px;
	color:#fff;
	padding:4px;
	font-size: 18px;
	min-width: 240px;
	border-radius: 5px;
	text-align: left;
	line-height: 1.5;
	left:15px;
}
.caption-overlay.top {
	bottom:58px;
}
.trailer figure {
	margin:0 0 0 0;
}
figure .info {
	padding: 20px;
	text-align: center; 
	color:#4176a6;
}
.trailer img {
	display: block;
}
.trustpilot_wrap {
	padding:30px 0;
}

.classroom-section-b {
	display: block;
}


@media (min-width: 990px) {
	.classroom-section-b .container {
		border-top: 1px solid #dee2e4;
		border-bottom: 0;
		padding-top:30px;
	}
	#sample-games h2,
	#sample-videos h2 {
		padding-bottom:8px;
		margin-bottom: 0px;
	}
	/*
	#page-nav ul {
		display: block;
		position: absolute;
		top:-2px;
		left:270px;
	}
	.is_zh #page-nav ul {
		left: 270px;
	}
	#page-nav li:nth-child(2) a {
		border-left: 0;
	}
	header {
		padding-top:10px;
		height: 73px;
	}
	#pre-nav {
		padding-top: 10px;
	}
	header #site-lang {
		top:10px;
		left:150px;
		right:auto;
	}
	*/
}
@media (max-width: 1200px) {
	/*
	.is_zh #page-nav ul {
		left: 270px;
	}
	.is_zh #page-nav ul li:nth-child(5) {
		display: none;
	}
	.is_zh #page-nav ul li a {
		padding: 0 7px;
	}
	*/
}

.page h1 small_orange {
	display: block;
	font-weight: normal;
	margin-top: 15px;
	color: #f6822b;
	line-height: 1;
}
#hero.subscribe_button {
	padding-bottom: 96px;
}
#hero.subscribe_button .container {
	position: relative;
}
#hero.subscribe_button figure {
	display: inline-block;
	float: left;
	position: relative;
	margin-left: 128px;
}
#hero.subscribe_button figure img {
	height: 300px;
	width: auto;
}
#hero.subscribe_button .btn.cta {
	font-size: 200%;
	position: relative;
	top: 150px;
	-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
			transform: translateY(-50%);
	float: right;
	margin-right: 128px;
	max-width: 360px;
	white-space: normal;
}
#hero.subscribe_button .info {
	bottom: -96px;
	left: 0;
	position: absolute;
	width: 100%;
}
#hero.subscribe_button .info a {
	color: #f6822b;
	text-decoration: underline;
}
.demo-games.wrapper {
	height: 226px;
}
.demo-games.wrapper:hover {
	border: 2px solid #4176a6;
}
.demo-games.wrapper .image-desc {
	position: absolute;
	width: 100%;
	height: calc(100% - 50px);
	top: 0;
	left: 0;
	background: #fff;
}
.demo-games.wrapper .image-desc img {
	width: 100%;
	height: 100%;
}
.demo-games.wrapper.speak .image-desc {
	padding: 50px 0;
	text-align: center;
}
.demo-games.wrapper.speak .image-desc .fa-microphone {
	font-size: 5em;
	color: #777;
}
.demo-games.wrapper.vocab .image-desc {
	padding: 0 6%;
	background: #fff;
}
.demo-games.wrapper .bottom {
	position: absolute;
	width: 100%;
	height: 50px;
	padding: 18px 0;
	left: 0;
	bottom: 0;
	background: #f6822b;
	color: #fff;
	text-align: center;
}
#hero.subscribe_button figure img.play-video.super_border:hover {
	cursor: default;
}
@media (max-width: 1200px) {
	#hero.subscribe_button h1 {
		font-size: 32px;
	}
	#hero.subscribe_button h1 small {
		font-size: 0.8em;
	}

	#hero.subscribe_button figure {
		display: block;
		margin: 0;
		float: none;
	}
	#hero.subscribe_button figure img {
		display: inline-block;
		max-width: 90%;
		height: auto;
	}
	#hero.subscribe_button figure .caption-overlay {
		left: 50%;
		-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
		margin-bottom: 1em;
	}
	#hero.subscribe_button .btn.cta {
		top: unset;
		-webkit-transform: unset;
			-ms-transform: unset;
				transform: unset;
		float: unset;
		margin: 1em 0;
	}
}

</style>



<script>
    var _errs=["4f7c3eade39dc3072a04f6e9"];(function(a,b){ a.onerror=function(){ _errs.push(arguments)};
    var d=function(){ var a=b.createElement("script"),c=b.getElementsByTagName("script")[0];
    a.src="/js/error_beacon.js";a.async=!0;
    c.parentNode.insertBefore(a,c)};a.addEventListener?a.addEventListener("load",d,!1):
    a.attachEvent("onload",d)})(window,document);
</script>
<!-- pass user id to GA4 ONLY if not affiliated with k12 school -->
<script>
	var CDN_HOST = "//yabla.b-cdn.net/media.yabla.com";
	var LOGGED_IN = false;
	var USER_ID = 0;
	var IS_USER_K12 = false;
	var BLOCK_COMMENTS = false;

	if (LOGGED_IN && !IS_USER_K12) {
    window.dataLayer = window.dataLayer || [];
	  function gtag(){ dataLayer.push(arguments); }
			gtag('config', 'G-E5BTRMRHYP',{
				'user_id': USER_ID
	  });
	}
</script>

<script type='text/javascript' src="//yabla.b-cdn.net/media.yabla.com/js/jquery.min.js"></script>
<script src="//yabla.b-cdn.net/media.yabla.com/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/ogvjs-1.8.9/ogv.js"></script>

<script>
$(function(){

	function hideDropdowns(){
		$('.dropdown').hide();
		edMenuDismiss(true);
	}
	$('header .user').on('click touchend',function(e){
		e.stopPropagation();
		e.preventDefault();
		var $user_dd = $('header .user-dropdown');
		if($user_dd.is(':visible')) {
			$(window).off('.user-dd');
			$user_dd.hide();
			return;
		}
		hideDropdowns();
		$user_dd.show();
		$(window).on('click.user-dd touchend.user-dd',function (e){
			console.log("window click ");
			console.log(e);
			if($(e.target).closest('.dropdown').length) {
				console.log("event contains target");
				return;
			}
			$user_dd.hide();
			$(window).off('.user-dd');
		});
	});
	$('header .select-lang').on('click touchend',function(e){
		e.stopPropagation();
		e.preventDefault();
		var $lang_dd = $('header .lang-dropdown');
		if($lang_dd.is(':visible')) {
			$(window).off('.lang-dd');
			$lang_dd.hide();
			return;
		}
		hideDropdowns();
		$lang_dd.show();
		$(window).on('click.lang-dd touchend.lang-dd',function (e){
			if($(e.target).closest('.dropdown').length) return;
			$lang_dd.hide();
			$(window).off('.lang-dd touchend.lang-dd');
		});
	});
	$('header .translate-link').on('click touchend',function(e){
		e.stopPropagation();
		var $translate_dd = $('header .translate-dropdown');
		if($translate_dd.is(':visible')) {
			$(window).off('.lang-dd');
			$translate_dd.hide();
			return;
		}
		hideDropdowns();
		$translate_dd.show();
		$(window).on('click.trans-dd touchend.trans-dd',function (e){
			if($(e.target).closest('.dropdown').length) return;
			$translate_dd.hide();
			$(window).off('.trans-dd');
		});
	});
	$('header .mobile_slide').on('touchend click',function(e){
		e.stopPropagation();
	});
	$('header .mobile_slide .close_link').on('touchend click',function(){
		$('header .mobile_slide').removeClass('active');
		$('body').off('.burger');
	});
	$('header #site-hamburger').on('click',function(e){
		e.preventDefault();
		e.stopPropagation();
		$('header .mobile_slide').addClass('active');
		$('body').on('touchend.burger click.burger',function(e){
			if($(e.target).closest('.mobile_slide').length) {
				return;
			} else {
				$('header .mobile_slide').removeClass('active');
				$('body').off('.burger');
			}
		});
	});


	$('.ed_menu_btn').on('click touchend',function(e) {
		e.stopPropagation();
		e.preventDefault();
		
		if($(this).hasClass('showing')) {
			edMenuDismiss();
		} else {
			hideDropdowns();
			edMenuShow();
			$('body').on('click.ed_cancel touchend.ed_cancel',function(e){
				if($(e.target).closest('#modal_master').length) {
					return;
				}
				
				edMenuDismiss();
				$(this).off('.ed_cancel');
			});
		}
	})

	$('.ed_menu').find('a').on('click touchend',function(e){
		e.stopPropagation();
	}).end()

	var ed_interval;
	var history_pushes = 0;
	function  edMenuShow() {
		if(history_pushes == 0) {
			window.history.pushState({ action: 'ed_menu_show' }, 'Educators Menu');
			history_pushes++;
			$(window).on('popstate.ed_pop',function(e) {
				history_pushes--;
				edMenuDismiss();
			});
		}
		
		clearTimeout(ed_interval);
		$('.ed_menu').show().stop().removeClass('hiding');
		$('.ed_menu_btn').addClass('showing');
		// refresh if expired...
		$.get('ed_menu_check.php',
			{ last_changed_at: $('.ed_menu').data('last_changed_at') },
			function(data){
				if(data.html) {
					// a bit ugly, but prevents flickering
					$('.ed_menu .ed_menu_inner').replaceWith( $(data.html).find('.ed_menu_inner') );
				}
				
			});
	}
	function edMenuDismiss(fast) {
		// 
		if(history_pushes == 1) {
			window.history.back();
			return;
		}
		$('.ed_menu').addClass('hiding');
		ed_interval = setTimeout(function(){
			$('.ed_menu').hide();
		},fast ? 0 : 400)
		
		$('.ed_menu_btn').removeClass('showing');
		$(window).off('.ed_pop');
		
	}
	$('.ed_menu .invite').on('click',function(e){
		e.preventDefault();
		e.stopPropagation();
		var $dialog = $('.ed_code_signup')
			.addClass('hide_teacher_text hide_student_text')
			.removeClass('hide_' + $(this).data('user_type') + '_text');

		$dialog.find('[name=code_url]').val( $(this).data('url') );
		$dialog.find('.text_code').text( $(this).data('code') );
		Modal_Master.show($('.ed_code_signup'));
		$dialog.find('[name=code_url]').focus();
	})

})

</script>

<script>
	// file="../js/mediabook.js"
	"use strict";

if( !('ontouchstart' in window)) {
	$(function(){
		var $v;
		$('body').on('mouseenter','figure[data-mediabook]',function(e){
			e.preventDefault();
			e.stopPropagation();
			var $img = $(this).find('img').eq(0);
			var mb_src = $(this).data('mediabook');
			var img_rect = $img[0].getBoundingClientRect();
			var img_height = img_rect.height;
			if(!mb_src) return;

			$v && $v.remove();
			$v = $('<video />')
				.prop('loop',true)
				.prop('autoplay',true)
				.prop('preload',true)
				.attr('src',mb_src)
				.css('width','100%')
				.css('display','none')
				.css('height',img_height)
				.insertAfter( $img )
				.on('canplaythrough',function(e){
					$(this).show();
					$img.hide();
					// var prom = this.play();
					$(this).off('canplaythrough');
				});
			$v[0].play();

		}).on('mouseleave','figure[data-mediabook]',function(){
			$(this).find('img').show();
			$(this).find('video').remove();
		});
	});
}</script>
<script>
	// file="../js/newsletter.js"
	var NLBar = (function() {
  	var $bar, height = 80, offset = 8;
  	var _init = function(opts,strings) {
		 // Add items into bar
		$bar = $('<div id="NLBar" ><div class="inner"></div></div>').hide();
		$bar.find('.inner')
				.append('<span class="tagline">' + strings.tagline +'</span>')
				.append('<form id="frmNL" action="mailing_list.php"></form>')
				.find('#frmNL')
					.append( $('<input type="hidden" name="source" id="NL_source" />').val(opts.source) )
					.append('<button type="submit" class="btn" id="NL_submit">'+ strings.signup +'</button>')
					.end()
				.append('<a href="#" class="no_show">' + strings.noshow + '</a>')
				.append('<div id="resp"></div>')
				.end()
			.appendTo($('body'));

		 // Animate the bar
		$bar.show().css("bottom",$bar.outerHeight()*-1)
			.animate({ bottom:0 },1000,
				function() {
					// focus after animation to prevent auto scroll
	  				$('#NL_fname').focus();
			});
		$bar.find('.no_show').click(function(e) {
			var expiryDate = new Date();
			expiryDate.setDate(expiryDate.getDate()+2);      // 2 days cookie expiration date for dismiss
			document.cookie = 'no_show_leader=1;expires=' + expiryDate.toGMTString();
			$bar.fadeOut("fast");
			return false;
		});
		
  };

  return {
	 show: function(opts,strings) {
		if(opts.delay > 0){
		  setTimeout( function() {
				  _init(opts,strings);
				}, opts.delay);
		} else {
		  _init(opts,strings);
		} 
	 }
  };
})();



</script>

<script>

		(function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		} )(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	// TODO: (GTM) connect user_id through GTM
		ga('create', {
			trackingId: 'UA-237894-17',
			cookieDomain: 'auto',
					});

					ga('set','campaignSource','Yabla');
			ga('set','campaignMedium','Internal Affiliate');
			ga('set','campaignName','lenguajero.com domain acquisition');
		
		
											ga('set', 'dimension4', 'non-subscriber');
			
		
		window.optimizely = window.optimizely || [];
		window.optimizely.push("activateUniversalAnalytics");

		ga('require', 'displayfeatures');
		ga('send', 'pageview');

</script>

    <!-- Dont do any tracking if user logged in from admin -->
            <!-- Global site tag (gtag.js) - Google Ads: 1068646977 AND 671357379-->
        <script async src="https://www.googletagmanager.com/gtag/js?id=AW-1068646977"></script>
        <script async src="https://www.googletagmanager.com/gtag/js?id=AW-671357379"></script>
        <!-- Google tag (gtag.js) for NEW GA4 -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-E5BTRMRHYP"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){ dataLayer.push(arguments); }
          gtag('js', new Date());
          gtag('config', 'G-E5BTRMRHYP');
        </script>
        <!-- END of New stuff Google tag (gtag.js) for NEW GA4 -->
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){ dataLayer.push(arguments); }
          gtag('js', new Date());
          gtag('config', 'AW-1068646977');
          gtag('config', 'AW-671357379');
        </script>

        <!-- Google Tag Manager -->
        <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-P697V42');
        </script>
        <!-- End Google Tag Manager -->

      <!-- Tracking for customer.io -->
                  
          <script>
            !function(){var i="cioanalytics", analytics=(window[i]=window[i]||[]);if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Customer.io snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-customerio-analytics-key",i);t.src="https://cdp.customer.io/v1/analytics-js/snippet/"+key+"/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._writeKey=key;analytics._loadOptions=n};analytics.SNIPPET_VERSION="4.16.1";
            analytics.load("189d415c5beb5d3b6b8a");
            analytics.page();
            }}();
          </script>
          
            


	<script>
		$(function(){
			ga('send', 'pageview', '/conversion_funnel/landing/Ver3');
		});
	</script>
	<script>
// test bandwidth... write cookie.  
$(function() {
	function setCookie(cname, cvalue, exdays) {
	    var d = new Date();
	    d.setTime(d.getTime() + (exdays*24*60*60*1000));
	    var expires = "expires="+ d.toUTCString();
	    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}
	var bw_cookie_val = document.cookie.match(/bw\=(\d+)/);
	bw_cookie_val = bw_cookie_val ? +bw_cookie_val[1] : null;

	// DISABLED FOR NOW
	if(false && !bw_cookie_val) {
		$(window).on('load',function(){
			window.setTimeout(function(){
				var bw_load_start = Date.now();
				$('<img />')
					.attr('src',
						'//yabla.b-cdn.net/media.yabla.com/images/speedtest_404k.jpg?'
						+ Math.random()
					)
					.css({ width:1, height: 1, opacity:.1 })
					.appendTo('body')
				.on('load',function(){
					var bw_elapsed = Date.now() - bw_load_start;
					var bw_kbps = Math.round(404*8 / bw_elapsed * 1000);
					setCookie('bw',bw_kbps,7);
				});
			},1000);
		});
	}


});


</script>




<!-- Dont do any tracking if user logged in from admin -->
<!-- Customer.io: identify logged-in users so page views and events are attributed to them -->
    <!-- Tracking for customer.io -->
                    

</head>
<body class="page language Spanish ">

	
	


		
	
		<script>
	// handle overlapping of username with page-nav
	document.addEventListener('DOMContentLoaded', function () {
		var absoluteDiv = document.querySelector('.user-opts');
		var relativeDiv = document.querySelector('#page-nav ul li:last-child');
		if (absoluteDiv && relativeDiv) { 
			function checkOverlap(relativeDiv, absoluteDiv) {
				var relativeRect = relativeDiv.getBoundingClientRect();
				var absoluteRect = absoluteDiv.getBoundingClientRect();

				return !(relativeRect.right < absoluteRect.left ||
							 relativeRect.left > absoluteRect.right ||
							 relativeRect.bottom < absoluteRect.top ||
							 relativeRect.top > absoluteRect.bottom);
			}

			function handleOverlap() {
				if (checkOverlap(relativeDiv, absoluteDiv)) {
					$('header.logged-in').addClass('username_overlap_fix');
					$('#site-title').addClass('username_overlap_fix');
					$('#page-nav').addClass('username_overlap_fix');
					$('#user-opts').addClass('username_overlap_fix');
					window.removeEventListener('resize', handleOverlap)
				}
			}
			window.addEventListener('resize', handleOverlap)
			handleOverlap();
		}
	})
</script>
<header class="not-logged-in  ">
	<div class="container">
		<div class="row">

			<div id="site-title" class="mast"><a href="/"><svg width="130" height="45" viewBox="0 0 130 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="letters" d="M47.1004 33.7999L41.2004 19.7C41.0004 19.2 40.9004 18.8 40.9004 18.4C40.9004 17.8 41.2004 17.2999 41.7004 16.7999C42.2004 16.3999 42.8004 16.2 43.4004 16.2C44.0004 16.2 44.6004 16.4 45.0004 16.7C45.5004 17 45.8004 17.5 46.0004 18L49.6004 27.6L53.5004 18C53.7004 17.4 54.1004 17 54.5004 16.7C55.0004 16.4 55.5004 16.2 56.1004 16.2C56.7004 16.2 57.3004 16.3999 57.8004 16.7999C58.3004 17.1999 58.6004 17.7 58.6004 18.4C58.6004 18.9 58.5004 19.3 58.3004 19.7L49.7004 41C49.1004 42.3 48.3004 43 47.2004 43C46.4004 43 45.7004 42.7999 45.2004 42.2999C44.7004 41.8999 44.4004 41.2999 44.4004 40.7999C44.4004 40.3999 44.5004 39.8999 44.7004 39.2999L47.1004 33.7999Z" fill="#224A9A"/>
<path class="letters" d="M78.1006 19.6V32.2C78.1006 33.2 78.0006 34 77.7006 34.6C77.4006 35.2 76.7006 35.5 75.6006 35.5C74.9006 35.5 74.3006 35.3 73.9006 35C73.5006 34.6 73.2006 34.1 73.0006 33.4C71.6006 35 69.9006 35.8 67.9006 35.8C66.3006 35.8 64.8006 35.4 63.4006 34.5C62.1006 33.7 61.0006 32.5 60.2006 31C59.4006 29.5 59.1006 27.8 59.1006 25.9C59.1006 24.1 59.5006 22.4 60.3006 20.9C61.1006 19.4 62.1006 18.2 63.5006 17.3C64.8006 16.4 66.3006 16 67.9006 16C68.9006 16 69.8006 16.2 70.8006 16.6C71.7006 17 72.4006 17.6 73.0006 18.3C73.1006 17.7 73.4006 17.2 73.8006 16.8C74.3006 16.4 74.9006 16.2 75.5006 16.2C76.6006 16.2 77.3006 16.5 77.6006 17.1C78.0006 17.8 78.1006 18.6 78.1006 19.6ZM64.5006 25.9C64.5006 26.8 64.7006 27.6 65.0006 28.4C65.3006 29.2 65.8006 29.8 66.4006 30.3C67.0006 30.8 67.8006 31 68.7006 31C70.0006 31 71.0006 30.5 71.7006 29.4C72.4006 28.4 72.8006 27.2 72.8006 25.8C72.8006 24.9 72.6006 24.1 72.3006 23.3C72.0006 22.5 71.5006 21.8 70.9006 21.3C70.3006 20.8 69.5006 20.5 68.7006 20.5C67.8006 20.5 67.0006 20.8 66.4006 21.3C65.8006 21.8 65.3006 22.5 65.0006 23.3C64.7006 24.2 64.5006 25.1 64.5006 25.9Z" fill="#224A9A"/>
<path class="letters" d="M80.8008 32.7V10.9C80.8008 10.1 81.0008 9.4 81.5008 8.9C82.0008 8.3 82.7008 8 83.5008 8C84.0008 8 84.5008 8.1 84.9008 8.4C85.3008 8.6 85.6008 9 85.8008 9.4C86.0008 9.8 86.1008 10.3 86.1008 10.9V17.8C86.8008 17.2 87.6008 16.8 88.4008 16.5C89.3008 16.2 90.2008 16 91.1008 16C92.9008 16 94.5008 16.5 95.8008 17.4C97.1008 18.4 98.1008 19.6 98.7008 21.2C99.4008 22.7 99.7008 24.4 99.7008 26.1C99.7008 27.7 99.3008 29.3 98.6008 30.7C97.9008 32.2 96.8008 33.4 95.5008 34.3C94.2008 35.2 92.6008 35.7 90.9008 35.7C89.9008 35.7 89.0008 35.5 88.1008 35.1C87.2008 34.7 86.5008 34.1 86.0008 33.4C85.6008 34.8 84.7008 35.5 83.3008 35.5C82.5008 35.5 81.9008 35.2 81.4008 34.7C81.0008 34.2 80.8008 33.5 80.8008 32.7ZM86.1008 25.7C86.1008 27.1 86.5008 28.3 87.2008 29.4C87.9008 30.5 88.9008 31 90.3008 31C91.2008 31 91.9008 30.7 92.6008 30.2C93.2008 29.7 93.7008 29 94.0008 28.3C94.3008 27.5 94.5008 26.7 94.5008 25.9C94.5008 25 94.3008 24.2 94.0008 23.4C93.7008 22.6 93.2008 21.9 92.6008 21.4C92.0008 20.9 91.2008 20.6 90.3008 20.6C89.4008 20.6 88.6008 20.8 88.0008 21.3C87.4008 21.8 86.9008 22.4 86.6008 23.2C86.3008 24 86.1008 24.9 86.1008 25.7Z" fill="#224A9A"/>
<path class="letters" d="M101.601 32.7V10.9C101.601 10.1 101.801 9.39997 102.301 8.89997C102.801 8.39997 103.401 8.09998 104.201 8.09998C104.701 8.09998 105.201 8.19998 105.601 8.49998C106.001 8.69998 106.301 9.09998 106.501 9.49998C106.701 9.89998 106.801 10.4 106.801 11V32.8C106.801 33.4 106.701 33.8 106.501 34.3C106.301 34.7 106.001 35.1 105.501 35.3C105.101 35.5 104.601 35.7 104.101 35.7C103.301 35.7 102.701 35.4 102.201 34.9C101.801 34.2 101.601 33.5 101.601 32.7Z" fill="#224A9A"/>
<path class="letters" d="M127.7 19.6V32.2C127.7 33.2 127.6 34 127.3 34.6C127 35.2 126.3 35.5 125.2 35.5C124.5 35.5 123.9 35.3 123.5 35C123.1 34.6 122.8 34.1 122.6 33.4C121.2 35 119.5 35.8 117.5 35.8C115.9 35.8 114.4 35.4 113 34.5C111.7 33.7 110.6 32.5 109.8 31C109 29.5 108.7 27.8 108.7 25.9C108.7 24.1 109.1 22.4 109.9 20.9C110.7 19.4 111.7 18.2 113.1 17.3C114.4 16.4 115.9 16 117.5 16C118.5 16 119.4 16.2 120.4 16.6C121.3 17 122 17.6 122.6 18.3C122.7 17.7 123 17.2 123.4 16.8C123.9 16.4 124.5 16.2 125.1 16.2C126.2 16.2 126.9 16.5 127.2 17.1C127.5 17.8 127.7 18.6 127.7 19.6ZM114 25.9C114 26.8 114.2 27.6 114.5 28.4C114.8 29.2 115.3 29.8 115.9 30.3C116.5 30.8 117.3 31 118.2 31C119.5 31 120.5 30.5 121.2 29.4C121.9 28.4 122.3 27.2 122.3 25.8C122.3 24.9 122.1 24.1 121.8 23.3C121.5 22.5 121 21.8 120.4 21.3C119.8 20.8 119 20.5 118.2 20.5C117.3 20.5 116.5 20.8 115.9 21.3C115.3 21.8 114.8 22.5 114.5 23.3C114.2 24.2 114 25.1 114 25.9Z" fill="#224A9A"/>
<path class="tv_lines" d="M32.0489 38.2078L9.7048 39.1057L7.30462 36.9473V35.5486L4.38641 27.1739L2.84961 20.0597L3.62665 16.7616L15.9211 15.1212L29.5106 16.7616L34.4491 18.0394L36.1068 20.0597L33.5685 35.5486L32.0489 38.2078Z" fill="white"/>
<path class="tv_lines" d="M6.60352 34.844C10.7784 34.844 12.5315 29.922 12.5315 29.922C12.5315 29.922 15.1429 22.8409 21.542 23.2773C26.7842 23.6945 27.5722 21.882 27.47 17.1248" stroke="#F6822B" stroke-width="3.14738" stroke-linecap="square" stroke-linejoin="round"/>
<path class="tv_lines" d="M14.3711 38.97C17.028 37.6421 17.3796 34.3584 18.0907 31.7995C19.4192 27.0192 24.4673 28.4884 27.3899 27.8159C32.4784 26.645 34.0321 21.4421 34.0321 16.3962" stroke="#F6822B" stroke-width="2.09825"/>
<path class="tv" d="M31.5999 15.1C29.7999 14.8 26.5999 14.1 22.2999 13.7C22.4999 12.3 22.9999 10.3 24.1999 8.7C24.3999 8.8 24.5999 8.8 24.7999 8.8C25.7999 8.8 26.5999 8 26.5999 6.9C26.5999 5.9 25.7999 5.1 24.6999 5.1C23.6999 5.1 22.8999 5.9 22.8999 7C22.8999 7.2 22.8999 7.4 22.9999 7.6C21.3999 9.5 20.7999 11.9 20.5999 13.6C19.6999 13.5 18.6999 13.5 17.6999 13.4C17.4999 11.9 16.6999 8.9 14.5999 6.7C14.6999 6.5 14.7999 6.2 14.7999 5.9C14.8999 4.8 13.9999 4 12.9999 4C11.9999 4 11.1999 4.8 11.1999 5.9C11.1999 6.9 11.9999 7.7 13.0999 7.7C13.1999 7.7 13.3999 7.7 13.4999 7.6C15.2999 9.3 15.8999 11.8 16.1999 13.2C13.1999 13.1 9.7999 13.2 6.0999 13.6C0.299899 14.3 1.0999 19 1.0999 19C1.0999 19 1.9999 26.4 4.4999 36.2C5.4999 40.2 10.8999 39.9 10.8999 39.9L13.2999 39.8L12.1999 41.1C12.1999 41.1 11.3999 42.2 12.7999 42.3C14.1999 42.3 15.3999 42.6 15.7999 42C15.9999 41.7 16.7999 40.6 17.4999 39.7L22.1999 39.5C22.8999 40.5 23.6999 41.6 23.9999 41.9C24.3999 42.5 25.5999 42.2 26.9999 42.2C28.3999 42.2 27.5999 41 27.5999 41L26.1999 39.4L29.9999 39.3C33.2999 39.3 34.0999 37.8 34.5999 35.8C36.3999 28.9 36.9999 25.7 37.1999 20.9C37.4999 16.2 35.1999 15.7 31.5999 15.1ZM34.0999 21.9C33.8999 25.8 33.3999 28.4 31.8999 34.1C31.4999 35.8 30.7999 36.9 28.0999 37L12.2999 37.6C12.2999 37.6 7.8999 37.8 6.9999 34.6C4.8999 26.6 4.1999 20.5 4.1999 20.5C4.1999 20.5 3.4999 16.6 8.1999 16.1C18.7999 15.1 26.3999 16.7 29.2999 17.2C32.2999 17.8 34.2999 18.2 34.0999 21.9Z" fill="#224A9A"/>
</svg>
</a></div>
			
			<nav id="pre-nav">
				
								<div class="page-translation">
					<span class="translate-link">
						<label>Translate page:</label>
						<span> <i class="fa fa-chevron-down"></i></span>
					</span>
					<div class="dropdown translate-dropdown">
						<ul>
														<li>
								<a href="https://spanish.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-en.png" alt="Translation-Language-English" class="flag-indicator" /> 
									English <span class="check">✓</span>
								</a>
							</li>
														<li>
								<a href="https://espagnol.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-fr.png" alt="Translation-Language-Français" class="flag-indicator" /> 
									Français <span class="check"></span>
								</a>
							</li>
														<li>
								<a href="https://spanisch.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-de.png" alt="Translation-Language-Deutsch" class="flag-indicator" /> 
									Deutsch <span class="check"></span>
								</a>
							</li>
														<li>
								<a href="https://espanol.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-es.png" alt="Translation-Language-Español" class="flag-indicator" /> 
									Español <span class="check"></span>
								</a>
							</li>
														<li>
								<a href="https://spagnolo.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-it.png" alt="Translation-Language-Italiano" class="flag-indicator" /> 
									Italiano <span class="check"></span>
								</a>
							</li>
														<li>
								<a href="https://espanhol.yabla.com/?ref=lenguajero&amp;a=1484">
									<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-pt.png" alt="Translation-Language-Português" class="flag-indicator" /> 
									Português <span class="check"></span>
								</a>
							</li>
													</ul>
					</div>
					
				</div>
								<a href="login.php" class="btn outline login-button">Log In</a>
				<a href="subscribe.php" class="btn yabla-blue subscribe-button-y">Subscribe</a>
			</nav>
		</div>

		<div class="row">
			<nav id="page-nav">
				<ul>
									<li>
						<a href="/fluency_club_new.php" class=" ">
							Fluency Club
						</a>
					</li>
									<li>
						<a href="/./" class="active ">
							Home
						</a>
					</li>
									<li>
						<a href="/videos.php" class=" ">
							Videos
						</a>
					</li>
									<li>
						<a href="/review.php" class=" ">
							Review
						</a>
					</li>
									<li>
						<a href="/leaderboard.php" class=" ">
							Leaderboard
						</a>
					</li>
									<li>
						<a href="/live_classes.php" class=" ">
							Live Learning (beta)
						</a>
					</li>
									<li>
						<a href="/free-dictionary.php" class=" ">
							Dictionary
						</a>
					</li>
									<li>
						<a href="/lessons.php" class=" ">
							Lessons
						</a>
					</li>
									<li>
						<a href="/classroom.php" class=" ">
							Educators
						</a>
					</li>
								</ul>
				
			</nav>

			<div id="site-lang">
				<a href="#" class="select-lang lang-button">
										<img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-es.png" alt="Product-Language-Spanish" width=20 height=20 class="lang-indicator">
					<span class="product-name">Spanish</span><i class="fa fa-chevron-down"></i>
									</a>
				<div class="lang-dropdown dropdown">
					<ul>
						<li class="label" style="font-weight:bold;font-size:14px">Learn</li>
												<li><a href="https://spanish.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-es.png" alt="Product-Language-Spanish" class="lang-ind" /> Spanish</a></li>
												<li><a href="https://french.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-fr.png" alt="Product-Language-French" class="lang-ind" /> French</a></li>
												<li><a href="https://german.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-de.png" alt="Product-Language-German" class="lang-ind" /> German</a></li>
												<li><a href="https://italian.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-it.png" alt="Product-Language-Italian" class="lang-ind" /> Italian</a></li>
												<li><a href="https://chinese.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-zh.png" alt="Product-Language-Chinese" class="lang-ind" /> Chinese</a></li>
												<li><a href="https://english.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-en.png" alt="Product-Language-English" class="lang-ind" /> English</a></li>
											</ul>
				</div>
				
			</div>
		</div>
		<div id="site-hamburger"><i class="fa fa-navicon"></i></div>
	</div><!-- end container -->

	<div class="mobile_slide">
		
		<div class="mobile_scroll">
			<div class="close_link"><i class="fa fa-times"></i></div>
			<div class="mobile_product_name">Yabla Spanish</div>
			<ul class="links">
							<li >
					<a href="/fluency_club_new.php" class="">
												Fluency Club
					</a>
				</li>
							<li >
					<a href="/./" class="active">
												Home
					</a>
				</li>
							<li >
					<a href="/videos.php" class="">
												Videos
					</a>
				</li>
							<li >
					<a href="/review.php" class="">
												Review
					</a>
				</li>
							<li >
					<a href="/leaderboard.php" class="">
												Leaderboard
					</a>
				</li>
							<li >
					<a href="/live_classes.php" class="">
												Live Learning (beta)
					</a>
				</li>
							<li >
					<a href="/free-dictionary.php" class="">
												Dictionary
					</a>
				</li>
							<li >
					<a href="/lessons.php" class="">
												Lessons
					</a>
				</li>
							<li >
					<a href="/classroom.php" class="">
												Educators
					</a>
				</li>
						</ul>
			<ul class="learn_options">
				<li class="label">Learn</li>
								<li><a href="https://spanish.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-es.png" alt="Product-Language-Spanish" class="lang-ind" /> Spanish</a></li>
								<li><a href="https://french.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-fr.png" alt="Product-Language-French" class="lang-ind" /> French</a></li>
								<li><a href="https://german.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-de.png" alt="Product-Language-German" class="lang-ind" /> German</a></li>
								<li><a href="https://italian.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-it.png" alt="Product-Language-Italian" class="lang-ind" /> Italian</a></li>
								<li><a href="https://chinese.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-zh.png" alt="Product-Language-Chinese" class="lang-ind" /> Chinese</a></li>
								<li><a href="https://english.yabla.com/"><img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-lang-en.png" alt="Product-Language-English" class="lang-ind" /> English</a></li>
							</ul>
							<ul>
				<li class="label">Translate Page</li>
									<li class="translation">
						<a href="https://spanish.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-en.png" alt="Translation-Language-English" class="flag-indicator" /> 
							English <span class="check">✓</span>

						</a>
					</li>
									<li class="translation">
						<a href="https://espagnol.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-fr.png" alt="Translation-Language-Français" class="flag-indicator" /> 
							Français <span class="check"></span>

						</a>
					</li>
									<li class="translation">
						<a href="https://spanisch.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-de.png" alt="Translation-Language-Deutsch" class="flag-indicator" /> 
							Deutsch <span class="check"></span>

						</a>
					</li>
									<li class="translation">
						<a href="https://espanol.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-es.png" alt="Translation-Language-Español" class="flag-indicator" /> 
							Español <span class="check"></span>

						</a>
					</li>
									<li class="translation">
						<a href="https://spagnolo.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-it.png" alt="Translation-Language-Italiano" class="flag-indicator" /> 
							Italiano <span class="check"></span>

						</a>
					</li>
									<li class="translation">
						<a href="https://espanhol.yabla.com/?ref=lenguajero&amp;a=1484"> <img src="//yabla.b-cdn.net/media.yabla.com/images/lang_icons/icon-pt.png" alt="Translation-Language-Português" class="flag-indicator" /> 
							Português <span class="check"></span>

						</a>
					</li>
								</ul>
					</div>
	</div>
</header>

	
	
	

	<!--
	<div id="pwa_install_app_container">
		<span class="close_btn" id="pwa_close_btn">X</span>	
		<span class="logo"><img src="/images/pwa-icons/es/ios/64.png" alt="Yabla Logo"/></span>
		<span class="desc">
			<div class="title">Yabla Spanish</div>
			<div class="subtitle">spanish.yabla.com</div>
		</span>
		<span class="install_btn" id="pwa_install_btn">Add to Homescreen</span>			
	</div>
	-->


<section id="hero" class="subscribe_button">
	<div class="container">
		<div class="row">
			<div class="intro">
					<h1>
													Watch a show, play a game, learn Spanish																			<small>Become fluent through immersive Spanish videos and engaging learning games.</small>
					</h1>
			</div>
		</div>
		<div class="row">
			<figure>
				<a href="player_cdn.php?id=15486&tlang_id=en" target="_self">
				<img class="play-video super_border" alt="Play Tutorial Video" src="//yabla.b-cdn.net/media.yabla.com/images/land/trailer-10.jpg?cache3" style="cursor: pointer"/>
				<div class="caption-overlay top">¡Bienvenidos a Yabla!</div>
									<div class="caption-overlay">Welcome to Yabla!</div>
								<div class="play_button_icon"></div>
				</a>
			</figure>
			<a class="btn cta" href="subscribe.php">Get 7 Days Free*</a>

			<div class="info">
				<h1><small>
									Watch as Karola shows you how to use the <a href="player_cdn.php?id=15486&tlang_id=en" target="_self">Yabla Player</a>.								</small></h1>
			</div>
		</div>
	</div>
</section>




<section id="sample-games">
	<a name="sample_videos"></a>
	<div class="container">

		<div class="row intro">
			<div class="col-md-6 col-md-offset-3">
				<h2>Try These Learning Tools</h2>
				<p>Subscribers access great learning tools that improve listening, comprehension, pronunciation, and vocabulary skills.</p>
			</div>
		</div>		

		<div class="row sample-videos">
			<div class="col-sm-6 col-md-4 sample">
				<div class="vid-container">
					<a class="gb demo-games wrapper scribe" href="scribe.php?media_id=15486">
						<span class="image-desc">
													<img src="//yabla.b-cdn.net/media.yabla.com/images/html5/dictation_tutorial_long.gif" alt="Dictation Picture">
												</span>
						<span class="bottom">SCRIBE<sup>TM</sup> (Listening Comprehension)</span>
					</a>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 sample">
				<div class="vid-container">
					<a class="gb demo-games wrapper speak" href="scribe_speech_speak.php?media_id=15486">
						<span class="image-desc"><i class="fa fa-microphone" aria-hidden="true"></i></span>
						<span class="bottom">SPEAK<sup>TM</sup> (Pronunciation)</span>
					</a>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 sample">
				<div class="vid-container">
					<a class="gb demo-games wrapper vocab" href="vocabulary-flashcard-review.php?media_id=15486">
						<span class="image-desc"><img src="/images/vocab_demo_img_es.png" alt="Vocabulary Demo Image"></span>
						<span class="bottom">Review Vocabulary</span>
					</a>
				</div>
			</div>
		</div>

	</div>
</section>

<section id="sample-videos">
	<a name="sample_videos"></a>
	<div class="container">
		<div class="row intro">
			<div class="col-md-6 col-md-offset-3">
				<h2>Try These Sample Videos</h2>
				<p>As a subscriber, you get access to our growing video library of 3700+ videos.</p>
			</div>
		</div>

					<style>
  #games_picker{
      position: absolute;
      bottom: 5px !important;
      right: 0px !important;
  }
  /* Scores Button */
  .activity_scores_btn{
      display: inline-block;
      padding: 6px 10px;
      color: white !important;
      font-weight: bold;
      background-color: orange;
      margin: 0 auto;
      border-radius: 5px;
      width: 100%;
      text-align: center;
  }
  .activity_scores_btn:hover{
      cursor: pointer;
  }
  /* Contains the popup buttons */
  .activity_popup_button_holder{
      display: flex;
      position: relative;
      gap: 4px;
  }
  /* The popup buttons */
  .activity_popup_button{
      display: inline-block;
      padding: 6px 4px;
      color: white !important;
      font-weight: bold;
      background-color: #f6822b;
      margin: 4px auto;
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, Arial, sans-serif;
  }
  .activity_popup_button:hover{
      color: #4176a6;
      transform: scale(1.05);
  }
  .activity_popup_button:hover .fa{
      scale: 1.2;
  }
  .activity_popup_button .fa{
      padding-right:6px;
      font-size: larger;
      scale: 1.1;
  }
  /* Popup and style changes for player  */
  .activity_popup{
      background-color: #fff;
      border-radius: 25px;
      border: 2px solid #f6822b;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
      z-index: 100;
      width: max-content;
			min-width: 300px;
  }
  .player_activity_popup{
      top: unset !important;
      bottom:36px;
      right: 0px !important;
      transform: unset;
      left: unset;
  }
  /* Popup close button */
  .activity_popup_close {
      position: absolute;
      top: 0px;
      right: 0;
      padding:10px;
      font-size: x-large;
      color: gray;
  }
  .activity_popup_close:hover {
      cursor:pointer;
  }
  /* Popup elements */
  .activity_popup_video_title{
      font-style: italic;
      padding: 14px 2px;
      border-top: 1px solid black;
  }
  .activity_popup ul{
      font-family: 'Archivo Narrow', sans-serif;
      font-weight: 700;
      line-height: 1.15;
  }
	.activity_popup ul .activity_li {
		position: relative;	
	}
  .player_activity_popup ul{
      padding: 0px;
  }
  .activity_popup h2{
      color: #f6822b;
      font-weight: bold;
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      margin-bottom: 15px;
  }
  .activity_popup h2 .fa-walking, .activity_popup h2 .fa-running{
      padding-right: 12px;
  }
  .activity_popup .activity_li{
      border-top: 1px solid black;
      padding: 0 10px;
      padding-bottom: 40px;
      color: black;
      display: block !important;
  }
  .activity_popup .activity_li:hover{
      background-color: #e7edf5;
      cursor: pointer;
  }
  .player_activity_popup .activity_li{
      padding-bottom: 50px;
  }
	.activity_popup .activity_li .new_video {
		position: absolute;
    height: 30px;
    width: 30px;
    top: 12px;
    right: 8px;
    background-image: url(/images/star.png);
    background-size: 30px;
	}
  .activity_title {
      font-size: 16px;
      font-weight: bold;
      float: left;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 4px;
      margin-left: 0px;
  }
	.activity_title a{
      color: #4176a6;
  }
  .player_activity_popup .activity_title{
      width:unset;
  }
  
  .activity_description {
      float: left;
      width: 100%;
			margin-bottom: 4px;
			color: #333;
  }
  .player_activity_popup .activity_description{
      margin: 0;
  }
  /* Trophy Styles */
  .activity_popup .trophies {
      display: inline-block;
      vertical-align: top;
      padding: 10px 8px 0 16px;
      min-width: 15px;
      float: right;
  }
  .activity_popup .trophies .wrapper .count {
      position: relative;
      top: 15px;
      left: -15px;
  }
  .activity_popup .trophies .wrapper.gold .count {
      color: gold;
  }
  .activity_popup .trophies .wrapper.silver .count {
      color: silver;
  }
  .activity_popup .trophies .wrapper.bronze .count {
      color: #ec9d61; 
  }
  .activity_popup .trophies .trophy{
      width:20px;
  }
  .activity_popup .trophies .trophy.double_digit {
      position: relative;
      left: 4px;
  }
  .activity_popup .trophies .trophy.silver {
      width:25px;
  }
  .activity_popup .trophies .trophy.gold {
      width:30px;
  }
  .activity_li.bootcamp {
      padding-bottom: 20px;
      text-align: center}
  .activity_li.bootcamp .activity_title a {
      font-size: 22px;
  }
  .activity_li.bootcamp .bootcamp_games {
      font-size: 16px;
			color: #333;
  }
  .activity_section_divider {
      border-top: 1px solid black;
      padding: 8px 10px 4px;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.08em;
      color: #666;
      text-transform: uppercase;
  }
</style>
<script src="/js/modal_master.js"></script>
<script>
	
  function generatePopup($button){
      // Uses data stored in the button to generate and return a popup
      // The game types
      WARMUP_ACTIVITIES = {
        video: ["Watch the Video", "Use subtitles and dictionary", "player_cdn.php?id="],
        vocab: ["Vocabulary Review", "Drill key vocabulary words", "vocabulary-flashcard-review.php?source=direct&media_id="],
        choice: ["Multiple Choice", "Choose the missing word", "multiple_choice.php?source=direct&media_id="],
        cloze: ["Fill in the Blank", "Type the missing word", "fill_in_the_blank.php?source=direct&media_id="]
      };	  

      WORKOUT_ACTIVITIES = {
        bootcamp: ["Bootcamp", "Guided Circuit Training", "bootcamp.php?media_id="],
        dictation: ["Scribe", "Listen & Write (Dictation)", "scribe.php?source=direct&media_id="],
        speech: ["Speak", "Read & Repeat (Pronunciation)", "scribe_speech_speak.php?source=direct&media_id="],
        parrot: ["Parrot (Beta)", "Listen & Speak (Shadow)", "scribe_speech_parrot.php?source=direct&media_id="],
        recall: ["Revo", "Reverse Translation", "recall.php?source=direct&media_id="],
        comprehension: ["Comprehension", "The big picture", "comprehension_quiz.php?source=direct&media_id="]
      };
      
      media_id = $button.parent().attr('data-media_id');
      video_title = decodeURI($button.parent().attr('data-title'));
      warmup = $button.hasClass('warm_up_btn');
      player = $button.hasClass('player_activity_button');
      vocab_available = !!$button.attr('data-vocab_available');
      scribe_available = !!$button.attr('data-scribe_available');
      speak_available = !!$button.attr('data-speak_available');
			parrot_available = $button.data('parrot_available');
      recall_available = !!$button.attr('data-recall_available');
      comprehension_available = !!$button.attr('data-comprehension_available');
      beta_tester = !!$button.attr('data-is_beta');
      //Remove activities not supported for video
    if (!scribe_available)
          delete WORKOUT_ACTIVITIES.bootcamp;
    if(!parrot_available)
	  		delete WORKOUT_ACTIVITIES.parrot;
    if(!speak_available)
	  		delete WORKOUT_ACTIVITIES.speech;
      if(!player){
	  if(!vocab_available)
	      delete WARMUP_ACTIVITIES.vocab;
	  if(!scribe_available){
	      delete WORKOUT_ACTIVITIES.dictation;
	  }
	  if(!recall_available){
	      delete WORKOUT_ACTIVITIES.recall;
		}
	  if(!comprehension_available)
	      delete WORKOUT_ACTIVITIES.comprehension;
	  if(warmup)
	      WARMUP_ACTIVITIES.video[2] = $button.attr('data-video_url');

      }else{
    delete WARMUP_ACTIVITIES.video;
      }
      //We accept the video url as an arg to get the proper translation lang tag
      activities = warmup ? WARMUP_ACTIVITIES : WORKOUT_ACTIVITIES;

      $popup = $('<div class="activity_popup">');
      if(player)

	  $popup.addClass('player_activity_popup');

      $icon = $('<i class="fa fa-' + (warmup ? 'walking' : 'running') + '"></i>');
      $popup.append($('<h2>').text(warmup ? "Warmup" : "Workout").prepend($icon));
      //symbol = warmup ? 'walking' : 'running';
      

      $popup.append($('<h3 class="activity_popup_video_title">').html(video_title));
      $close_button = $('<div class="activity_popup_close modal_master_close"><i class="fa fa-times-circle-o"></i></div>');
      $close_button.click(function(e){
    $(this).parent().remove();
      });
      $popup.append($close_button);

      //Add the activities allowed for the video to the popup
      $ul = $('<ul>');
      var addedIndividualDivider = false;
      $.each(activities, function(key, val){
          if (!addedIndividualDivider && key !== 'bootcamp' && !warmup) {
              $ul.append($('<div class="activity_section_divider">').text("Individual Exercises"));
              addedIndividualDivider = true;
          }
          $d = $('<div class="activity_li ' + key + '">');
          $a = $('<a>').html(val[0]);
          $a.attr('href', val[2] + ((key != 'video') ? media_id : ""));
					if (key === 'parrot') {
          	$d.append($('<div class="new_video"></div>'));
					}
          $d.append($('<h3 class="activity_title"></h3>').append($a));
          $d.append($('<br>'));
          $d.append($('<h3 class="activity_description"></h3>').text(val[1]));
          if (key === 'bootcamp') {
              $d.append($('<div class="bootcamp_games"></div>').html('Speak <b>&bull;</b> Scribe <b>&bull;</b> Revo <b>&bull;</b> Parrot <b>&bull;</b> Review'));
          }
          activities[key].push($d);

	  $d.click(function(e){
	      if(!$(e.target).is("a")){
		  e.preventDefault();
		  window.location.href = $(this).find('a').attr('href');
	      }
	  });

          $ul.append(val[3]);
      });
      
      //Add the game scores to the popup
      $popup.append($ul);

      // Return the popup unless we still need to add trophies
      if(!player)
          return $popup;

      //Get the game icon for various game types
      var image_map = {
          vocab: 'vocabulary_review',
          choice: 'multichoice',
          cloze: 'fill_in_the_blank',
          dictation: 'scribe',
          speech: 'scribe',
          recall: 'scribe',
          comprehension: 'comprehension'
      };
      
      //Get the scores and load them into the popup
      $.get('services/videos_ajax.php', {
          "media_id": media_id,
          "action":"games_medal_count"
      }, function (data) {

    	  console.log(data);
    	  for (var activity in activities){
              console.log(activity);
              if (!(activity in data))
		  continue;
              $l = activities[activity][3];
              $d = $('<div class="trophies">');
              $.each(['gold', 'silver', 'bronze'], function(index, color){
		  $trophy = $('<span class="wrapper ' + color + '"></span>');
		  $trophy.append($('<img src="//yabla.b-cdn.net/media.yabla.com/images/trophies/' + image_map[activity] + '_' + color + '.svg" class="trophy">'));
		  $trophy.append($('<span class="count">').text(data[activity].medalCount[color + "_medal"]));
		  if(data[activity].medalCount[color + "_medal"] > 9)
		      $trophy.find('.trophy').addClass('double_digit');
		  $d.append($trophy);
              })
              $d.insertAfter($l.find('.activity_title'));
    	  };

      });
      return $popup;
  };

  //Clicking a button closes all other activity popups and opens the requested one
  $(document).ready(function(){
      $('.activity_popup_button').click(function(e){

	  e.preventDefault();
  	  $('.activity_popup').remove();
	  Modal_Master.show(generatePopup($(this)));

      });
  });
  </script>
<div class="row sample-videos">
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=18822&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/18822/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/18822/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Aprendiendo con Silvia - Cabeza, cara y mucho más						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Adv Beginner</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Spain</p>
						<div class="activity_popup_button_holder" data-media_id="18822"
							 data-title="Aprendiendo con Silvia - Cabeza, cara y mucho más">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=18822&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 data-comprehension_available="true"							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>Do you know what the parts of the head and face are called in Spanish? In this video, Silvia will teach us this—  and much more!</p></p>
				</div>
			</div>
		</div>
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=10887&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/10887/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/10887/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Carlos explica - Acentuación Cap. 1: Conceptos básicos 						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Adv Beginner</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Colombia</p>
						<div class="activity_popup_button_holder" data-media_id="10887"
							 data-title="Carlos explica - Acentuación Cap. 1: Conceptos básicos ">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=10887&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 data-comprehension_available="true"							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>As an introduction to our lesson about accentuation, Carlos explains some different ways in which the word "accent" may be used. </p></p>
				</div>
			</div>
		</div>
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=5724&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/5724/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/5724/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Raquel - Visitar al Médico						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Adv Beginner</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Spain</p>
						<div class="activity_popup_button_holder" data-media_id="5724"
							 data-title="Raquel - Visitar al Médico">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=5724&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>Through a mock appointment, Raquel and Marisa teach us some Spanish vocabulary we might need during a visit to the doctor's office. </p></p>
				</div>
			</div>
		</div>
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=5621&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/5621/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/5621/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Raquel - Reserva de Restaurante						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Adv Beginner</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Spain</p>
						<div class="activity_popup_button_holder" data-media_id="5621"
							 data-title="Raquel - Reserva de Restaurante">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=5621&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 data-comprehension_available="true"							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>Raquel and Marisa give us tips on how to make a reservation at a restaurant in Spanish. </p></p>
				</div>
			</div>
		</div>
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=15499&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/15499/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/15499/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Ana Carolina - El uso correcto de los adjetivos						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Adv Beginner</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Ecuador</p>
						<div class="activity_popup_button_holder" data-media_id="15499"
							 data-title="Ana Carolina - El uso correcto de los adjetivos">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=15499&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 data-comprehension_available="true"							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>Ana Carolina sheds some light on the nuances of Spanish adjectives and how their position tends to differ from adjectives in English.</p></p>
				</div>
			</div>
		</div>
	 
		<div class="col-sm-6 col-md-4 sample">
			<div class="vid-container">
				<a class="gb" href="player_cdn.php?id=9355&amp;tlang_id=en" target="_self">
					<figure data-mediabook="//yabla.b-cdn.net/media.yabla.com/media/9355/mediabook.mp4">
						<img src="//yabla.b-cdn.net/media.yabla.com/media/9355/medium.jpg" alt="Play Demo Video">
						<div class="mask"></div>
						<figcaption><h3>
														Otavalo - Un día en la ciudad de los lagos						</h3></figcaption>
						<div class="play_overlay"></div>
					</figure>
				</a>
				<div class="vid-info">
					<div class="meta">
												<p><span class="label">Level</span> Intermediate</p>
												<p><span class="label"><i class="fa fa-globe-americas"></i></span> Ecuador</p>
						<div class="activity_popup_button_holder" data-media_id="9355"
							 data-title="Otavalo - Un día en la ciudad de los lagos">
						  <a class="btn activity_popup_button warm_up_btn"
							 data-video_url="player_cdn.php?id=9355&tlang_id=en"
							  data-vocab_available="true"							 ><i class="fa fa-walking"></i>Warmup</a>
						  <a class="btn activity_popup_button work_out_btn"
							 data-speak_available="true"							 data-parrot_available="true"							 data-scribe_available="true"							 data-recall_available="true"							 data-comprehension_available="true"							 ><i class="fa fa-running"></i>Workout</a>
						</div>
					</div>
					<p><p>Natalia takes us on a tour the beautiful San Pablo Lake in northern Ecuador, explaining to us about its many natural, sporting and leisure attractions. </p></p>
				</div>
			</div>
		</div>
	</div>
				
	</div>
</section>

	<section class="classroom-section-b">
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-4 col-sm-offset-1 col-md-offset-2 classroom-illo">
				<figure><img src="/images/yabla-classroom-illo.png" alt="Teacher Classroom Icon"></figure>
			</div>
			<div class="col-sm-7 col-md-5">
				<h2>Are you a teacher?</h2>
				<p>Yabla is used by more than 1000 top high schools, universities, and language institutions. Assign activities to your classes. Monitor their progress. It&#039;s perfect for learners at all levels.</p>
				<a href="classroom.php?a=1787">Try Yabla for your classroom</a>
			</div>
		</div>
	</div>
</section>


<section class="cta-section">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-4 col-md-offset-2">
				<h2>Just $ 12.95 USD per month</h2>
				<p>Unlimited access to our growing library of 3700+ videos for less than the cost of a 15 minute lesson.</p>
			</div>
			<div class="col-md-3">
				<a class="btn cta" href="subscribe.php">Get 7 Days Free*</a>
			</div>
		</div>
	</div>
</section>

<section id="v-props">
	<div class="container">
		<h2>Why Yabla?</h2>

		<div class="row">
			<ul>
				<li>
					<div class="v-prop">
						<div class="text">
							<div class="vp-icon flag"></div>
							<h3>Authentic Spanish</h3>
							<p>Our videos feature 100% native speakers, with growing library of 3700+ videos.</p>
						</div>
					</div>
				</li>

				<li>
					<div class="v-prop">
						<div class="text">
							<div class="vp-icon subtitles"></div>
							<h3>Subtitles</h3>
							<p>All videos are subtitled and translated by humans. Follow along in both languages.</p>
						</div>                
					</div>
				</li>

				<li>
					<div class="v-prop">
						<div class="text">
							<div class="vp-icon film"></div>
							<h3>Dictionaries</h3>
							<p>Click any word to see a definition, and save to your flashcard list.</p>
						</div>
					</div>
				</li>

			</ul>         
		</div>

		<div class="row">
			<ul>
				<li>
					<div class="v-prop">
						<div class="text">
							<div class="vp-icon slow"></div>
							<h3>Play to Learn</h3>
							<p>Play Scribe Dictation, Speak Pronunciation, Vocab Review, Comprehension, etc</p>
						</div>                
					</div>
				</li>
			
				<li>
					<div class="v-prop">
						<div class="text">
							<div class="vp-icon rewind"></div>
							<h3>Control the Playback</h3>
							<p>Navigate the video phrase by phrase. Repeat, slow or loop each phrase.</p>
						</div>                
					</div>
				</li>

				<li>
					<div class="v-prop mobile">
						<div class="text">
							<img src="/images/icon-ios_grey.png" alt="Mobile Icon">
							<h3>Yabla On the Go</h3>
							<p>Yabla is available on web and mobile:								<a href="https://apps.apple.com/us/developer/yabla/id596409486">iOS</a>
							</p>
						</div>                
					</div>
				</li>
			</ul>         
		</div>

	</div>  
</section>


<section class="cta-section two">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-4 col-md-offset-2">
				<h2>Just $ 12.95 USD per month</h2>
				<p>Unlimited access to our growing library of 3700+ videos for less than the cost of a 15 minute lesson.</p>
			</div>
			<div class="col-md-3">
				<a href="subscribe.php" class="btn cta">Get 7 Days Free*</a>
			</div>
		</div>
		<div class="row" style="text-align: center; padding-top: 50px;">
				<p><i>*7 Day Free trial offer is only available to new users</i></p>
		</div>
	</div>
</section>



	
		<footer id="footer">
	<div class="container">
		<div class="row main-footer">
			<ul>
				<li><h3 class="reg">Yabla Languages</h3></li>
				<li><a href="https://spanish.yabla.com/">Learn Spanish</a></li>
								
					<li><a href="https://french.yabla.com/">Learn French</a></li>
					<li><a href="https://italian.yabla.com/">Learn Italian</a></li>
								<li><a href="https://german.yabla.com/">Learn German</a></li>
								
					<li><a href="https://chinese.yabla.com/">Learn Chinese</a></li>
								<li><a href="https://english.yabla.com/">Learn English</a></li>
			</ul>

			<ul>
				<li><h3 class="reg">Get Yabla</h3></li>
				<li><a href="subscribe.php">Buy Individual subscription</a></li>
				<li><a href="subscribe_group.php">Buy School/Organization subscription</a></li>
				<li><a href="subscribe_group.php">QUOTE for School/Organization</a></li>
				<li><a href="subscribe_join.php">Signup for students</a></li>
				<li><a href="code">Sign up with access code</a></li>
				<li><a href="gift_yabla.php">Send a Gift</a></li>

			</ul>

			<ul>
				<li><h3 class="reg">Help</h3></li>
				<li><a href="getting_started.php">Individuals - Getting Started</a></li>
				<li><a href="faq.php">Individuals - FAQ</a></li>
				<li><a href="faq.php#tutorial">Individuals - Video Tutorials</a></li>
				<li><a href="school_quickstart_guide.php">School Accounts - Getting Started</a></li>
				<li><a href="faq_group.php">School Accounts - FAQ</a></li>
				<li><a href="faq_group.php#tutorial">School Accounts - Video Tutorials</a></li>
				<li><a href="contact.php">Contact</a></li>
							</ul>

			<ul>

				<li><h3 class="reg">Yabla</h3></li>
									<li><a href="mailing_list.php" aria-label="Mailing List">Yabla Newsletter Signup</a></li>
								<li><a href="https://yabla.app.link/iI5YWCjBhD?yabla_campaign_id=1858" aria-label="iOS Link"><span class="fa fa-apple"></span> iOS App</a></li>

				<!-- tvOS app available for all languages-->
									<li>
						<a href="tvOS.php" aria-label="Apple TV">
							<span class="fa fa-apple"></span> tvOS App						</a>
					</li>
				
								<li><a href="leaderboard.php" aria-label="Leaderboard">Leaderboard</a></li>
																					<li></li>
					<li><a href="https://gospanish.com/" aria-label="Live Spanish" title="Go Spanish" target="_blank">Live Spanish Classes</a></li>
					<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://gospanish.com/" title="Spanish Classes" target="_blank">gospanish.com</a></li>
								<li></li>
								<li>
					<div class="social">
						<ul>
							<li><a href="https://www.facebook.com/YablaLanguages" aria-label="Facebook" target="_blank"><span class="fa fa-facebook"></span></a></li>
							<li><a href="https://www.instagram.com/YablaLanguages" aria-label="Instagram" target="_blank"><span class="fa fa-instagram"></span></a></li>
							<li><a href="https://www.x.com/YablaLanguages" aria-label="X Platform" target="_blank"><span class="fa fa-twitter"></span></a></li>
						</ul>
					</div>
				</li>		

			</ul>
		</div>
		<div class="row secondary-footer">
			<div class="footer-logo">
				<a href="https://www.yabla.com/"  aria-label="Yabla">Yabla</a>
			</div>

			<div class="col-md-9 foot_links">
				<ul>
					<li><a href="about.php" aria-label="About">About</a></li>
					<li><a href="classroom.php" aria-label="Educators">For Educators</a></li>
					<li><a href="affiliate-inquiry.php" aria-label="Affiliate Link">Affiliate Program</a></li>
					<li><a href="terms.php" aria-label="Terms">Terms</a></li>
					<li><a href="privacy.php" aria-label="Privacy">Privacy</a></li>

				</ul>
			</div>
		</div>
	</div>

</footer>

	

<script>
  NLBar.show({"delay":2000,"source":"homepage"}, {"signup":"Sign Up Now","noshow":"<i class=\"fa fa-close\"><\/i> Close","tagline":"<span class=\"no_bold\">Sign up for our weekly <strong>Free Spanish email lessons!<\/strong><\/span>"});
</script>


 
	<script type='text/javascript' src='js/yabla-home.js'>
	</script>
	<script type='text/javascript' src='js/jquery.flexslider-min.js'></script>

	
	
	<!-- Google Code for Lomastv Visitors -->
	<script type="text/javascript">
	/* <![CDATA[ */
	var google_conversion_id = 1068646977;
	var google_conversion_label = "MQlwCLXHwQEQwYTJ_QM";
	var google_custom_params = window.google_tag_params;
	var google_remarketing_only = true;
	/* ]]> */
	</script>
	<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
	</script>
	<noscript>
	<div style="display:inline;">
	<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1068646977/?value=0&amp;label=MQlwCLXHwQEQwYTJ_QM&amp;guid=ON&amp;script=0"/>
	</div>
	</noscript>


		

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');

fbq('init', '589397771204967');



</script>
<!-- End Facebook Pixel Code -->


	<script>(function(w,d,t,r,u){ var f,n,i;w[u]=w[u]||[],f=function(){ var o={ ti:"4031464" };o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad") },n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){ var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null) },i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i) })(window,document,"script","//bat.bing.com/bat.js","uetq");</script><noscript><img src="//bat.bing.com/action/0?ti=4031464&Ver=2" height="0" width="0" style="display:none; visibility: hidden;" /></noscript>




<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a02c58dc1f4809b5',t:'MTc3OTk2MTc0Mg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
