html {font-family: sans-serif;}
body {background: #F0F0F0; margin: 0; padding: 0; width:100%;}

ul {list-style-type: none;}
a {text-decoration: none;}
#active {background-color: #F5F5F5; color: #20B2AA;}
#menuresponsive {display:none;}

i {
  border: solid #20B2AA;
  border-width: 0 3px 3px 0;
  transform: rotate(-135deg);
  display: inline-block;
  padding: 3px;
}

#btnTop {
  display:none;	
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 99;
  border: solid 2px #20B2AA;
  outline: none;
  opacity: 0.6;
  background-color: #fff;
  color: white;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 50%;
  box-shadow: 4px 3px 3px #20B2AA;
}

#btnTop:hover {
	background-color: #fff;
	opacity:1;
}

/* -- REDES SOCIALES -- */
.fa {
  padding: 16px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius:50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

/*-- MODAL BOX --*/
/* Modal Content */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
}

.modal-header {
    padding: 2px 20px;
    background-color: #00BFFF;
    color: white;
}

.modal-header h2 {
	font-size: 34px;
	width:70%;
}

.modal-body {
	padding: 16px;
	text-align: center;
	font-size: 26px;
	font-family:"Oswald";
	color: #444;
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/*------LATERALES------------------*/
#social {
	padding:20px;
}

#especialidad {
	width:3.4%;
	height:100%;
	background:#fff;
	position:fixed;
	left:0px;
	padding:2px;
	color:#70dbdb;
	font-size:40px;
	top:0px;
	font-family:Lobster;
	border:solid #fff 3px;
	box-shadow: 0px 0px 20px 10px #ccfff5;
	writing-mode: vertical-lr;
	text-align: center;
	transform: rotate(180deg);
}

#especialidad.infantiLat {
	color: #fb3;
	box-shadow: 0px 0px 20px 10px #ff8;
}

#especialidad.primariaLat {
	color: #DC143C;
	box-shadow: 0px 0px 20px 10px #F08080;
	opacity: 0.7;
}

#especialidad.secundariaLat {
	color:#20BFAA;
	box-shadow: 0px 0px 20px 10px #AFEEEE ;
}
	
#fin1 {
	width:35%;
	float:left;
}

#imgfondo {
	width:22%;
	float:left;
}

#imgfondo img {width:100%;}	

#fin2 {
	width:35%;
	float: left;
}	

#paypal {
	margin-right: 25%;
	margin-left: 25%;
}
/*--------------/LATERALES-----------*/

textarea {width: 90%; padding: 10px;}
form {width: 90%; text-align: justify;}

#contenedor {
	margin-top: 9%;
	margin-left: 10%;
	margin-right: 5%;
	margin-bottom: 5%;
	font-size: 14px;	
	line-height: 24px;
	width:89%;
}

#contenedor p {font-size: 20px;width: 90%; line-height: 30px; opacity: 0.86;}

li {padding-bottom: 5px;}

select {width: 90%; font-size: 16px; padding: 6px; color: #333;}

h2 {font-family: Oswald; text-align: justify; opacity:0.9; font-size:26px;}

h3 {font-family: 'Lobster'; font-size: 22px; line-height:40px;}

h4 {font-size: 32px; font-family: 'Oswald'; opacity: 0.6; font-weight: normal; text-align: center; line-height: 40px;}

#estructuraprog {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	position: relative;
	top: 80px;
	text-align: justify;
	font-size: 26px;
	line-height: 34px;
	top: 80px;
	font-family: Oswald;
}

#descripcion {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	position: relative;
	top: 80px;
	text-align: justify;
	font-size: 26px;
	line-height: 34px;
	top: 80px;
	font-family: Oswald;
	}
	
#descripcion h3 {
	font-size: 40px;
}

#descripcion p {
	opacity: 0.92;
}	

.descripcion2 {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	position: relative;
	text-align: justify;
	font-size: 24px;
	line-height: 30px;
	top: 90px;
	opacity: 0.86;
	font-family: Oswald;
}

.descripcion3 {
	width: 100%;
	position: relative;
	text-align: justify;
	font-size: 24px;
	line-height: 30px;
	opacity: 0.86;
	font-family: Oswald;
}

/*----------PORTADA----------*/
#index h1 {font-family: 'Lobster'; text-align: center; font-size: 160px; position: relative; top: -20px;}

#index p {
	text-align: center;
	font-size: 42px;
	position: relative;
	top: -120px;
	font-family: 'Oswald', sans-serif;
	opacity: 0.6;
}

#butempezar {
	background: #70dbdb;
	padding: 16px;
	width: 100%;
	text-align: center;
	font-size: 24px;
	font-family: 'Oswald', sans-serif;
	color: #fff;
	border: solid 8px #d6f5f5;
	border-left: 0px;
	border-right: 0px;
	box-shadow: 0px 8px 20px #777;
	position: absolute;
	bottom: 8%;
}

#butempezar:hover {
	background: #d6f5f5;
	border: solid 8px #d6f5f5;
	color: #333;
	box-shadow: 0px 5px 20px;
	font-size: 26px;
}

#butempezar a {
	text-decoration: initial;
}

#butempezar i {
	text-shadow: 2px 1px 3px #777;
}

#indexdescripcion {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

#indexdescripcion p {
	font-size: 24px;
}

/*----------MENU----------*/
#esquemalateral {
	position: fixed;
	bottom: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background: #fff;
	font-family: 'Lobster';
	font-size: 22px;
	z-index: 1;
	text-align: center;
}

#esquemalateral li {
	display: inline;
	margin: 0px;
	padding: 20px;	
}

#esquemalateral a {
	color: #444;
	margin: 0px;
	padding: 0px;
}

#esquemalateral li:hover {
	color: #20B2AA;
	opacity: 0.7;
}

/*--------TITULOS------------*/
.title {
	position: fixed;
	z-index: 1;
	top: 0px;
	width: 100%;
	height: 7%;
	margin: 0px;
	background-color: #444;
	padding: 2px 0px 12px;
	text-align: center;
	font-size: 40px;
	color: #fff;
	font-family: 'Lobster', cursive;
}

/*----------BUTTONS------------*/
.but{
	padding: 20px; 
	margin: 6px; 
	border: 2px solid #d6f5f5; 
	width: 90%; 
	background:#70dbdb; 
	font-size: 14px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
	}
.but:hover {
	background-color:#ccfff5;
	box-shadow: 1px 6px 20px #aaa; 
	border: 2px solid #70dbdb; 
}

.but1 {
	padding: 36px; 
	margin: 10px; 
	border: 2px solid #70dbdb; 
	width: 90%;
	background:#70dbdb; 
	font-size: 20px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
}
.but1:hover{
	background-color:#ccfff5;
	box-shadow: 1px 6px 20px #aaa; 
}

.butSec1 {
	padding: 36px; 
	margin: 10px; 
	border: 2px solid #20B2AA; 
	width: 90%;
	background:#20B2AA; 
	font-size: 20px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
}

.butSec1:hover{
	background-color:#87CEFA;
	box-shadow: 1px 6px 20px #aaa; 
}

.butInf {
	padding: 36px; 
	margin: 10px; 
	border: 2px solid #FFF; 
	width: 90%;
	background:#fc3; 
	font-size: 20px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
}

.butInf:hover{
	background-color:#ff8;
	box-shadow: 1px 6px 20px #aaa; 
	border: 2px solid #FFA500; 
}

.butPrim {
	padding: 20px; 
	margin: 6px; 
	border: 2px solid #fff; 
	width: 90%;
	background:#DC143C; 
	font-size: 14px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
}

.butPrim:hover{
	background-color:#F08080;
	border: 2px solid #DC143C;
	box-shadow: 1px 6px 20px #aaa; 
}

.butSec{
	padding: 20px; 
	margin: 6px; 
	border: 2px solid #fff; 
	width: 90%;
	background:#20B2AA; 
	font-size: 14px; 
	text-align: center; 
	border-radius:5px; 
	color: #051414; 
	font-weight: bold;
}

.butSec:hover{
	background-color:#87CEFA;
	border: 2px solid #20B2AA;
	box-shadow: 1px 6px 20px #aaa; 
}

.butoutro{
	width: 20%;
	background: #eee;
	border: 2px solid #222;
	font-size: 14px;
	text-align: center;
	color: #222;
	font-size: 22px;
	font-family: oswald;
	padding: 6px;
	margin: 10px;
	border-radius: 15px;
}

.butoutro:hover {
	background: #222;
	border: 2px solid #777;
	color: #eee;;
}

.butcon {
	margin-top: 80px;
	width:100%;
	margin-left: 1%;
	margin-right: 1%;
}

.but2:hover {
	background-color:#ccfff5;
	box-shadow: 1px 6px 20px #aaa; 
}

.but2{
	padding: 15px; 
	margin: 10px; 
	border: 2px solid #d6f5f5; 
	width: 44%; 
	background-color:#99ffe6; 
	font-size: 14px; 
	text-align: center; 
	border-radius:5px; 
	color:#333;
	font-weight: bold;
}

/*#descarga {
	position: absolute;
	width:80%;
	text-align:center;
	font-family: Oswald;
	font-size: 46px;
	background-color: #99ffe6;
	color: #fff;
	border: solid 6px #d6f5f5;
	border-radius:18px;
	padding: 30px;
}

#descarga:hover {
	background-color: #d6f5f5;
	border: solid 6px #99ffe6;
	color: #99ffe6;
	font-size: 36px;
}

#amazon {
	background-color: #fff;
	border:solid 6px #f0f0f0;
	margin-left:25%; 
	margin-right:25%;
	border-radius: 18px;
	padding: 15px;
}

#amazon:hover {
	background: #ffd0ae;
}*/

.butmateria {
	width:45%;
	margin:16px;
	margin-left:-5px;
	height:100px; 
	padding:20px;
	font-family: Oswald;
	font-size:30px;
	border-radius: 20px;
	border: solid 3px #00B276;
	background-color: #fff;
	color: #222;
}

.butmateria:hover{
	color:#00B276;
}

/*----------------OBJETIVOS---------------*/	
#butobj1 {
	padding: 30px;
}


/*-------------CONTENIDOS-----------------*/

#conccaa {
	width:45%;
	float: left;
}

#conbas {
	width:45%;
	float: left;
	padding: 10px;
}

#conbas #butcon {
	position: relative;
	top: -90px;
}

.elegirNivelConten {
	padding: 4px; 
	border: 2px solid #414652; 
	width: 46%; 
	margin: 0px;
	background: #EEEEEE;
	opacity: 0.8; 
	font-size: 26px; 
	text-align: center; 
	border-radius:5px; 
	color: #0A152E;
	font-family: oswald;
}

#CCAA {
	
}

#CCAA .but2 {
	width:32%;
	margin: 2px;
	margin-top: 8px;
}

#contencon{
	clear: left;
}

/*-------------- PÁGINA PRINCIPAL ----------------*/

#guiabut{
	position: relative;
	top: 60px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

#guialegislacion{
		display: none;
}

.submenu{
	display: none;
	text-align: center;
}

.submenu a{
	text-decoration: none;
	color: #333;
	font-weight: bold;
}

.submenu a:hover{
	color: #2F4F4F;
}

/*----------------CONTACTO--------------*/
#contacto {
	position: relative;
	top: 20px;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}

/*---------COMPETENCIAS CLAVE----------*/
.competenciasclave {
	text-align: justify;
	width:86%;
	display:none;
}