*{
    margin: 0;
    padding: 0;
}
header, nav{display: block;}
/* Definimos un ancho 100% y una altura fija para nuestro menú */
header{
	background:#ecae40;
    height:20px;
    position:relative;
    width:100%;
    z-index:154;
}
/* El logo sera flotado a la izquierda */
#logo{
    display:block;
    float:left;
    margin:6px 10px 0;
    width:100%;
	max-width:720px;
    text-indent:-9999px;
}
/* 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{
	font-family:'PT Sans Narrow', sans-serif;
	font-size:14px;
	font-weight:700;
	color:#181818;
	text-decoration:none;
    display:block;
    float:left;
    text-align: center;
    }
    /* Damos estilo a nuestros enlaces */
    #menu li a{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:14px;
	font-weight:700;
	color:#181818;
	text-decoration:none;
    display: block;
    text-decoration: none;
    height:48px;
    line-height:48px;
    padding:0 10px;
    }
    #menu li a:hover{color:#999;}
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        z-index:9;
        background:#ecae40;
        display: none;
        background: url(../images/nav.png) no-repeat center center;
        float: left;
        width: 48px;
        height: 48px;
        position: absolute;
        right: 0;
        top:0;
        opacity: .6;
    }
    /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
    #nav-mobile.nav-active{opacity: 1;}
/* Content */
#content{
    width:80%;
    margin:60px 10%;
    text-align:center;
    overflow:hidden;
}
    h2{
        font-size: 50px;
        font-weight: 600;
        text-transform: uppercase;
        color: #624c3f;
    }
/* MEDIA QUERY */
@media only screen and (min-width: 980px) {
	header, nav {display:none;}
    h2{font-size:40px;}
    /* mostramos #nav-mobile */
    #menu{display:none;}
    /* ocultamos menu normal */
    #atencioncliente{display:block;}
    #menucillo{display:block;}
    #cabeceraweb{display:block;}
    #cabeceramovil{display:none;}
	#textoinferior{display:block;}
	#textoinferiormov{display:none;}
	#slideshow {
    position:relative;
	width:100%; max-width:998px;
    height:360px;
    z-index: 1;
	}
}
@media only screen and (max-width: 979px) {
    header, nav{display: block;}
    h2{font-size:40px;}
    /* mostramos #nav-mobile */
    #nav-mobile{display:block;}
    #menu{display:block;}
    /* ocultamos menu normal */
    #menucillo{display:none;}
    #cabeceraweb{display:none;}
    #cabeceramovil{display:block;}
	#textoinferior{display:none;}
	#textoinferiormov{display:block;}
	#slideshow {
    position:relative;
	width:100%; max-width:998px;
    height:180px;
	}
    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 98%;
        float: none;
        padding-top: 48px;
		padding-left:10px;
		position:absolute;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow:0 1px 2px rgba(0,0,0,.5);
            box-shadow:0 1px 2px rgba(0,0,0,.5);
            max-height:0;
            overflow:hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background:#F1F1F1;
                border-bottom:1px solid #282b30;
                float:none;
            }
            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 6px 0;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{background:#DDDDDD}
        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height:440px;
            -webkit-transition:max-height .4s;
            -moz-transition:max-height .4s;
            -ms-transition:max-height .4s;
            -o-transition:max-height .4s;
            transition:max-height .4s;
        }
}
@media only screen and (min-width: 601px) and (max-width: 980px) {
	#slideshow {
    position:relative;
	width:100%; max-width:980px;
    height:280px;
    z-index: 1;
    }
}
@media only screen and (min-width: 401px) and (max-width: 600px) {
	#slideshow {
    position:relative;
	width:100%; max-width:600px;
    height:160px;
    z-index: 1;
	}	
}
@media only screen and (min-width: 300px) and (max-width: 400px) {
	#slideshow {
    position:relative;
	width:100%; max-width:400px;
    height:140px;
    z-index: 1;
	}	
}