@import url('https://fonts.googleapis.com/css?family=Dosis');
		@import url('https://fonts.googleapis.com/css?family=Handlee');
		@import url('https://fonts.googleapis.com/css?family=Handlee|Pathway+Gothic+One');
		@import url('https://fonts.googleapis.com/css?family=Quicksand');


		article{
			background: #f5564a;
			box-shadow: 0px 3px 5px #888888;

		}

		footer{
			background-color: #5f5f5f;
			text-align: center;
			padding: 0px;
			border: 2px dotted black;

		}

		body{
			background-image: url("http://eddi.ittepic.edu.mx/pluginfile.php/62657/mod_page/content/2/34-01.jpg");
			align-content: center;

		}
		nav{
			color: white;
			background-color: #5f5f5f;
			box-shadow: 0px 3px 5px #888888;
			font-family: 'Dosis', sans-serif;
			text-transform: uppercase;
			overflow: auto;
			opacity: 0.95;
		}

		.categoria h2{
			font-family: 'Pathway Gothic One', sans-serif;
			color: white;
			text-align: center;
			margin: 0px;
			float: left;
		}

		#div_principal{
			margin: auto;
			background-color: white;
			width: 70%;
			border: 1px solid black;
			font-family: Arial, Sans-Serif;
		}

		h1{
			font-family: 'Baloo Paaji', cursive;
			color: #3f3f3f;
			margin: 20px;
			text-shadow: 2px 2px 5px #888888;

		}

		p{
			color: white;
			align-content: center;
		}

   a{
			color: white;
			text-decoration: none;
		}

		nav a:hover{
			background-color: orange;
		}

		nav a{
			display: block;
			text-decoration: none;
			padding: 10px;
		}

		article a:hover{
			color: yellow;
		}

		article:hover{
			box-shadow: 0px 3px 12px #333333
		}

		.categoria{

			background-color: #f5564a;
      width: 100%;
			box-shadow: 0px 3px 5px #888888;
			padding: 1px;
			float: left;

		}

		.margen{
			padding: 2%;
		}


		main{
			overflow: auto;
		}

		.principal{
			background-color: #4caf50;
			width: 100%;
			box-shadow: 0px 3px 5px #888888;
			font-family: 'Handlee', cursive;
			text-align: center;
			color: white;
      border-radius: 25px;
		}

		.cabecera{
			background-color: maroon;
			overflow: auto;
		}

		h1{
			color: white;
		}

		header{
			background-color: #F5923F;
			padding: 1px
		}

		h2 img{
			filter: invert(95%);
			color: white;
		}

		ul{
			font-family: 'Quicksand', sans-serif;
		}

		.ocultar{
			display: block;
			float:right;
			cursor: pointer;
			margin: 10px;
			filter: invert(100%);
		}

		.menu-item{
			float: left;
			padding: 10px;
		}


		nav ul{
			list-style: none;
			margin: 0px;
			padding: 0px;

		}

		nav li{
			width: 120px;
			font-family: "Century Gothic";
			background-color: #5f5f5f;
		}

		.submenu{
			display: none;
			position: absolute;
			margin: 10px;
		}

		.menu-item:hover .submenu{
			display: block;
		}

		nav li:hover{
			background-color: orange;
		}

		@@keyframes animacion {
			from{
        display: none;
			}
			to{
        display: block;
			}
		}

		.menu-item:hover .submenu{
			animation-name: animacion;
			animation-delay: 4s;
		}