html {
	height: 100%;
	font-size: 100%;
}
body 
{
	background-color: #ffffff;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	font-family: 'Open Sans', Arial !important;
	font-weight:300;
	letter-spacing:-1px;
	font-weight:bold;
	color: #676759;
}


.attribution {
	padding: 3em 0;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.attribution a {
	color: #fff;
}

.clear
{
	clear: both;	
}

/* CABECERA */

#cabecera h1
{
	float: right;

	width: 334px;
	height: 43px;
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
	background-position: 0 0;
	background-size:334px 43px;
}


#cabecera h1 span
{
	display: none;
}	


 .aclaracion
{
	font-size:11px;
	font-weight:normal;
	letter-spacing:0;	
	margin: 0 0 0 0;
	line-height:140%;
	padding-right: 15px;
padding-left: 15px;
background-image:url(../img/noncommercial.png);
background-size:35px 35px;
background-repeat:no-repeat;
background-position: 15px 0;
padding-top: 40px;
}

#cabecera #buber
{
	
	margin: 20px  0 0 0;	
}
#cabecera #buber a
{
	width: 279px;
	height: 100px;
	background-image:url(../img/buber.jpg);
	background-size:279px 100px;
	background-repeat:no-repeat;
	background-position: 0 0;
	display: block;
}

#cabecera h2
{
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 16px;
	text-transform:uppercase;
}

#cabecera .descargar
{
	margin: 15px 0 5px 0;	
}

#cabecera .descargar a
{
	background-color: #FC8B11;
	display:inline-block;
	font-size:16px;
	text-transform:uppercase;
	line-height:28px;
	padding: 0 10px 0 10px;
	text-decoration: none;
	color: #FFF;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
		
}

/* MODAL */

#demo_ios img {
    max-width: 100%;
    height: auto;
    margin: 0;

}

#demo_ios span {
    font-size:11px;

}
#demo_android
{
	line-height:150%;
}
#demo_android img {
    max-width: 100%;
    height: auto;
    margin: 0;

}

#demo_android span {
    font-size:11px;

}
.download
{
	background-image:url(../img/touch.png);
	background-repeat:no-repeat;
	
	background-color:#FFF;
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal;
	padding: 20px;
}


.download  p
{
	background-color:transparent;
	line-height:140%;
	font-size:14px;
	color:#333;
	margin: 0 0 15px 0;
}


.download  a
{
	background-color: #FC8B11;
	display:inline-block;
	font-size:14px;
	text-transform:uppercase;
	line-height:20px;
	padding: 0 5px 0 5px;
	text-decoration: none;
	color: #FFF;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	margin: 0 0 20px 0;
		
}

/* GENERALES */

.boton
{
	
	text-align:center;
	font-size: 24px;
	color:#FFF;
	background-color: #A3C437;
	font-weight:bold;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	display:inline-block;
	padding: 0 20px 0 20px;
	text-decoration:none;
	line-height:36px;
	font-weight:800;
	text-transform:uppercase;
}


.boton:hover
{
	color: #ffffff;
	background-color: #B5D05F;
	text-decoration:none;
}


.navigation
{
	margin: 20px 0 20px 0;	
}

.back
{
	
	text-align:center;
	font-size: 24px;
	color:#A3C437;
	background-image:url(../img/back.png);
	background-repeat:no-repeat;
	background-position: 0 0;
	padding: 0 0 0 45px;
	font-weight:bold;
	
	display:inline-block;
	
	text-decoration:none;
	line-height:36px;
	font-weight:800;
	text-transform:uppercase;
}


.back:hover
{
	text-decoration: none;
	color: #C8DC87;
	background-position: 0 -36px;
	
}

.navigation_next
{
	text-align:center;
	padding: 20px 0 20px 0;	
}
.next
{
	
	text-align:center;
	font-size: 24px;
	color:#FFF;
	background-color: #A3C437;
	font-weight:bold;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	display:inline-block;
	padding: 0 40px 0 20px;
	text-decoration:none;
	line-height:36px;
	font-weight:800;
	text-transform:uppercase;
	background-image:url(../img/next.gif);
	background-position: right 0;
	background-repeat:no-repeat;
}


.next:hover
{
	color: #ffffff;
	background-color: #B5D05F;
	text-decoration:none;
	background-image:url(../img/next.gif);
	background-position: right -36px;
	background-repeat:no-repeat;
}


h2
{
	font-size: 36px !important;
	font-weight: 800 !important;
	text-transform:uppercase;	
	color:  #A3C437 !important;
	margin: 20px 0 20px 0 !important;
	padding: 0;
}

h3
{
	font-size: 32px !important;
	font-weight: 800 !important;
	text-transform:uppercase;	
	color:  #464637 !important;
	text-align:center;
	margin: 20px 0 20px 0;
}
h4
{
	font-size: 32px !important;
	font-weight: 300 !important;
	text-transform:uppercase;	
	color:  #464637 !important;
	text-align:center;
	margin: 20px 0 20px 0;
}



/* HOME */

#home 
{
	background-image:url(../img/bg.jpg);
	background-repeat:no-repeat;
	background-position: right 100px;
}

#home  .main
{
	margin-top: 150px;
}

#home  .main h1
{
	width: 430px;
	height: 56px;
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
	background-position: 0 0;
	background-size:430px 56px;
}


#home  .main h1 span
{
	display: none;
}

#home  .main #enter 
{
	padding: 20px 0 0 0;	
}


/* VIDEOS */

#videos 
{
	background-image:url(../img/bg.jpg);
	background-repeat:no-repeat;
	background-position: right bottom;
	background-size: 400px 378px;
}

#videos .main .videos
{
	width: 581px;
}

#videos .main .video
{
	background-size: 277px 170px;
	width: 277px;
	height: 170px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
}

#videos .main #v1
{
	background-image:url(../img/sc1.jpg);
}


#videos .main #v2
{
	background-image:url(../img/sc2.jpg);
}


#videos .main #v3
{
	background-image:url(../img/sc3.jpg);
}


#videos .main #v4
{
	background-image:url(../img/sc4.jpg);
}

#videos .main .shadow
{
	background-size: 276px 43px;
	width: 276px;
	height: 43px;
	background-image:url(../img/shadow.png);
	background-position:0 0;
	background-repeat:no-repeat;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
}

/* VIDEO QUIZ */

#video #quiz
{
	display: none;	
}

#video .try.top
{
	float: right;	
}

#video .try.hideme
{
	text-align:center;
}

#video #quiz 
{
	clear: both;	
}

#video #quiz .question
{
	border-bottom: 1px solid #C7C7C3;
	height: 80px;
}


#video #quiz .question.correct
{
	background-color: #EDF3D7;
	background-image:url(../img/correct.png);
	background-position: 96% 20px;
	background-repeat:no-repeat;
}


#video #quiz .question.incorrect
{
	background-color: #FFCCCC;
	
	background-image:url(../img/incorrect.png);
	background-position: 96% 20px;
	background-repeat:no-repeat;
}

#video #quiz .question .text
{
	font-size: 26px;
	font-weight:300;
	line-height:80px;
}

#video #quiz .question .reply
{
	
	line-height:40px;
	display: inline-block;
	padding: 0 10px 0 10px;
	font-size: 24px;
	font-weight:300;
	color: #464637;
	
}

/* Quiz */

strike
{
	margin: 0 5px 0 5px;	
}

/* True or False */

#video .quiz-tf .question .tf 
{
	padding: 20px 0 0 0;	
}

#video .quiz-tf .question .tf .true
{
	background-color: #DDDDDD;
	line-height:40px;
	display: inline-block;
	-webkit-border-top-left-radius: 40px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
	padding: 0 20px 0 20px;
	font-size: 20px;
	font-weight:300;
	color: #464637;
	cursor:pointer;
	border-right: 1px solid #FFF;
}
#video .quiz-tf .question .tf .false
{
	background-color: #DDDDDD;
	line-height:40px;
	display: inline-block;
	-webkit-border-top-right-radius: 40px;
	-webkit-border-bottom-right-radius: 40px;
	-moz-border-radius-topright: 40px;
	-moz-border-radius-bottomright: 40px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	padding: 0 20px 0 20px;
	font-size: 20px;
	font-weight:300;
	color: #464637;
	cursor:pointer;
}
#video .quiz-tf .question .tf a:hover
{
	text-decoration:none;
	background-color: #e7e7e7;

}

/* Quiz: Drag */

.quiz-dg .draggables
{
	text-align:center;	
	margin-bottom: 20px;
}


.quiz-dg .draggables a
{
	background-color: #DDDDDD;
	line-height:40px;
	display: inline-block;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	padding: 0 20px 0 20px;
	font-size: 20px;
	font-weight:300;
	color: #464637;
	cursor:pointer;
	text-transform:uppercase;
	margin: 0 5px 0 5px ;
}

.quiz-dg .draggables a:hover
{
	text-decoration:none;
}
.quiz-dg .qt
{
	display:inline-block;	
	line-height: 60px;
}
.quiz-dg .qt.droppable
{
	border-bottom: 1px dotted #666;
	width:200px;
	height: 30px;
}


.quiz-dg .solved .qt.droppable
{
	border: none;
	width: auto !important;
	height: 30px;
}

/* Quiz: CW */

.quiz-cw .text
{
	display:inline-block;
}

.quiz-cw .reply
{
	display:inline-block;
}

.quiz-cw .cw
{
	padding: 20px 0 0 0;	
}

.quiz-cw .cw .w1
{
	text-transform:uppercase;
	background-color: #DDDDDD;
	line-height:40px;
	display: inline-block;
	-webkit-border-top-left-radius: 40px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
	padding: 0 20px 0 20px;
	font-size: 20px;
	font-weight:300;
	color: #464637;
	cursor:pointer;
	border-right: 1px solid #FFF;
}

.quiz-cw .cw .w2
{
	
	text-transform:uppercase;
	background-color: #DDDDDD;
	line-height:40px;
	display: inline-block;
	-webkit-border-top-right-radius: 40px;
	-webkit-border-bottom-right-radius: 40px;
	-moz-border-radius-topright: 40px;
	-moz-border-radius-bottomright: 40px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	padding: 0 20px 0 20px;
	font-size: 20px;
	font-weight:300;
	color: #464637;
	cursor:pointer;
}

.quiz-cw .cw a:hover
{
	text-decoration:none;
	background-color: #e7e7e7;

}

/* QUIZ: End of sentences */

.quiz-es .text,.quiz-es .reply
{
	display: inline-block;	
}

#video .quiz-es select
{
	background-color:#d0d0d0;	
	border-radius: 50px !important;
	-moz-border-radius: 50px !important;
	-webkit-border-radius: 50px !important;
	
}

@media only screen and ( max-width: 768px ) 
{
	.boton
{
	
	font-size: 20px;
	padding: 0 15px 0 15px !important;
	
}
	
	.descargar
	{
		
		margin: 8px 0 0 0 !important;
	}
	
	#home 
	{
		background-image:url(../img/bg.jpg);
		background-repeat:no-repeat;
		background-position: right bottom;
		background-size: 270px 240px;
	}


	#home #cabecera
	{
		text-align:center;
	}
	
	#home #cabecera #buber 
	{
		margin-top: 10px;
	}
	
	#home #cabecera #buber a
	{
		margin:auto !important;
		width: 200px !important;
		height:72px !important;
		background-size: 200px 72px !important;
	}

	#home .main
	{
		margin-top: 20px;	
		text-align:center;
	}
	
	
	#home  .main h1
	{
		margin: auto;
		width: 300px;
		height: 39px;
		background-image:url(../img/logo.png);
		background-repeat:no-repeat;
		background-position: 0 0;
		background-size:300px 39px;
	}
	#home .main #enter 
	{
		padding: 10px 0 0 0;	
	}
	#home #enter a
	{
		font-size:20px;	
	}
	
	
	/* Videos */
	#videos h2
	{
		text-align:center;	
	}
	
	#videos #cabecera #buber a
	{
		
		width: 150px !important;
		height:54px !important;
		background-size: 150px 54px !important;
	}
	#videos  #cabecera h1
	{
		margin: auto;
		width: 150px;
		height: 19px;
		background-image:url(../img/logo.png);
		background-repeat:no-repeat;
		background-position: 0 0;
		background-size:150px 19px;
		margin-top: 15px;
	}
	
	#videos 
{
	background: none;
	
}

#videos .main .videos
{
	width: 100%;
	
}

#videos .main .video
{
	background-size: 320px 200px;
	background-position:center center;
	width: 47%;
	height: 140px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
}

#videos .main .shadow
{
	display: none;
}

	#videos .main .shadow
{
	background-size: 335px 50px;
	width: 335px;
	height: 50px;
}

/* QUIZ */

/* Videos */
	
	
	#video #cabecera #buber a
	{
		
		width: 150px !important;
		height:54px !important;
		background-size: 150px 54px !important;
	}
	#video  #cabecera h1
	{
		margin: auto;
		width: 150px;
		height: 19px;
		background-image:url(../img/logo.png);
		background-repeat:no-repeat;
		background-position: 0 0;
		background-size:150px 19px;
		margin-top: 15px;
	}
	
	#video
{
	background: none;
	
}
  #video #quiz .question
  {
	  height: 40px;	
  }
  

  #video #quiz h3,#video #quiz h4
  {
	  font-size:22px !important;
  }
	
	#video #quiz .question .text.double
	{
		line-height:15px;
		padding-top: 5px;
	}
	
	#video #quiz .question .text
	{
		font-size:14px;	
		line-height:40px;
	}
	
	#video #quiz .question .reply
	{
		font-size:14px;	
		line-height:40px;
	}
	#video #quiz .question.solved
	{
		background-position:97% center;	
		background-size:30px 30px;
	}
	
	#video #quiz .col-xs-8,#video #quiz .col-xs-9
	{
		padding: 0;	
	}
	
	/* True or false */
	#video #quiz .tf a
	{
		font-size:14px;	
		padding: 0 10px 0 10px;
	}
	
	#video .quiz-tf .question .tf
	{
		padding: 0;	
	}
	
	#video .quiz-tf .question .tf .true,#video .quiz-tf .question .tf .false
	{
		line-height:30px;	
	}
	
	/* Drag */
	
	#video .quiz-dg .qt
	{
		line-height:40px;
	}
	
	#video .quiz-dg .draggables
	{
		margin-bottom: 10px;	
	}
	
	#video .quiz-dg .draggables a
	{
		font-size:14px;
		padding: 0 10px 0 10px ;
		line-height:20px;	
	}
	
	#video .quiz-dg .qt.droppable
	{
		width: 100px;
	}
	
	/* Correct word */
	
	#video #quiz .cw a
	{
		font-size:14px;	
		padding: 0 10px 0 10px;
	}
	
	#video .quiz-cw .question .cw
	{
		padding: 0;	
	}
	
	#video .quiz-cw .question .cw .w1,#video .quiz-cw .question .cw .w2
	{
		line-height:30px;	
	}
	
	/* End of sentences */
	
	#video #quiz.quiz-es .question.solved
	{
		height: auto !important;	
	}
	
	#video .quiz-es select
	{
		width: 100px;	
	}
	#video .quiz-es .solved .reply .es
	{
		
	}
	
	.container
	{
		padding: 5px !important;	
	}
	
	
	.col-md-12
	{
		padding: 0 !important;	
	}
}
@media only screen and ( min-width: 768px )  and (max-width: 990px)
{
	
	
	/* Videos */
	
	#videos 
{
	background-image:url(../img/bg.jpg);
	background-repeat:no-repeat;
	background-position: 400px 80px;
	background-size: 400px 378px;
}

#videos .main .videos
{
	width: 100%;
	
}

#videos .main .video
{
	background-size: 335px 220px;
	width: 335px;
	height: 220px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
}
	#videos .main .shadow
{
	background-size: 335px 50px;
	width: 335px;
	height: 50px;
}
	
	
	.download
	{
		background-position: center 0;
		
	}
	
	
	#video #quiz .question .text
	{
		font-size:19px;	
	
	}
	
	#video #quiz .question .reply
	{
		font-size:19px;	
		
	}
	
	
  #video #quiz h3,#video #quiz h4
  {
	  font-size:20px !important;
  }
	
}
@media only screen and ( max-width: 768px ) 
{
	
	/* Videos */
	#videos h2
	{
		font-size:18px !important;	
	}

	.try.top
	{
		display:none;	
	}
	
	
}