@charset "utf-8";
@import url("fontawesome-4.5.0.min.css");

/*::::::::::::::::::::::::::::::::::::
Estilos de las anclas.
::::::::::::::::::::::::::::::::::::*/
a{
    text-decoration:none;
    color:#009BDB;
}

a:active, a:focus{
    background:transparent;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de las clases.left y right
::::::::::::::::::::::::::::::::::::*/

select{
    font-size:inherit;
    font-family:inherit;
}

/*====================================================================================
                            /// ESTRUCTURA DEL MENÚ ///
====================================================================================*/

/*::::::::::::::::::::::::::::::::::::
Estilos de header.
::::::::::::::::::::::::::::::::::::*/

header{
    display:block;
    width:100%;
    text-align:left;
    color:white;
    background: #19265C; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#19265C, #009BDB); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#19265C, #009BDB); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#19265C,#009BDB); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#19265C,#009BDB); /* Standard syntax */
	border-bottom:2px solid white;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de Class.menu
Con la siguiente propiedad centramos
el Div: margin:0 auto;
::::::::::::::::::::::::::::::::::::*/

.menu{
    background:inherit;
    display:block;
    margin:0 auto;
    max-width:978px;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de la clase.clear
::::::::::::::::::::::::::::::::::::*/
.contmenu::after{
    display:table;
    content:"";
    clear:both;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de Id#Logo.
::::::::::::::::::::::::::::::::::::*/

.menu #logo{
    margin:-1px 0 0 0;
    /*background: blue;*/
    float:left;
	background: white;
	padding: 20px 20px;
	position: absolute;
}

.menu #logo img{
        width:170px;
    }

/*::::::::::::::::::::::::::::::::::::
Estilos de Menu
(Botonera de navegación) Nav
::::::::::::::::::::::::::::::::::::*/

nav{
    /*background: red;*/
    float:right;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de ul (Primer nivel)
Todo los textos de esta etiqueta
se transformarán en Mayúsculas
::::::::::::::::::::::::::::::::::::*/
nav ul{
    margin:0;
    padding:0;
    list-style:none;
    text-transform:uppercase;
	font-family: 'Donegal One', serif;
}

/*::::::::::::::::::::::::::::::::::::
Para hacer submenus los elementos
padre deben tener una posición relativa,
y los elementos hijos una posición
absoluta.
::::::::::::::::::::::::::::::::::::*/
nav li{
    display:inline-block;
    position:relative;
    margin:0 15px 0 0;
    padding:0;
}
/*::::::::::::::::::::::::::::::::::::
Con esto le quitamos el margen derecho
al último li.
::::::::::::::::::::::::::::::::::::*/
nav li:last-child{
    margin-right:0;
}
/*::::::::::::::::::::::::::::::::::::
El alto del header lo establecemos
aqui, pero a trávez de la etiqueta a
en donde le damos un padding superior
e inferior. 
::::::::::::::::::::::::::::::::::::*/
nav li a{
    display:block;
    padding:30px 0;
    color:inherit;
}
/*::::::::::::::::::::::::::::::::::::
Aqui se están estableciendo tres
reglas:
1.-Las anclas que esten dentro de una
etiqueta que tenga esta regla, van a 
tener el color #DDC915
2.-Cuando una ancla este en posición
over se va a colorear de este color:
#DDC915
3.-Las anclas que se desprendan de un
li en hover se van a colorear de este
color #DDC915
::::::::::::::::::::::::::::::::::::*/
nav .active a,
nav a:hover,
nav li:hover > a{
    color:skyblue;
    background-color:inherit;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de class.drop
Esta clase es para mandar llamar al
ícono del triágulo invertido.
Tendrá un padding izquierdo de 15px
un font-size de 10px
::::::::::::::::::::::::::::::::::::*/

nav .drop{
    padding-left:15px;
}

nav .drop::after{
    position:absolute;
    font-family:"FontAwesome";
    font-size:10px;
    line-height:10px;
}

nav .drop::after,
nav li li .drop::after{
    content:"\f0d7";
}

nav .drop::after{
    top:35px; left:5px;
}

nav li li .drop::after{
    top:15px; left:5px;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de Submenú padre.
Este es el elemento que se desprende
de los enlaces del nav.
::::::::::::::::::::::::::::::::::::*/

nav ul li:hover > ul{
    visibility:visible;
    opacity:1;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de Submenú padre.
Aqui le quitamos el text.transform
al texto del submenu, de lo contrario
continuará en Mayúsculas. 
::::::::::::::::::::::::::::::::::::*/

.sin{
	margin-top: 2px;
}

nav ul ul{
    z-index:9999;
    position:absolute;
    width:180px;
    text-transform:none;
    visibility:hidden;
    opacity:0;
}

nav li li{
    width:100%;
    margin:0;
}

nav li li a{
    display:block;
    margin:0;
    padding:10px 15px;
    border:solid;
    border-width:0 0 1px 0;
}

nav li li a, nav .active li a{
    color:#FFFFFF;
    background-color:rgba(0,0,0,.6);
    border-color:rgba(0,0,0,.6);
}

nav li li:hover > a,
nav .active .active > a{
    color:#292B2C;
    background-color:#009BDB;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de Submenú hijo.
::::::::::::::::::::::::::::::::::::*/

nav ul ul ul{
    left:180px;
    top:0;
}

/*::::::::::::::::::::::::::::::::::::
Estilos de form.
Lo primero que se hara aquí es ocultar
el formulario en vista monitor.
::::::::::::::::::::::::::::::::::::*/

nav form{
    display:none;
    margin:12px 0 0 0;
    padding:0;
}

nav form select, nav form select option{
    display:block;
    cursor:pointer;
    outline:none;
}
nav form select{
    width:100%;
    padding:5px;
    border:none;
    color:#000;
    background-color:white;
}

nav form select option{
    margin:5px;
    padding:0;
    border:none;
}

/* Media Queries
--------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}

/* =============================================================================
   DISEÑO TABLETA: 900PX E INFERIOR.
   ========================================================================== */

@media screen and (max-width:900px){

    /*::::::::::::::::::::::::::::::::::::
    Estilos del contenedor class#menu
    A este contenedor le damos relleno
    superior e inferior de 30px, y un
    ancho de 90%.
    ::::::::::::::::::::::::::::::::::::*/
	.menu{
    padding:30px 0;
    max-width:90%;
    }
    
    /*::::::::::::::::::::::::::::::::::::
    Estilos de id#logo
    ::::::::::::::::::::::::::::::::::::*/
	.menu #logo{
		margin: 0 0 0 0;
		background: none;
		padding: 0px;
		position: static;
		width: 150px;
	}
    
    .menu #logo img{
        width:180px;
    }
    
    /*::::::::::::::::::::::::::::::::::::
    Estilos de nav
    Aqui ocultamos la navegación para que
    ya no aparezca en vista tableta ni
    celular.
    ::::::::::::::::::::::::::::::::::::*/

	nav ul{display:none;}
    
    /*::::::::::::::::::::::::::::::::::::
    Estilos de form.
    Aqui aparecemos el formulario
    en la vista de tableta
    ::::::::::::::::::::::::::::::::::::*/
    
	nav form{display:block;
	margin-top: 45px;
	}
    
}

/* =============================================================================
   DISEÑO MÓVIL: 650PX E INFERIOR.
   ========================================================================== */
@media screen and (max-width:650px){
    
    /*::::::::::::::::::::::::::::::::::::
    Estilos del contenedor class .menu
    ::::::::::::::::::::::::::::::::::::*/      
	.menu {text-align:center;}
    
    /*::::::::::::::::::::::::::::::::::::
    Estilos de la clase #logo
    Aqui el logo ya no flotara
    hacia la izquierda, y tendrá
    un margen inferior de 15px.
    ::::::::::::::::::::::::::::::::::::*/
	.menu #logo{
        margin:0 auto;
        display:block;
        float:none;
    }
    
    .menu #logo img{
        width:180px;
    }
    
    /*::::::::::::::::::::::::::::::::::::
    Aqui le quitamos lo de flotar
    a la derecha a la navegación.
    ::::::::::::::::::::::::::::::::::::*/
    nav{
        display:block;
        float:none;
    }
    
	nav form{
    margin:12px 0 0 0;
}
	
	.scrollable{
        display:block;
        width:100%;
        margin:0 0 30px 0;
        padding:0 0 15px 0;
        overflow:auto;
        overflow-x:scroll;
    }
    
	.scrollable table{
        margin:0;
        padding:0;
        white-space:nowrap;
    }
}