/* A2 demo*/

@import url(https://fonts.googleapis.com/css?family=Dosis);
@import url(https://fonts.googleapis.com/css?family=Roboto);

body {margin:0; width: 100%; font-family: "Open Sans", sans-serif;}
body.a1 {margin:0; font-family: "Open Sans", sans-serif; background-image: url("images/bodyA1.jpg"); background-repeat: no-repeat; background-size:100% 100%; filter:blur(50px);}

.demo {
		position: absolute;
		width: 100%;
    height: 17500px;
    margin-top: 2000px;
    border: 1px solid black;
    z-index: 1;
		background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}


 h1, h2, h3{margin: 0;}

 h1.header {font-size: 60px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
@media (max-width: 650px) {
 h1.header {font-size: 55px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}
@media (max-width: 600px) {
 h1.header {font-size: 50px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}
@media (max-width: 550px) {
 h1.header {font-size: 45px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}
@media (max-width: 500px) {
 h1.header {font-size: 40px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}
@media (max-width: 450px) {
 h1.header {font-size: 35px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}
@media (max-width: 400px) {
 h1.header {font-size: 30px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: left;
				    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
				    }
}



 h2.index {font-size: 60px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 5px;
				    }
					
@media (max-width: 650px) {
 h2.index {font-size: 55px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 10px;
				    }
}
@media (max-width: 600px) {
 h2.index {font-size: 50px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 10px;
				    }
}
@media (max-width: 550px) {
 h2.index {font-size: 45px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 12px;
				    }
}
@media (max-width: 500px) {
 h2.index {font-size: 40px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 15px;
				    }
}
@media (max-width: 450px) {
 h2.index {font-size: 35px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 20px;
				    }
}
@media (max-width: 400px) {
 h2.index {font-size: 30px;
				    font-weight: 600;
				    letter-spacing: -0.06em;
				    text-align: center;
					color: #ffffff;
					padding-top: 22px;
				    }
}


				    
 H1.left    {font-size: 30px; text-align: left;}
 H1.leftbckg{font-size: 30px; text-align: left; padding-left: 10px; border: 1px solid black;}
 H1.a1leftbckg{font-size: 30px; text-align: left; padding-left: 10px; border: 1px solid blue;}
 H1.a2leftbckg{font-size: 30px; text-align: left; color: green; padding-left: 10px; border: 1px solid green;}
 H1.a1		{font-size: 30px; text-align: left; color: #000080;  padding-left: 10px; border: 1px solid #000080;}
 H1.a2		{font-size: 30px; text-align: left; color: green; padding-left: 10px; border: 1px solid green;}
 h1.center  {font-size: 30px; text-align: center;}
 H1.slideshow {font-size: 18pt; font-family: Calibri; font-weight: bold; font-color:#151041; text-align: left; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);}
 H2.left    {font-size: 15pt; font-weight bold; text-align: left;}
 H2.vocabA1	{font-size: 25pt; font-weight bold; font-family: 'Dosis', sans-serif; color: #0075B3; border-bottom:1px solid #0099CC;}
 H2.vocabA2	{font-size: 25pt; font-weight bold; font-family: 'Dosis', sans-serif; color: #0B830F; border-bottom:1px solid #0B830F;}
 H2.center  {font-size: 15pt; font-weight bold; text-align: center;}
 H3.center  {font-size: 12pt; font-weight bold; text-align: center;}
 h5 {font-size: 12pt; font-weight bold; font-family: "trebuchet MS", 'lucida sans';}

 
 p  		{margin: 0px; padding: 0px; text-align: justify; font: 17px 'trebuchet MS', 'lucida sans';}
 p.left     {text-align: left;}
 p.center   {text-align: center;}
 p.right    {text-align: right;}
	.dosis	{text-align: justify;font-size: 15pt; font-family: 'Dosis', sans-serif; color: #0075B3; border-left: 15px solid #0075B3; padding-left: 15px;}
	.lato	{font-size: 11.5pt; font-family: 'Lato', sans-serif; color: #3b3b3b; text-align: justify;}
	.latoL	{font-size: 11.5pt; font-family: 'Lato', sans-serif; color: #3b3b3b; text-align: left;}

.clear {clear:both}

img#myImg {
        filter:opacity(30%);
}


img.logo			{width:100%;}
img.fit				{width:100%; height:auto;}
img.fitMax100	{width:auto; height:auto; max-height:100px;}
img.bingo			{width:100%; height:auto; border: 1px solid black;}

hr.blue  {width:90%; color: #001886; background-color: #001886; height: 2px;}

/* hr.a2 {width:80%; color: #CCFF99; background-color: #0B830F; height: 1px;} */

hr.a2 {margin-left:10%; margin-right: 10%; padding:0.5px; background-color:#0B830F;}

audio {border-radius: 5px; width:100%;}


ol.a1 {margin: 0; font: 11pt; text-align: left; background-color:#c1ccff; border: 1px solid #001886; margin-top: 2px;}
li.example {margin: 0; font: 11pt; background-color:#c1ccff; border: 1px solid #001886; margin: 2px; padding: 2px;}
ul{margin: 0; padding-left: 15px;}
ul.si{list-style-image: url(images/tick-yes.png);}
ul.no{list-style-image: url(images/tick_wrong.jpg);}
ul.exerciseunits {margin: 0; width: 100%; background-color:#c1ccff;}
li.exerciseunits  {margin: 0; font: 11pt; display: inline; width: 16.66%;}
li.a{list-style-image: url(images/rombo-a.png);}
li.b{list-style-image: url(images/rombo-b.png);}
li.c
li.d


fieldset {}
fieldset.greenA2 {
		padding:10px;
		border-collapese: collapse;
    	border-style: solid;
    	border-color: #0B830F;
    	border-width: 1px 1px 5px 1px;
    	border-top-left-radius: 25px;
    	border-top-right-radius: 25px;
    	border-bottom-right-radius: 25px;
}
legend		{margin-left: 20px; margin-right: 20px; padding: 10px 30px 10px 30px;}
legend.a1	{border:1px solid #0099cc; color: #0099cc; border-radius: 12px;}
legend.a2	{border:1px solid #0B830F; color: #0B830F; border-radius: 12px;}




#header {
        width: 100%;
        max-width: 1000px;
        height: auto;
}

#headerA1 {
        width: 100%;
        height: auto;
        padding: 0px 0px 50px 0px;
				color: white;
			  background-image: url("images/indA1.jpg");
			  background-repeat: no-repeat;
			  background-size: 100% 100%;
			  border-bottom:  4px #000080 solid;
}

#headerA2 {
        width: 100%;
        height: auto;
        padding: 0px 0px 50px 0px;
				color: white;
			  background-image: url("images/indA2.jpg");
			  background-repeat: no-repeat;
			  background-size: 100% 100%;
			  border-bottom:  4px #004D00 solid;
}

#tripulantes {
        width: 100%;
        height: auto;
        padding: 0px;
				color: white;
			  background-image: url("images/ala.jpeg");
			  background-repeat: no-repeat;
			  background-size: cover;
				background-position: right top;
}
	  
	  
.top {
        width: 50%;
        float: left;
		padding: 10px;
}

#content {
        width: 94%;
        max-width: 1000px;
        height: auto;
        margin: auto;
        padding-top: 70px;
}

main.demo {
				display:block;
        width: 95%;
        max-width: 1000px;
        margin: auto;        
        height: auto;
        padding-top: 55px;
        filter:blur(5px);
}

main {
				display:block;
        width: 95%;
        max-width: 1000px;
        margin: auto;        
        height: auto;
        padding-top: 55px;
}

main.a1 {
				display:block;
        width: 95%;
        max-width: 1000px;
        margin: auto;        
        height: auto;
        padding-top: 55px;
        border: 1px solid green;
}


a1main {
				display:block;
        width: 95%;
        max-width: 1000px;
        margin: auto;        
        height: auto;
        padding-top: 55px;
        border: 1px solid blue;
}

a2main {
				display:block;
        width: 95%;
        max-width: 1000px;
        margin: auto;        
        height: auto;
        padding-top: 55px;
        border: 1px solid green;
}

div #menuline {
		position: fixed;
		top: 0px;
    width: 50%;
		height: 43px;
		background-color:#151041;
		border-bottom: 1px solid #0C0A26;
		z-index: 100;
}

div.standard {
   	width: 50%;
		height: auto;
		margin: auto;
		background-color:#fff;
}


div.standardleft {
   	width: 49%;
		height: auto;
		float: left;
		margin: 5px;
		border: 1px solid #0C0A26;
}


span.ind{font-size: 100pt;}


/* ------------------------------ Dise�o del cuadro en Index --------------------------*/
div.roundedUp {
   		width: 90%;
		height: auto;
		margin: auto;
		padding-top: 50px;
		padding-bottom: 50px;
		border: 1px solid #cccccc;
    	border-top-right-radius: 25px;
    	border-top-left-radius: 25px;
		background: #001886;
}

img.rounded {
		border-radius: 50%;
		width: 150px;
		height: 150px;
		border: 2px solid #cccccc;
		margin: 5px;
}
@media (max-width: 800px) {
img.rounded {
		border-radius: 50%;
		width: 120px;
		height: 120px;
		border: 2px solid #cccccc;
		margin: 5px;
		}
}
@media (max-width: 600px) {
img.rounded {
		border-radius: 50%;
		width: 100px;
		height: 100px;
		border: 2px solid #cccccc;
		margin: 5px;
		}
}
@media (max-width: 520px) {
img.rounded {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		border: 2px solid #cccccc;
		margin: 5px;
		}
}

img.rounded:hover {border: 2px solid #000000; transition: 0.4s;}


div.middle {
   		width: 90%;
		height: auto;
		margin: auto;
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
}

div.roundedDown {
   		width: 90%;
		height: auto;
		margin: auto;
		display: flex;
		justify-content: center;
		padding-top: 50px;
		padding-bottom: 50px;
		border: 1px solid #cccccc;
    	border-bottom-right-radius: 25px;
    	border-bottom-left-radius: 25px;
		background: #f2f2f2;
}
/* ------------------------------ Fin Dise�o del cuadro en Index --------------------------*/


div.indA1 {
		width: 150px;
		height: auto;
		float: left;
		padding: 20px;
		border: 2px solid #001886;
		font-weight bold;
		text-align: center;
		color: white;
	  background-image: url("images/indA1.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
		}

div.indA2 {
		width: 150px;
		height: auto;
		float: left;
		padding: 20px;
		border: 2px solid #004d00;
		font-weight bold;
		text-align: center;
		color: white;
	  background-image: url("images/indA2.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
		}


/* ------------------------------Dise�o de los ejercicios--------------------------*/
div .nav1 {width: 20%; height: auto; float: left;}
	@media (max-width: 600px) {div .nav1 {width: 100%; height: auto;}}

div .nav2 {width: 80%; height: auto; float: left;}
	@media (max-width: 1000px) {div .nav2 {width: 100%; height: auto;}}

div .nav3 {width: 20%; height: auto; float: left; text-align: center;}

div .fit50_1 {width: 50%; height: auto; float: left;}
	@media (max-width: 950px) {div .fit50_1 {width: 100%; height: auto;}}

div .fit50 {width: 50%; height: auto; float: left; margin: 0px: padding: 0px;}
	@media (max-width: 730px) {div .fit50 {width: 100%; height: auto; margin: 0px: padding: 0px;}}



/* ------------------------------Dise�o de divs y tablas--------------------------*/
.index  	{margin: auto; width: 100%; max-width: 1000px; border-spacing: 5px; border-collapse: separate;}
.tricolor	{width: 100%; max-width: 200px; margin:auto;}
.general	{width: 100%;  margin:auto; border-collapse: collapse;}
.inside 	{width: 95%; margin:auto; margin:auto;}
.general100	{width: 100%; max-width: 800px; border-collapse: collapse; margin:auto;}

.radiusA1 {
		padding: 15px;
		border-collapese: collapse;
		border-style: solid;
		border-color: #0099cc;
		border-width: 1px 1px 5px 1px;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
}

.radiusA2 {
		width: 100%;
		padding: 15px;
		border-collapese: collapse;
		border-style: solid;
		border-color: #0B830F;
		border-width: 1px 1px 5px 1px;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
}

table.radiusA2 {
		width: 100%;
		padding: 15px;
		border-collapese: collapse;
		border-style: solid;
		border-color: #0B830F;
		border-width: 1px 1px 5px 1px;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
}


/* ------------------------------Dise�o de las celdas de tablas--------------------------*/
.red {
	padding:4px;
	background-color:#FF0F0F;
	border:1px solid #860018;
}

.pink1 {
	padding:4px;
	background-color:#ff99ff;
	border:1px solid #800080;
}

.pink2 {
	padding:4px;
	background-color:#ffccff;
	border:1px solid #800080;
}

.blue {
	padding:4px;
	background-color:#000080;
	border:1px solid #000;
	color: white;	
}

/* --------blue1 antes ten�a el n� 728cff ---------*/
.blue1 {
	padding:4px;
	background-color:#6699FF;
	border:1px solid #001886;
}

.blue2 {
	padding:4px;
	background-color:#9aacff;
	border:1px solid #001886;
}

/* --------blue3 antes ten�a el n� c1ccff ---------*/
.blue3 {
	padding:4px;
	background-color:#A8C5FF;
	border:1px solid #001886;
}

.blueframe {
	padding:4px;
	border:1px solid #001886;
}

.yellow {
	padding:4px;
	background-color:#FFFF99;
	border:1px solid #FF9900;
}

.yellowframe {
	padding:4px;
	border:1px solid #FF9900;
}

.orange {
	padding:4px;
	background-color:#FF9900;
	border:1px solid #C17400;
}

.orange2 {
	padding:4px;
	background-color:#FFCC99;
	border:1px solid #C17400;
}

.orangeframe {
	padding:4px;
	border:1px solid #C17400;
}

.black {
	padding:4px;
	background-color:#000000;
	border:1px solid #000000;
}

.blackframe {
	padding:4px;
	border:1px solid #000000;
}

.white {
	padding:4px;
	background-color:#ffffff;
	border:1px solid #001886;
}

.grey {
	padding:4px;
	background-color:#BABABA;
	border:1px solid #000000;
}

.grey2 {
	padding:4px;
	background-color:#eee;
	border:1px solid #000000;
}

.greybottom {
	padding:4px;
	background-color:#fff;
	border-bottom:1px solid #eee;
}

.green {
	padding:4px;
	background-color:#004d00;
	border:1px solid #000;
	color: white;	
}

.green1 {
	padding:4px;
	background-color:#76D678;
	border:1px solid #0B830F;
}

.green2 {
	padding:4px;
	background-color:#CCFF99;
	border:1px solid #0B830F;
}

.green3 {
	padding:4px;
	background-color:#A7C5C5;
	border:1px solid #0B830F;
}

.greenframe {
	padding:4px;
	border:1px solid #0B830F;
}

.brown {
	padding:4px;
	background-color:#BD430F;
	border:1px solid #823B1C;
}

.lila1 {
	padding:4px;
	background-color:#CC99FF;
	border:2px solid #a54bff;
}

.postit {
	float: left;
	width: 200px;
	height: auto;
	min-height: 200px;
	background-image: url('images/post-it.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	padding: 50px 15px 0px 15px;
}

.bingo {
	background-image:url('images/bingo.jpg');
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding-top:9%; padding-bottom:9%
}

.price {
	background-image:url('images/price_tag.jpg');
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding-top: 8%; padding-bottom: 8%; 
  font-size: 20pt; font-weight: 600; text-align: center; 
}











/* ------------------------------ Dise�o de las pesta�as -------------------------- */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    padding: 10px 12px;
    
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
/* ------------------------------ Fin del dise�o de las pesta�as --------------------------*/


















/* ------------------------------Dise�o de los globos de comentarios 'Tooltip' --------------------------*/
.tooltip{
		display: inline;
		position: relative;
}

.tooltip:hover:after{
		background: #333;
		background: rgba(0,0,0,.8);
		border-radius: 5px;
		bottom: 26px;
		color: #fff;
		content: attr(title);
		left: 20%;
		padding: 5px 15px;
		position: absolute;
		z-index: 98;
		width: 220px;
}

.tooltip:hover:before{
		border: solid;
		border-color: #333 transparent;
		border-width: 6px 6px 0 6px;
		bottom: 20px;
		content: "";
		left: 50%;
		position: absolute;
		z-index: 99;
}

/* ------------------------------Dise�o de los globos de comentarios English --------------------------*/
.tooltipEN{
		display: inline;
		position: relative;
}

.tooltipEN:hover:after{
		text-align: left;
		background: #333;
		background: rgba(0,0,0,.8);
		border-radius: 5px;
		bottom: 60px;
		color: #fff;
		content: attr(title);
		left: 20%;
		padding: 5px 15px;
		position: absolute;
		z-index: 98;
		width: 220px;
}

.tooltipEN:hover:before{
		border: solid;
		border-color: #333 transparent;
		border-width: 6px 6px 0 6px;
		bottom: 20px;
		content: "";
		left: 50%;
		position: absolute;
		z-index: 99;
}
/* ------------------------------Dise�o de los globos de comentarios Deutsch --------------------------*/
.tooltipDE{
		display: inline;
		position: relative;
}

.tooltipDE:hover:after{
		text-align: left;
		background: #333;
		background: rgba(0,0,0,.8);
		border-radius: 5px;
		bottom: 26px;
		color: #fff;
		content: attr(title);
		left: 20%;
		padding: 5px 15px;
		position: absolute;
		z-index: 98;
		width: 220px;
}

.tooltipDE:hover:before{
		border: solid;
		border-color: #333 transparent;
		border-width: 6px 6px 0 6px;
		bottom: 20px;
		content: "";
		left: 50%;
		position: absolute;
		z-index: 99;
}

/* ------------------------------Fin Dise�o de los globos de comentarios 'Tooltip' --------------------------*/



a:link {
        color: blue;
        text-decoration:none;
}

a:hover {
        color: #000;
        text-decoration:none;
}


#foot {
        width: 100%;
        height: 100px;
        background-color:#001886;
				border: 1px #B7B7B7 solid;
        padding-top: 15px;
        color: white;
}
#foot a:link {
        color: #ffffff;
        text-decoration:none;
}

#foot a:visited {
        color: #ffffff;
        text-decoration:none;
}

#foot a:hover, #right a:active {
        color: #000000;
}