@charset "utf-8";
/* 
	UNIVIA - Universidad Virtual de America
	--------------------------------------------------
	Autor: Cuauhtemoc G. Togo
	Fecha: Marzo 2012
	Contacto: contacto@univia.edu.mx
 */

.esp_vacio {
	width: 900px;
	height: 20px;
}

.esp_clasedemo_top {
	width: 900px;
	height: 20px;	
	background-color:#000;
}

#esp_clasedemo_video {
	background-color:#000;
	color: #000;				
	position:relative;	
	width: 1000px;
	z-index: 2;	
	height: 562px;
	text-align: center;
}

#esp_clasedemo_work {
	color: #ccc;				
	position:relative;	
	width: 1000px;
	height: 120px;
	z-index: 2;	
}

.lado_izq {
	cursor: pointer;
	background-color:#fff;	
	left: 0px;
	height: 120px;
	position: absolute;
	top: 0px;
	overflow: hidden;
	width: 450px;		
}

.lado_izq:hover .datos_dos{
	top: 0px;
}

.lado_izq .titulo {
	position: absolute;
	left: 30px;
	top: 20px;
	font-size: 1.4em;
	color: #243e8d;	
}

.lado_izq .texto {
	position: absolute;
	left: 30px;
	top: 50px;
	font-size: 1.2em;
}

.lado_izq .datos_uno {
	position: absolute;
	left: 0px;
	height: 120px;
	top: 0px;
	width: 450px;
}

.lado_izq .datos_dos {	
	background-color: #132448;
	left: 0px;
	height: 120px;
	position: absolute;
	top: -120px;
	width: 450px;

	/*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.lado_der {
	cursor: pointer;
	background-color:#fff;	
	left: 450px;
	height: 120px;
	position: absolute;
	top: 0px;
	overflow: hidden;
	width: 450px;	
}

.lado_der .datos_uno {
	position: absolute;
	left: 0px;
	height: 120px;
	top: 0px;
	width: 450px;
}

.lado_der .datos_dos {	
	background-color: #132448;	
	left: 0px;
	height: 120px;
	position: absolute;
	top: -120px;
	width: 450px;

	/*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.lado_der:hover .datos_dos{
	top: 0px;
}

.lado_der .titulo {
	position: absolute;	
	left: 115px;
	top: 45px;
	font-size: 1.8em;
	color: #243e8d;
	width: 220px;
	height: 30px;
	text-align: center;	
}

.datos_dos > .titulo {
	color: #a7d6f9;
}

.datos_dos > .texto {
    color: #fff;
}

.mozaicoClase {
  border: solid 4px transparent;
  cursor: pointer;
  display: inline-block;
  margin: 10px 10px;
  min-height: 200px;
  position: relative;
  vertical-align: top;
  width: 200px;
}

.mozaicoClase > .imagen {
  background: url(../img/duva2014/negativos/ico_materia_neg_48.png);
  height: 48px;
  margin: 20px auto;
  width: 48px;
}

.mozaicoClase > .nombre {
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}