@font-face{
    font-family: 'Fira Mono';
    src: url('eot/FiraMono-Bold.eot');
    src: url('http://mozilla.github.io/Fira/woff/FiraMono-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face
{
    font-family: Roboto;
    src: url('https://www.google.com/fonts#UsePlace:use/Collection:Roboto/Roboto.ttf') format("ttf");
}

/*Barra de navegacion*/
#menu
{
    padding:0;	
}

#menu ul
{
    list-style:none;    
    padding:0;
    display: inline;
}

#menu ul li
{
    display: inline;
}


#menu ul li a
{
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #2175bc;
    color: #fff;	
    padding-top: 8px;
    margin-top: 3px;
    margin-left: 3px;    
}

#menu ul li a:hover 
{
    background-color: #2586d7;
    margin-top:-2px;
    padding-bottom:12px;
}

body 
{ 
  font-family: 'Fira Mono';               
  background-color: lightsalmon;
}

h1
{
    color: red;
    text-align: center;
    font-family: 'Arial';
    font-size: 45px;

}

h2
{
    color: blue;
    text-align: center;
    font-family: Roboto;
    font-size: 25px;
}

h3
{
    color: #7623a9;
    text-align: center;
    font-family: Roboto;
    font-size: 15px;
}

header{

   background-color: gainsboro;   
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;   
}

#columna 
{
    float: right;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    background: rgba(183, 210, 245, 0.67);
    text-align: left;
    position: fixed;
    right: 0px;
    bottom: 152px;
    top: 220px;
}

nav{
   display: block;
   margin: 4px;
   padding: 5px;
   height: 36px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #F3F781;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;   
}

article{

    display: block;
    float: left;
    margin: auto;
    margin-left: 35px;
    margin-right: 18px;
    margin-bottom: 20px;
    width: 70%;
    border: 1px solid grey;
    border-radius: 0 18px 18px 0;
    background: #b3dced;
    background: -moz-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
    background: -webkit-linear-gradient(left, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
    background: linear-gradient(to right, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 );

}

section{
   display: block;
   margin-top: 40px;
   border: 1px solid grey; 
   background: white;
   border-radius: 18px 0 0 18px;
   box-shadow: -5px -5px 5px #888;

   float: left;
   width: 80%; /*950px; /*Ancho del texto*/
   margin: 10px;

}


footer{

	clear: both;
	text-align: center;
	padding: 20px;
	border-top: 2px solid #999999;
	
   dislay: block;
   width: 90%;
   
   text-align:center;
   height: 50px;
   background: white;
   border: 1px solid grey;  
   border-radius: 50%;  
   box-shadow: 0 0 5px 5px #888;
}

aside
{
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    -webkit-flex: 1 6 18%;
    flex: 1 6 18%;
    -webkit-order: 3;
    order: 3;
    float: right;        
}