@import url("https://fonts.googleapis.com/css?family=Lobster");

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
    background: url("./images/bg-0.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
nav{
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, .5);
    text-align: center;
    font-size: 2.2em;
    font-family: 'Lobster', cursive;
}
.caja{
    height: 400px;
    text-align: center;
}

.container-caja{
    position: relative;
    height: 400px;
    background: rgba(0, 0, 0, .5);
    z-index: 2;
}
.container-caja p{
    padding: 10px;
    color: white;
}
.caja h1, nav h1{
    color:white;
    padding-top: 10px;
    font-size: 2em;
    
}

.caja ul .submenu{
        display:inline-block;
        border: 1px solid rgba(255,255,255,.5);
        color: #fff;
        padding: 10px;
}
.caja ul li{
        display:inline-block;
        color: #fff;
        padding: 10px;
}
.caja ul li:hover{
        color:#fff;        
}
/*.caja ul li a{
        display: block;
}*/
.caja ul li .elements{
        width: 100%;
        position: relative;
        display: none;
}
.caja ul li:hover .elements{
        position: absolute;
        height: 355px;
        top: 0;
        left: 0;
        background:rgba(255,255,255,0.75);
        display: block;
    }
.caja ul li .elements img{
    width: 50px;
    height: auto;
}
.caja ul li .elements li{
    color: white;
    font-size: 10px;
    padding: 10px;
    margin: 5px;
}
.caja ul li .elements h3, .caja ul li .elements p{
  display: none;
}

.noticias{
            margin: 20px 0px 20px 0px;
            width: 100%;
            height: 150px;
            background: pink;
}
footer{
            width: 100%;
            height: 75px;
            background: rgba(0, 0, 0, .5);
            border-top: 2px solid #000;
            bottom: 0;
            position: fixed;
}
.footer{
            width: 100%;
            height: 45px;
            background: rgba(0, 0, 0, .5);
            border-top: 2px solid #000;
            position: absolute;
            bottom: -10px;
}
.logo img{
            margin-left: 20px;
            margin-top: 7px;
            height: 60px;
            width:auto;
}    

@media screen and (max-width:991px){
    .caja, .container-caja{
        height: 100%;
    }
    .caja ul li .elements{
        display: block;
    }
    .caja ul li:hover .elements{
        height: 355px;
        top: 0;
        left: 0;
        background:rgba(0,255,255,0.75);
        display: none;
    }
    .caja ul li .elements h3, .caja ul li .elements p{
        display: block;
    }
    .footer{
        display: none;
    }
    footer{
        position: relative;
    }

}