/* Hoja de Estilos JT03 */

@font-face {
    font-family: 'cabinsketch';
    src: url('font/cabinsketch-bold-webfont.eot');
    src: url('font/cabinsketch-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/cabinsketch-bold-webfont.woff') format('woff'),
         url('font/cabinsketch-bold-webfont.ttf') format('truetype'),
         url('font/cabinsketch-bold-webfont.svg#cabinsketchbold') format('svg');
    font-weight: bold;
    font-style: normal;

}




@font-face {
    font-family: 'cabin_sketch';
    src: url('font/cabinsketch-regular-webfont.eot');
    src: url('font/cabinsketch-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/cabinsketch-regular-webfont.woff') format('woff'),
         url('font/cabinsketch-regular-webfont.ttf') format('truetype'),
         url('font/cabinsketch-regular-webfont.svg#cabin_sketchregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body, html {
     background-color: #ccc;
        width: 100%;
        height: 100%;
    font-family: Arial;
            }
header {
     background-color: #ff0000;
        width: 100%;
        height: 100%
            }
article {
    font-family: 'cabinsketch',  fantasy;
     background-color: rgba(0, 115, 186, 0.5);
        width: 100%;
        height: 100%;
        clear: both;
            }

section#img-svg {
        background-image: url(dibujo001.svg);
        background-repeat: no-repeat;
        background-position: center;
        width: 49%;
        height: 10rem;
        float: left;
    }

    section #video {
        width: 49%;
        float: right;
        background-color: #666666;
        height: 10rem;
    }

aside {
     background-color: rgba(10,100,200,1);
        width: 100%;
        height: 100%;
            }
footer {
     background-color: rgba(10,100,200,1);
        width: 100%;
        height: 100%;
            }

div#pagina { width: 90%; margin: auto;}
div#logo_head {background-color: rgba (100, 10, 50, 1);}
    
.texto_destacado1 {font-size: 18px;}
.texto_destacado2 {font-size: 15x;}

nav {
    margin-top:1rem;
}

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

nav ul li{
    width:100%;
    background-color:#ff8800;
    margin-bottom:0.5rem;
        }

nav ul li a{
    text-decoration:none;
    color:#ffffff;
    display:block;
    width:100%;
    text-align:center;
    background-color:rgba(10, 100, 200, 1);
}

nav ul li a:hover{
    color:rgba(255,255,255,1);
    background-color:rgba(10,20,30,0.8);
}

@media all and (min-width: 1px) and (max-width: 320px) {
    header nav ul li{
        float:none;
        margin-bottom:0.15rem;
    }
}
    
@media all and (min-width: 321px) and (max-width: 640px) {
    nav ul li{
        width:8rem;
        float:left;
        margin-right:0.4rem;
    }
}

    
@media all and (min-width: 641px) {
    header {
        position:relative;
        width: 100%;
    }
    nav {
        position:absolute;
        bottom:0.1rem;
        right:0.1rem;
    }
    
        nav ul li{
        width:8rem;
        float:left;
        margin-right: 0.4rem;
}
    section#img-svg {
        width:45%;
        float:left;
        margin-right: 10rem;
    }
    section#video{
        width:45%;
        float: right;
        background-color: #666666;
        margin-left: 5%;
    }
}