@font-face{
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-UltraLight.eot');
    src: local('Fira Sans UltraLight'),
         url('../font/FiraSans-UltraLight.eot') format('embedded-opentype'),
         url('../font/FiraSans-UltraLight.woff') format('woff'),
         url('../font/FiraSans-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face{
    font-family: 'Fira Sans';
    src: url('../font/FiraSans-HairItalic.eot');
    src: local('Fira Sans Hair Italic'),
         url('../font/FiraSans-HairItalic.eot') format('embedded-opentype'),
         url('../font/FiraSans-HairItalic.woff') format('woff'),
         url('../font/FiraSans-HairItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'ds-digitalnormal';
    src: url('../font/ds-digi-webfont.eot');
    src: url('../font/ds-digi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/ds-digi-webfont.woff2') format('woff2'),
         url('../font/ds-digi-webfont.woff') format('woff'),
         url('../font/ds-digi-webfont.ttf') format('truetype'),
         url('../font/ds-digi-webfont.svg#ds-digitalnormal') format('svg');
    font-weight: normal;
    font-style: normal;

}
img, iframe, video{max-width: 100%}
nav, section, aside{display: inline-block;vertical-align: top;width: 20%}
section{width: 58%}
.firefox{font-family: 'Fira Sans';}
.google{font-family: 'Open Sans', sans-serif;}
body{font-family: 'Open Sans', sans-serif;}
ul{list-style: none;}
a{color: #666;text-decoration: none;}
a:hover{color: #0f0}
header{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;}
h1{padding-left: 20%;}
h2{color: #15375F}
h3, .fecha{font-style: italic;}
.readmore a{color: #15375F;font-family: Helvetica, sans-serif;}
.readmore a:hover{color: #f0f}
.footer{font-family: 'Fira Sans';text-align: center;}
.imagen{float: left;margin-right: 1em;width: 12.5em}
.nav li{display: inline-block;vertical-align: top;}
.fondo{background: url(../images/mapa.jpg) no-repeat bottom center / 100% ,  url(../images/linux.jpg) no-repeat top right / 50%,
    url(../images/icono-papel.jpg) no-repeat top left / 15%;
    background-image: url(../images/mapa.jpg),  url(../images/linux.jpg), url(../images/icono-papel.jpg);
    background-size: 100%, 50%, 15%;
    background-position: bottom center, top right, top left;
    background-repeat: no-repeat, no-repeat, no-repeat;
    border:#0f0 solid 2px;border-radius: 1em 0;box-shadow: 1em 1em 1em #999;height: 30em;
    margin: 0 auto;width: 30em}
.cronometro{background: url(../images/cronometro.jpg) top center no-repeat;height: 225px;
  position: relative;width: 185px}
#crono{font-family: 'ds-digitalnormal';font-size: 3em;left: 45px;position: absolute;
  top: 67px;width: 100px;}    
@media only screen and (max-width: 767px) {
   nav, section, aside{display: inline-block;vertical-align: top;width: 100%}
   iframe{height: 25.75em}
}
@media only screen and (max-width: 600px) {
   iframe{height: 20em}
}
@media only screen and (max-width: 480px) {
    h1{padding-left:0;text-align: center;}
   .imagen{float: none;margin: 0 auto 1em}
   iframe{height: 15em}
   .fondo{height: 12em;width: 25em;}
}