.imag-res {
	width: 100%;
}

/* Definimos un ancho 100% y una altura fija para nuestro menú */
header{
	width: 100%;
	max-width: 1290px;
	height: 119px;
	position: relative;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	font-family: "Fjalla One", sans-serif;
	font-size: 30px;
}
		header, a, img, li{
			transition: all 1s;
			-moz-transition: all 1s; /* Firefox 4 */
			-webkit-transition: all 1s; /* Safari and Chrome */
			-o-transition: all 1s; /* Opera */
	color: #3D3D3D;
		}

/* El logo sera flotado a la izquierda */
#logo{
    display: block;
    float: left;
    margin: 24px 0px 24px;
}

/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
    }
        
        /* Centramos y ponemos los textos en mayuscula */
    #menu li{
	display: block;
	float: left;
	text-align: center;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 30px;
	padding-bottom: 0px;
	vertical-align: middle;
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
	display: block;
	text-decoration: none;
	line-height: 30px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-weight: normal;
            }
            #menu li a:hover{
	color: #D33034;
            }
    
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        display: none;
        background: url(../images/icoMenu.png) no-repeat center center;
        float: center;
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0;
        top:0;
        opacity: .9;
    }   
        /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }

/* Content */
#content{
    width: 100%;
    margin: 0px;
    text-align: center;
    overflow: hidden;
}

		/* Sizes for the bigger menu */

			header.large{
				height: auto;
			}

			header.large img{
				width: 100%;
				height: auto;
			}

			header.large li{
				margin-top: 0px;
	
			}
			/* Sizes for the smaller menu */
			header.small{ 
				height: 50px; 
			}
			header.small img{ 
				width: auto; 
				height: 50px; 
				margin-top: -20px; 
			}

			header.small li{
	margin-top: -20px;
	font-size: 27px;
			}
		
/*
    MEDIA QUERY
*/

@media screen and (max-width:768px) {
        
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
	float: none;
	background-color: #272c2f;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid #31373b;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 0px 0;
                    height: auto;
                    line-height: normal;
                }
             #menu li a:hover{background:#333663b}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
			width:100%;    
			max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
#logo{
display: block;
float: left;
margin: auto;
margin-left:10px;
margin-bottom:5px;
padding-top:10px;
width:200px
        }
           #menu li a{
	font-size: 20px;
	color: #fff;
	margin:5px;
            }
            #menu li a:hover{
	font-size: 20px;
	color: #ccc;
	margin:5px
            }
			header.small img{ 
				margin-top: 20px; 
            }
  }
  
  @media screen and (min-width: 769px) and (max-width: 1024px) {

header
{
	max-width: 100%;
	font-size: 25px;
}
#logo{
display: block;
float: left;
margin: auto;
margin-left:10px;
margin-bottom:5px;
padding-top:10px;
width:200px
        }
}