@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

#principal {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
}

#logo {
  position: absolute;
  top: 3%;
  left: 0;
  width: 37%;
  height: auto;
}

.menu_portada li {
  list-style: none;
  float: right;
  width: 19%;
  margin: 1%;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
}
.menu_portada li a:hover {
  font-weight: bold;
  text-decoration: none;
}
.menu_portada {
  position: absolute;
  top: 3%;
  right: 0;
  width: 60%;
  margin: 2%;
}
#titulo_portada {
  position: absolute;
  top: 30%;
  left: 2rem;
}
#titulo_portada h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0;
}
#titulo_portada h2 {
  font-size: 3.3rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  margin: 0;
}
#tit {
  margin: 3rem 2rem 4rem;
}
#tit img {
  position: absolute;
  z-index: 2;
  width: 12%;
  margin-top: -1.5rem;
}
#label {
  padding: 0px 6rem;
  position: relative;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  white-space: nowrap;
  background: #fdf8f0;
  line-height: 3rem;
  width: 85%;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: #024d55;
  font-weight: 500;
}
#label p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: #024d55;
  font-weight: 500;
}
#label::before {
  content: "";
  width: 88px;
  position: absolute;
  height: 49px;
  left: 0;
  top: 0;
  font-weight: 600;
}
#titulo {
  background: url("pix/fondo.jpg");
  font-size: 1.2rem;
  margin-top: 1rem;
  padding: 2.5rem 0 0 15rem;
  position: relative;
  margin-bottom: 1rem;
  white-space: nowrap;
  color: #FFF;
  width: 90%;
  height: 150px;
}
#titulo p, #titulo h5 {
  margin: 0;
  font-weight: lighter;
  font-size: 2rem;
  color: #00342e !important;
  font-family: 'Bebas Neue', Bebas Neue !important;
  padding-bottom: 0.5rem !important;
}
#titulo h3 {
  font-weight: lighter;
  padding-top: 0.8rem;
  font-size: 2rem;
  color: #dfa621 !important;
  margin: 0;
  font-family: 'Bebas Neue', Bebas Neue !important;
  font-size: 2.5rem;
}
#titulo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 17%;
  height: 100%;
  width: 250px;
  left: 0;
  background: url("pix/img_banner.png");
  background-size: cover;
}
#titulo::after {
  content: "";
  width: 8%;
  position: absolute;
  height: 120px;
  right: 0;
  background: url("pix/img_recursos_right.png");
  background-size: auto;
  background-size: cover;
  bottom: 0;
  z-index: 100;
}

.enlinea_claqueta_desc {
  padding: 18pt 2%;
  margin: 2rem 7% 0.5rem;
  border: solid 1pt #ddd;
}
.enlinea_claqueta_desc hr {
  border-color: #dea91e;
  border-width: 2px;
}
.enlinea_claqueta_desc h1, .enlinea_claqueta_desc h2, .enlinea_claqueta_desc h3, .enlinea_claqueta_desc {}
#internas {
  background: url(pix/fondo.jpg);
  font-size: 1.2rem;
  margin-top: 1rem;
	margin: auto;
  padding: 3rem 0 0 16rem;
  position: relative;
  margin-bottom: 1rem;
  white-space: nowrap;
  color: #FFF;
  width: 90%;
  height: 150px;
}

.enlinea_claqueta_desc .botones td {
    font-size: 1.1rem;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 0.5rem 0;
    line-height: 1.3rem;
}

.enlinea_claqueta_desc .botones .boton:hover {
    background: #dfe8e2;
    cursor: pointer;
}

#internas p, #internas h5 {
  margin: 0;
  font-weight: lighter;
  font-size: 2rem;
  color: #00342e !important;
  font-family: 'Bebas Neue', Bebas Neue !important;
  padding-bottom: 0.5rem !important;
}
#internas h3 {
  font-weight: lighter;
  padding-top: 0.8rem;
  font-size: 2rem;
  color: #dfa621 !important;
  margin: 0;
  font-family: 'Bebas Neue', Bebas Neue !important;
  font-size: 2.5rem;
}
#internas::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 17%;
  height: 100%;
  width: 265px;
  left: 0;
  background-size: cover;
}
#internas::after {
  content: "";
  width: 8%;
  position: absolute;
  height: 120px;
  right: 0;
  background: url("pix/img_recursos_right.png");
  background-size: auto;
  background-size: cover;
  bottom: 0;
  z-index: 100;
}


/**LIBRO**/

#portada_libro {
    position: relative;
    width: 100%;
}
#portada_libro::before {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 0;
    content: "";
    background: url("pix/librotop.svg") no-repeat;
    height: 50%;
    background-size: cover;
	background-position: left top;
}
#portada_libro img {
    width: 100%;
}
#portada_libro::after {
    width: 100%;
    position: absolute;
    bottom: 0;
	left: 0;
    z-index: 2;
    content: "";
    background: url("pix/libro_bottom.svg") no-repeat;
    height: 55%;
    background-size: cover;
	background-position: right bottom;
}
#portada_libro #tit_portada {
    position: absolute;
    z-index: 20 !important;
    bottom: 4%;
    left: 4%;
    width: 80%;
}
#portada_libro #tit_portada h3 {
    color:  #DDA71D;
    font-weight: normal !important;
    line-height: 19px;
    font-size: 2rem;
}
#portada_libro #tit_portada p {
    color: #fff;
    font-size: 1.4rem;
}


.libro_internas {
    padding: 18pt 2%;
    margin: 2rem 2% 0.5rem;
    border: solid 1pt #ddd;
    background: url("pix/img_recursos_right.png") no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
    background-position: bottom right;
    min-height: 383px;
}

.libro_internas hr {
  border-color: #dea91e;
  border-width: 2px;
}
/**INTERNAS**/
.avisos::before {
  background: url("pix/anuncios.png") no-repeat;
  background-size: cover;
}
.preguntas::before {
  background: url("pix/preguntas.png") no-repeat;
  background-size: cover;
}
.foro::before {
  background: url("pix/foro.png") no-repeat;
  background-size: cover;
}
.tarea::before {
   background: url("pix/encuesta.png") no-repeat;
  background-size: cover;
}
.cuestionario::before {
  background: url("pix/prueba.png") no-repeat;
  background-size: cover;
}
.video::before {
  background: url("pix/video.png") no-repeat;
  background-size: cover;
}
.pagina::before {
  background: url(pix/papel.png) no-repeat;
  background-size: cover;
}
.juego::before {
  background: url(pix/juego.png) no-repeat;
  background-size: cover;
}
.podcast::before {
  background: url("pix/podcast.png") no-repeat;
  background-size: cover;
}
/**etiquetas**/

.recursos::before {
  background: url(pix/recursos.png);
  background-size: cover;
}
.actividades::before {
  background: url(pix/actividad.png);
  background-size: cover;
}
.comunicacion::before {
  background: url("pix/comunicacion.png");
  background-size: cover;
}
.evaluacion::before {
  background: url("pix/evaluacion.png");
  background-size: cover;
}
.informacion::before {
  background: url("pix/informacion.png");
  background-size: cover;
}

.glosario::before {
  background: url("pix/glosario.png");
  background-size: cover;
}
.wiki::before {
  background: url("pix/wiki.png");
  background-size: cover;
}
.carpeta::before {
  background: url("pix/carpeta.png");
  background-size: cover;
}
.videoconferencia::before {
  background: url(pix/videoconferencia.png);
  background-size: cover;
}

/**TITULOS**/

.uno::before {
  content: "1" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.dos::before {
  content: "2" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.tres::before {
  content: "3" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.cuatro::before {
  content: "4" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.cinco::before {
  content: "5" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.seis::before {
  content: "6" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.siete::before {
  content: "7" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.ocho::before {
  content: "8" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.nueve::before {
  content: "9" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}
.cero::before {
  content: "0" !important;
  font-size: 2.5rem;
  padding: 2.5rem 1rem;
}


/**guia- cronograma**/

#cronograma {

    width: 94%;
    margin: 3%;
}

#cronograma tr:first-child {
    background: #073030;
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

#cronograma tr:nth-child(4) {
    border-bottom: solid 2px #073030;
}
#cronograma .rowspaned {
    background: #445a5b;
    color: #fff;
    text-align: center;
}
#cronograma td {
    padding: 1%;
    border: 1px #445a5b solid;
}
#cronograma td:last-child, #cronograma td:nth-child(3) {
    width: 20% !important;
}