*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}

/*Título de bienvenida*/
h1{
	font-family: calibrí;
	font-size: 250%;
	margin-left: -25%;
}

/* Mensaje de bienvenida*/
.welcome{
	font-family: calibrí;
	font-size: 150%;
	margin-right: 70px;
	margin-left: 70px;
}

#Logo{
	width: 250%;
	height: 200px;
}

/*.Contenedor
{
	background-image: url("../img/fondoheader1.png");
	background-repeat: no-repeat;
	background-size: 300% auto;
} */


/*Encabezado de creadores de la plataforma*/
h3{
	font-family: calibrí;
	font-size: 150%;
	margin-right: 70px;
}

/*Integrantes de la creación de la plataforma*/
h4{
	font-family: calibrí;
	font-size: 120%;
	margin-left: 70px;
}

/*Tabla que contiene el ordenamiento del logotipo de la plataforma y titulo de bienvenida*/
table, th, td {
  
  width: 1540px;
}

/*Div que contiene toda la barra de navegación junto con todo lo que contiene*/
#header{
	width: 100%;
	font-family: Arial;
}


/*Estilo de la lista desplegable*/
ul, ol {
	list-style: none;
}

h1 i{
	color: white;
}

h4 p{
	margin-left: -7em;
}


/*Barra de navegación*/
.nav li a {

	background-color: #DF7401 ;
	color: #FFF;
	text-decoration: none;
	padding: 20px 70px;
	display: block;
	z-index: 10;
	width: 100%;
	padding: 20px 59px;

}

/*Condición que nos permite colocar o ubicar la barra de navegación dentro de la página */
.nav > li {
	float: left;
}

/*Color y borde de la lista de la barra de navegación(color azul) */

.nav li a:hover {
	background-color: #0404B4;
	border: double;
}

/*Declaramos que la lista desplegable(contenidos como inicio, categoría,etc) tenga un posicionamiento absoluto*/
.nav li ul {
	display: none;
	position: absolute;
	min-width: 140px;
}

/*Añadimos un margen en los iconos de cada una de las secciones de navegación para que aparezcan a lado del titulo*/
.nav ul li span{
	margin-right: 1.5em;
}


.nav li:hover>ul {
display: block;
}

/*Declaramos que la segunda lista desplegable tenga un posicionamiento que se pueda variar con medidas especificas*/
.nav li ul li {
	position: relative;
}

/*Posicionamiento de la segunda lista desplegable*/
.nav li ul li ul {
	left: 240px;
	top: 0px;
}

/*Posicionamiento de la segunda lista desplegable(maestros)*/
.nav li ul li ul.teacher {
	left: 240px;
	top: 0px;
	width: 95%;
}

/*Color de la segunda lista desplegable(maestros) al pasar el cursor*/
.nav li ul li ul.teacher a:hover {
	background-color: green;
}

/*Color de la segunda lista desplegable al pasar el cursor*/
.nav li ul li ul a:hover {
	background-color: green;
}

/*Color de la primer lista desplegable al pasar el cursor*/
.nav li ul a:hover {
	background-color: orangered;
}

/*Hipervinculo de Salir*/
.btn-salir{
	margin-left: 95%;
	font-family: calibrí;
	font-size: 135%;
	text-decoration: none;
}

/*Hipervinculo de Menú*/
.btn-menu{
	display: none;

}





@media only screen and (min-width: 481px) and (max-width: 768px) {

table, th, td {
  
  width: 100%;
}


h1{
	font-size: 240%;
	margin-left: -180%;
}

#Logo{
	width: 200%;
	height: 200px;
}

	img{
		height: 250px;
		width: 290px;
	}

.btn-salir{
	margin-left: 90%;
	text-decoration: none;

}

.nav li a {

	background-color: #DF7401 ;
	color: #FFF;
	text-decoration: none;
	padding: 20px 36px;
	z-index: 10;
}

#header{
	margin-left: -5px;
	width: 110%;
	font-family: Arial;
}

.nav li ul li ul {
	left: 90%;
	top: 0px;
	width: 95%;
}

.nav li ul li ul.teacher {
	left: 90%;
	top: 0px;
}

.nav{
	width: 10%;
	height: 100%;
	left: -120%;
	margin: 0;
	position: relative;
}

.menu{
	width: 100%;
	background: #ccc;
}

.menu .btn-menu{
	display: block;
	padding: 1.1em;
	background: #DF7401;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2em;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}


}


@media only screen and (min-width: 320px) and (max-width: 480px) {

		
table, th, td {
  width: 100%;
}

h1{
	font-size: 143%;
	margin-left: -170%;
}

#Logo{
	width: 200%;
	height: 170px;
}


img{
		height: 240px;
		width: 270px;
}

.btn-salir{
	margin-left: 80%;
	text-decoration: none;
	font-family: calibrí;
	font-size: 115%;
}

.btn-menu{
	margin-left: 25px;
	font-family: calibrí;
	font-size: 118%;
}

.nav{
	width: 58%;
	height: 100%;
	left: -120%;
	margin: 0;
	position: fixed;
}

.menu{
	width: 100%;
	background: #ccc;
}

.menu .btn-menu{
	display: block;
	padding: 1.1em;
	background: #DF7401;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2em;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}

/* Barra de alumnos*/
.nav li ul li ul {
	left: 75%;
	top: 0px;
	width: 92%;
}

/* Barra de profesores */
.nav li ul li ul.teacher {
	left: 90%;
	top: 0px;
	width: 92%
}

/*Porcentaje del menu deplegable*/
.nav li {
	width: 95%;
}

h1 i {
	font-size: 105%;
}

}


@media only screen and ( orientation: landscape) and (min-width: 769px) and (max-width: 900px)   {


table, th, td {
  
  width: 100%;
}

img{
		height: 250px;
		width: 290px;
}

h1{
	font-size: 240%;
	margin-left: -255%;
}

#Logo{
	width: 200%;
	height: 200px;
}


.btn-salir{
	margin-left: 90%;
	text-decoration: none;
}

.nav li a {

	background-color: #DF7401 ;
	color: #FFF;
	text-decoration: none;
	padding: 20px 49px;
	display: block;
	z-index: 10;
}

/*Div que contiene toda la barra de navegación junto con todo lo que contiene*/
#header{
	margin-left: -1%;
	width: 105%;
	font-family: Arial;
}

.nav li ul li ul {
	left: 80%;
	top: 0px;
}

.nav li ul li ul.teacher {
	left: 80%;
	top: 0px;
}

}


@media only screen and ( orientation: landscape) and (min-width: 900px) and (max-width: 1100px)   {

table, th, td {
  
  width: 100%;
}

	img{
		height: 250px;
		width: 290px;
	}

h1{
	font-size: 240%;
	margin-left: -265%;
}

#Logo{
	width: 200%;
	height: 200px;
}

.btn-salir{
	margin-left: 90%;
	text-decoration: none;
}

/*Div que contiene toda la barra de navegación junto con todo lo que contiene*/
#header{
	margin-left: -1%;
	width: 110%;
	font-family: Arial;
}

.nav li ul li ul {
	left: 80%;
	top: 0px;
}

.nav li ul li ul.teacher {
	left: 85%;
	top: 0px;
}

.nav li a {

	width: 100%;
}